/* BEXGRAM — Kesfet (Explore / Feed) Modern Stylesheet
 * 100% SVG Icons, Reels/Stories Tray, Search Bar, Double-Tap Like, Nested Comments, Forwarding, Lightbox
 */

.bex-global-header { z-index: 100 !important; }

#pane-welcome:has(.bex-explore-container),
#pane-welcome.has-explore-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--wa-chat, #efeae2) !important;
}

html.dark .bex-global-header { z-index: 100 !important; }

#pane-welcome:has(.bex-explore-container),
html.dark #pane-welcome.has-explore-container {
    background: var(--wa-bg, var(--bx-bg, #0B141A)) !important;
}

.bex-explore-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    color: var(--wa-text, var(--color-bg-dark));
    background: transparent;
}

/* ── Standalone Kesfet Mount ──
Üye kabuğunda kaydırma sahibi .bex-user-container / pencere.
whatsapp-clone.css height:100% kilidi aşağıda ezilir. */
body.page-explore #kesfet-desktop-sidebar {
min-height: 0;
overflow: hidden;
}

.bex-explore-side-btn {
    transition: all 0.15s ease;
}
.bex-explore-side-btn:hover {
    background: var(--wa-hover, rgba(0,0,0,0.04)) !important;
}
.bex-explore-side-btn.is-active {
    background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 10%, var(--wa-surface, var(--color-bg-light))) !important;
    border-color: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 40%, transparent) !important;
}
html.dark .bex-explore-side-btn.is-active {
    background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 16%, var(--wa-surface, var(--bx-surface, #111B21))) !important;
    border-color: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 50%, transparent) !important;
}
#bex-explore-mount {
position: relative !important;
overflow-x: hidden !important;
overflow-y: visible !important;
min-height: 0 !important;
min-width: 0;
height: auto !important;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
margin-inline: auto;
box-sizing: border-box;
background: transparent !important;
border: none !important;
}

html.dark #bex-explore-mount {
    background: transparent !important;
    border: none !important;
}

#bex-explore-mount .bex-explore-container {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
max-width: 100%;
}

#bex-explore-mount .bex-explore-header {
    display: none !important;
}

#bex-explore-mount .bex-explore-feed {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
overscroll-behavior-y: auto !important;
padding-bottom: 20px !important;
max-width: 100%;
}
@media (max-width: 320px) {
#bex-explore-mount { padding-inline: 8px; }
.bex-post-card, .bex-explore-nav-bar, .bex-explore-tabs { max-width: 100%; min-width: 0; }
}

/* ── 1. Explore Header (Bexgram Standart Yapı) ── */
.bex-explore-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(8px, env(safe-area-inset-top, 8px)) max(12px, env(safe-area-inset-right, 12px)) 8px max(12px, env(safe-area-inset-left, 12px));
    background: var(--wa-surface, var(--color-bg-light));
    border-bottom: 1px solid var(--wa-line, rgba(0,0,0,0.08));
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    gap: 8px;
}

html.dark .bex-explore-header {
    background: var(--wa-surface, var(--bx-surface, #111B21));
    border-color: var(--wa-line, rgba(255,255,255,0.08));
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.bex-explore-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bex-explore-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--wa-text, var(--color-bg-dark));
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.bex-explore-back-btn:hover {
    background: var(--wa-hover, rgba(0,0,0,0.05));
}
.bex-explore-back-btn:active {
    transform: scale(0.92);
}

.bex-explore-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wa-text, var(--color-bg-dark));
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bex-explore-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wa-green-deep, var(--wa-green-soft));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-green-deep, var(--wa-green-soft)) 30%, transparent);
    animation: bexPulseLive 2s infinite;
    flex-shrink: 0;
}

@keyframes bexPulseLive {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.bex-explore-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    min-height: 34px;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--wa-green-deep, var(--wa-green-deep)), var(--wa-green, #028569));
    color: var(--color-bg-light) !important;
    border: none;
    border-radius: 17px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 30%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    user-select: none;
    flex-shrink: 0;
}

.bex-explore-create-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 40%, transparent);
    transform: translateY(-1px);
}
.bex-explore-create-btn:active {
    transform: scale(0.95);
}

.bex-explore-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--wa-text, var(--color-bg-dark));
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.bex-explore-refresh-btn:hover {
    background: var(--wa-hover, rgba(0,0,0,0.06));
}
.bex-explore-refresh-btn:active {
    transform: scale(0.92);
}
.bex-explore-refresh-btn.is-spinning svg {
    animation: bexSpinExplore 0.6s linear infinite;
}
@keyframes bexSpinExplore {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── 2. Navigation Sub-Bar (Arama & Filtre Sekmeleri) ── */
.bex-explore-nav-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 10px 12px;
    background: var(--wa-surface, var(--color-bg-light));
    border-bottom: 1px solid var(--wa-line, rgba(0,0,0,0.06));
    flex-shrink: 0;
}

html.dark .bex-explore-nav-bar {
    background: var(--wa-surface, var(--bx-surface, #111B21));
    border-color: var(--wa-line, rgba(255,255,255,0.06));
}

.bex-explore-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--wa-search, var(--wa-search));
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 4px 12px;
    min-height: 36px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 100%;
    max-width: min(720px, 100%);
    margin-left: auto;
    margin-right: auto;
}

html.dark .bex-explore-search-wrap {
    background: var(--wa-search, var(--wa-line));
}

.bex-explore-search-wrap:focus-within {
    border-color: var(--wa-green-deep, var(--wa-green-deep));
    background: var(--wa-surface, var(--color-bg-light));
}
html.dark .bex-explore-search-wrap:focus-within {
    background: var(--wa-surface, var(--bx-surface, #111B21));
}

.bex-explore-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12.5px;
    color: var(--wa-text, var(--color-bg-dark));
    outline: none;
}

.bex-explore-search-input::placeholder {
    color: var(--wa-muted, var(--wa-muted));
}

.bex-explore-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    width: 100% !important;
    max-width: min(720px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
.bex-explore-tabs::-webkit-scrollbar {
    display: none;
}

.bex-explore-tab {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    border: 1px solid var(--wa-line, rgba(0,0,0,0.08)) !important;
    background: var(--wa-bg, rgba(0,0,0,0.03)) !important;
    color: var(--wa-muted, var(--wa-muted)) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}

html.dark .bex-explore-tab {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

.bex-explore-tab:hover {
    background: var(--wa-hover, rgba(0,0,0,0.06));
    color: var(--wa-text, var(--color-bg-dark));
}

.bex-explore-tab.is-active {
    background: #00a884 !important;
    border-color: #00a884 !important;
    color: #111b21 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.35) !important;
}
.bex-explore-tab.is-active svg {
    color: #111b21 !important;
    stroke: #111b21 !important;
}
html.dark .bex-explore-tab.is-active {
    background: var(--bx-brand, #00a884) !important;
    border-color: var(--bx-brand, #00a884) !important;
    color: #111b21 !important;
    box-shadow: 0 2px 10px rgba(0, 168, 132, 0.45) !important;
}
html.dark .bex-explore-tab.is-active svg {
    color: #111b21 !important;
    stroke: #111b21 !important;
}

.bex-explore-head-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--wa-muted, var(--wa-muted));
    padding: 5px 12px;
    border-radius: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.bex-explore-head-btn:hover {
    color: var(--wa-text, var(--color-bg-dark));
}
.bex-explore-head-btn.is-active {
    background: var(--wa-green-deep, var(--wa-green-deep)) !important;
    color: var(--color-bg-light) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
html.dark .bex-explore-head-btn.is-active {
    background: var(--wa-green-deep, var(--wa-green-deep)) !important;
    color: var(--color-bg-light) !important;
}

.bex-explore-tab-icon {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── 3. Creator Stories / Öne Çıkanlar Tray ── */
.bex-explore-creators-bar {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--wa-surface, var(--color-bg-light));
    border-bottom: 1px solid var(--wa-line, rgba(0,0,0,0.06));
    flex-shrink: 0;
}
.bex-explore-creators-bar::-webkit-scrollbar {
    display: none;
}

html.dark .bex-explore-creators-bar {
    background: var(--wa-surface, var(--bx-surface, #111B21));
    border-color: var(--wa-line, rgba(255,255,255,0.06));
}

.bex-creator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    width: 52px;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}

.bex-creator-item:active {
    transform: scale(0.93);
}

.bex-creator-ring {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    background: linear-gradient(135deg, var(--wa-green-deep, var(--wa-green-deep)), #1da1f2, #eab308) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
}

.bex-creator-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: var(--wa-line) !important;
    border: 2px solid var(--wa-surface, var(--color-bg-light)) !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
}

html.dark .bex-creator-avatar {
    border-color: var(--wa-surface, #111B21) !important;
}

.bex-creator-name {
    font-size: 10px;
    font-weight: 600;
    max-width: 52px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--wa-text, var(--color-bg-dark));
}

.bex-my-story-item {
    position: relative;
}

.bex-my-story-ring {
    background: transparent !important;
    border: 2px dashed var(--bex-primary, var(--color-primary));
    position: relative;
    box-shadow: none !important;
}

.bex-my-story-plus {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bex-primary, var(--color-primary));
    color: var(--color-bg-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wa-surface, var(--color-bg-light));
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 3;
}

.bex-my-story-plus svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

html.dark .bex-my-story-plus {
    border-color: var(--color-bg-dark);
}

/* ── 4. Feed Akışı (Scrollable Container) ── */
.bex-explore-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px max(100px, calc(72px + env(safe-area-inset-bottom, 24px)));
    box-sizing: border-box;
}

.bex-explore-feed::-webkit-scrollbar {
    width: 6px;
}

.bex-explore-feed::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

html.dark .bex-explore-feed::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}

/* ── 5. Post Kartı (Modern Card Design) ── */
.bex-post-card {
width: 100%;
max-width: min(720px, 100%);
margin-left: auto;
margin-right: auto;
background: var(--wa-surface, var(--color-bg-light));
border: 1px solid var(--wa-line, rgba(0,0,0,0.07));
border-radius: 16px;
margin-bottom: 16px;
overflow: visible;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
position: relative;
box-sizing: border-box;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

#bex-explore-feed-stream,
.bex-focus-post-wrapper,
.bex-wa-skel,
.bex-wa-skel-card,
.bex-explore-empty,
.bex-feed-end-notice {
    width: 100%;
    max-width: min(720px, 100%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.bex-post-card:has(.bex-post-popover-menu),
.bex-post-card.has-active-menu {
    z-index: 40 !important;
}

.bex-post-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border-color: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 35%, transparent);
}

html.dark .bex-post-card {
    background: var(--wa-surface, var(--bx-surface, #111B21));
    border-color: var(--wa-line, rgba(255,255,255,0.08));
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Header */
.bex-post-header {
    display: flex;
    align-items: stretch;
    padding: 10px 12px 8px;
}

.bex-post-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.bex-post-context-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    margin-top: 2px;
}

.bex-post-context-row .bex-post-author-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--wa-line, var(--wa-line));
  background: var(--wa-search, var(--wa-search));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wa-text-secondary, var(--wa-muted, #54656f));
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.bex-post-context-row .bex-post-location-item svg {
    flex: 0 0 auto;
    color: #ef4444;
}

.bex-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.bex-post-author:hover {
    text-decoration: none;
    opacity: 0.92;
}

.bex-post-author:hover .bex-post-author-name {
    color: var(--wa-green-deep, var(--wa-green-deep));
}

.bex-post-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    background: #d8dadf !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--wa-line, rgba(0,0,0,0.08)) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease;
}

.bex-post-author:hover .bex-post-avatar {
    transform: scale(1.03);
}

.bex-post-author-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.bex-post-author-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    width: auto;
}

.bex-post-author-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    display: inline-block;
    color: var(--wa-text, var(--color-bg-dark));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 0 1 auto;
    min-width: 0;
}

.bex-post-author-row > .bex-verified-badge,
.bex-post-author-row > .member-verified {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

.bex-post-author-name .bex-post-author-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--wa-muted, var(--wa-muted));
}

.bex-post-meta-sub {
    font-size: 11.5px;
    color: var(--wa-muted, var(--wa-muted));
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bex-post-actions-top {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: max-content !important;
    align-self: center !important;
    position: relative !important;
}

.bex-post-follow-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 4px 12px !important;
    min-height: 28px !important;
    height: 28px !important;
    width: auto !important;
    min-width: max-content !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    border: 1px solid var(--wa-green-deep, var(--wa-green-deep)) !important;
    background: transparent !important;
    color: var(--wa-green-deep, var(--wa-green-deep)) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    overflow: hidden !important;
}

.bex-follow-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 1 !important;
}

.bex-follow-btn-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.bex-follow-btn-text {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
}

.bex-post-follow-btn:hover {
    background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 10%, transparent) !important;
}

.bex-post-follow-btn.is-following {
    background: var(--wa-search, rgba(0,0,0,0.06)) !important;
    border-color: var(--wa-line, rgba(0,0,0,0.12)) !important;
    color: var(--wa-muted, var(--wa-muted)) !important;
}

.bex-post-opt-btn {
    background: transparent;
    border: none;
    color: var(--wa-muted, var(--wa-muted));
    cursor: pointer;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.bex-post-opt-btn:hover {
    background: var(--wa-hover, rgba(0,0,0,0.06));
    color: var(--wa-text, var(--color-bg-dark));
}

/* Media — Bounded Square Proportions & Smooth Cover */
.bex-post-media-wrap {
    position: relative;
    width: 100%;
    background: var(--wa-search, var(--color-bg-dark));
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 540px;
}

@media (max-width: 640px) {
    .bex-post-media-wrap {
        max-height: 480px;
    }
    .bex-post-media-wrap:not(.bex-post-media-video) {
        max-height: 480px;
    }
    .bex-post-media-video {
        aspect-ratio: 16 / 9 !important;
        max-height: 380px !important;
    }
}

.bex-post-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    transition: transform 0.25s ease;
}

.bex-post-card:hover .bex-post-media-img {
    transform: scale(1.01);
}

.bex-post-heart-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #ff3040;
    pointer-events: none;
    z-index: 25;
    filter: drop-shadow(0 0 20px rgba(255, 48, 64, 0.75));
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes bexHeartFloatPop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    40% { transform: translate(-50%, -50%) scale(1.35) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 28px rgba(255, 48, 64, 0.9)); }
    65% { transform: translate(-50%, -60%) scale(1.15) rotate(6deg); opacity: 0.95; }
    100% { transform: translate(-50%, -110%) scale(0.65) rotate(0deg); opacity: 0; }
}

.bex-post-heart-pop.is-active {
    animation: bexHeartFloatPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* Action Bar */
.bex-post-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 2px 12px;
}

.bex-post-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bex-post-act-btn {
    background: transparent;
    border: none;
    color: var(--wa-text, var(--color-bg-dark));
    cursor: pointer;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
    user-select: none;
}

.bex-post-act-btn svg {
    width: 19px !important;
    height: 19px !important;
}

.bex-post-act-btn:hover {
    transform: scale(1.15);
}
.bex-post-act-btn:active {
    transform: scale(0.9);
}

.bex-post-act-btn.is-liked {
    color: #ff3040 !important;
    animation: bexHeartbeat 0.35s ease;
}

@keyframes bexHeartbeat {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.bex-post-act-btn.is-saved {
    color: var(--wa-green-deep, var(--wa-green-deep)) !important;
}

html.dark .bex-post-act-btn {
    color: var(--wa-text, var(--wa-line));
}
html.dark .bex-post-act-btn.is-liked {
    color: #ff3040 !important;
}
html.dark .bex-post-act-btn.is-saved {
    color: var(--wa-green-deep, var(--wa-green-deep)) !important;
}

/* Body */
.bex-post-body {
    padding: 0 12px 10px 12px;
}

.bex-post-likes-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--wa-text, var(--color-bg-dark));
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.15s ease;
}
.bex-post-likes-label:hover {
    opacity: 0.8;
}

.bex-post-caption {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--wa-text, var(--color-bg-dark));
    word-break: break-word;
    margin-bottom: 5px;
}

.bex-post-caption-handle {
    font-weight: 600;
    margin-right: 6px;
    text-decoration: none;
    color: inherit;
}

.bex-post-hashtag {
    color: #008069;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}
.bex-post-hashtag:hover {
    color: #00a884;
    text-decoration: underline;
}
html.dark .bex-post-hashtag {
    color: var(--bx-brand, #00a884) !important;
}
html.dark .bex-post-hashtag:hover {
    color: #25d366 !important;
    text-decoration: underline;
}

/* Hashtags inside Decorative Canvas Posts (Gradients & Cards) */
.bex-post-canvas .bex-post-hashtag,
.bex-post-canvas-text .bex-post-hashtag,
[class*="bex-bg-"] .bex-post-hashtag {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin: 2px 4px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}
.bex-post-canvas .bex-post-hashtag:hover,
.bex-post-canvas-text .bex-post-hashtag:hover,
[class*="bex-bg-"] .bex-post-hashtag:hover {
    background: rgba(255, 255, 255, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Quick Reaction Emojis */
.bex-post-quick-emojis {
    display: flex;
    gap: 6px;
    padding: 4px 0 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.bex-post-quick-emojis::-webkit-scrollbar {
    display: none;
}

.bex-quick-emoji-btn {
    border: none;
    background: var(--wa-bg, rgba(0,0,0,0.04));
    border-radius: 12px;
    padding: 3px 7px;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
    user-select: none;
}

html.dark .bex-quick-emoji-btn {
    background: rgba(255,255,255,0.06);
}

.bex-quick-emoji-btn:hover {
    transform: scale(1.22);
    background: var(--wa-hover, rgba(0,0,0,0.08));
}
.bex-quick-emoji-btn:active {
    transform: scale(0.9);
}

/* Comments Preview */
.bex-post-comments-summary {
    margin-top: 4px;
}

.bex-post-view-comments-btn {
    background: transparent;
    border: none;
    font-size: 12.5px;
    color: var(--wa-muted, var(--wa-muted));
    cursor: pointer;
    padding: 2px 0;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-weight: 500;
}
.bex-post-view-comments-btn:hover {
    text-decoration: underline;
}

.bex-post-comment-item {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 4px;
    color: var(--wa-text, var(--color-bg-dark));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bex-post-comment-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.bex-post-comment-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.bex-post-comment-edit-btn,
.bex-post-comment-del-btn {
    background: transparent;
    border: none;
    color: var(--wa-muted, var(--wa-muted));
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.15s ease;
    flex-shrink: 0;
    min-height: 28px;
    min-width: 28px;
    touch-action: manipulation;
}

.bex-post-comment-edit-btn:hover {
    color: var(--wa-green-deep, var(--wa-green-deep));
    opacity: 1;
    background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 12%, transparent);
}

.bex-post-comment-del-btn:hover {
    color: #ef4444;
    opacity: 1;
    background: rgba(239, 68, 68, 0.12);
}

.bex-comment-edited-badge {
    font-size: 11px;
    color: var(--wa-muted, var(--wa-muted));
    font-style: italic;
    margin-left: 4px;
    opacity: 0.85;
}

.bex-post-comment-author {
    font-weight: 700;
    margin-right: 4px;
}

/* Inline Comment Form */
.bex-post-inline-comment {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--wa-line, rgba(0,0,0,0.06));
}

html.dark .bex-post-inline-comment {
    border-top-color: rgba(255,255,255,0.06);
}

.bex-post-inline-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--wa-text, var(--color-bg-dark));
    outline: none;
    padding: 6px 0;
}

.bex-post-inline-input::placeholder {
    color: var(--wa-muted, var(--wa-muted));
}

.bex-post-inline-send {
    background: transparent;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wa-green-deep, var(--wa-green-deep));
    cursor: pointer;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
    padding: 4px 8px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.bex-post-inline-input:not(:placeholder-shown) + .bex-post-inline-send {
    opacity: 1;
    pointer-events: auto;
}

/* Skeletons & Shimmer Placeholder */
@keyframes bexShimmerWave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.bex-post-skeleton, .bex-shimmer, .bex-wa-skel-card {
    width: 100%;
    max-width: min(560px, 100%);
    min-height: 400px;
    background: linear-gradient(90deg, var(--wa-surface, rgba(0,0,0,0.03)) 20%, var(--wa-line, rgba(0,0,0,0.08)) 50%, var(--wa-surface, rgba(0,0,0,0.03)) 80%) !important;
    background-size: 200% 100% !important;
    border-radius: 18px;
    margin-bottom: 18px;
    animation: bexShimmerWave 1.5s infinite ease-in-out !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

html.dark .bex-post-skeleton, html.dark .bex-shimmer, html.dark .bex-wa-skel-card {
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 20%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.02) 80%) !important;
    background-size: 200% 100% !important;
}

.bex-explore-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--wa-muted, var(--wa-muted));
}

.bex-explore-empty-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    opacity: 0.45;
}

/* ── 6. Modallar ve Bottom Sheet'ler ── */
.bex-comment-modal {
    position: fixed;
    inset: 0;
    z-index: 100060 !important;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: bexFadeIn 0.2s ease;
}

@keyframes bexFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 640px) {
    .bex-comment-modal {
        align-items: center;
    }
}

.bex-comment-sheet {
    width: 100%;
    max-width: min(520px, calc(100vw - 32px));
    height: min(80vh, calc(100dvh - 32px));
    max-height: min(640px, calc(100dvh - 32px));
    background: var(--wa-surface, var(--color-bg-light));
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
    animation: bexSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bexSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (min-width: 640px) {
    .bex-comment-sheet {
        border-radius: 20px;
        height: min(600px, calc(100dvh - 32px));
        max-height: min(640px, calc(100dvh - 32px));
        animation: bexZoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes bexZoomIn {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

html.dark .bex-comment-sheet {
    background: var(--wa-surface, var(--color-bg-dark));
}

.bex-sheet-drag-handle {
    width: 36px;
    height: 4px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    margin: 8px auto 0 auto;
}
html.dark .bex-sheet-drag-handle {
    background: rgba(255,255,255,0.2);
}

.bex-comment-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--wa-line, rgba(0,0,0,0.08));
}

html.dark .bex-comment-sheet-header {
    border-bottom-color: rgba(255,255,255,0.08);
}

.bex-comment-sheet-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--wa-text, var(--color-bg-dark));
}

.bex-comment-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
}

.bex-comment-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.bex-comment-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.bex-comment-main {
    flex: 1;
    min-width: 0;
}

.bex-comment-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wa-text, var(--color-bg-dark));
}

.bex-comment-body {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
    margin-top: 2px;
    color: var(--wa-text, var(--color-bg-dark));
}

.bex-comment-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--wa-muted, var(--wa-muted));
}

.bex-comment-action-btn,
.bex-comment-delete-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    min-height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    touch-action: manipulation;
}

.bex-comment-edit-btn {
    color: var(--wa-green-deep, var(--wa-green-deep));
}
.bex-comment-edit-btn:hover {
    background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 10%, transparent);
}

.bex-comment-delete-btn {
    color: #ef4444;
}
.bex-comment-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    text-decoration: none;
}

/* Inline Edit Box */
.bex-comment-edit-box {
    margin-top: 6px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.bex-comment-edit-input {
    width: 100%;
    border: 1px solid var(--wa-green-deep, var(--wa-green-deep));
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--wa-surface, var(--color-bg-light));
    color: var(--wa-text, var(--color-bg-dark));
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.4;
}

html.dark .bex-comment-edit-input {
    background: var(--wa-search, var(--wa-line));
    border-color: var(--wa-green-deep, var(--wa-green-deep));
}

.bex-comment-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.bex-comment-edit-cancel,
.bex-comment-edit-save {
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
}

.bex-comment-edit-cancel {
    background: var(--wa-search, rgba(0,0,0,0.06));
    color: var(--wa-text, var(--color-bg-dark));
}

html.dark .bex-comment-edit-cancel {
    background: rgba(255,255,255,0.08);
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}

.bex-comment-edit-cancel:hover {
    opacity: 0.8;
}

.bex-comment-edit-save {
    background: var(--wa-green-deep, var(--wa-green-deep));
    color: var(--color-bg-light);
}

.bex-comment-edit-save:hover {
    background: color-mix(in srgb, var(--wa-green-deep, var(--wa-green-deep)) 85%, #000);
}

.bex-comment-edit-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bex-comment-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom, 10px)) 16px;
    border-top: 1px solid var(--wa-line, rgba(0,0,0,0.08));
    background: var(--wa-search, var(--wa-search));
}

html.dark .bex-comment-input-bar {
    background: var(--wa-search, var(--wa-line));
    border-top-color: var(--wa-line, rgba(255,255,255,0.08));
}

.bex-comment-input-bar input {
    flex: 1;
    border: none;
    border-radius: 20px;
    padding: 9px 16px;
    background: var(--wa-surface, var(--color-bg-light));
    color: var(--wa-text, var(--color-bg-dark));
    font-size: 13.5px;
    outline: none;
}

html.dark .bex-comment-input-bar input {
    background: var(--wa-surface, var(--color-bg-dark));
}

.bex-comment-input-bar button {
    background: var(--wa-green-deep, var(--wa-green-deep));
    color: var(--color-bg-light);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s ease;
    flex-shrink: 0;
}
.bex-comment-input-bar button:active {
    transform: scale(0.92);
}

/* ── 7. Image Lightbox (Full-Screen Preview) ── */
.bex-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100060 !important;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: bexFadeIn 0.2s ease;
}

.bex-lightbox-img {
    max-width: min(100%, calc(100vw - 32px));
    max-height: min(90vh, calc(100dvh - 32px));
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

.bex-lightbox-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 16px));
    right: max(16px, env(safe-area-inset-right, 16px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--color-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.bex-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ── 8. Responsive Ekran Uyumları ── */
@media (max-width: 480px) {
    .bex-post-card {
        border-radius: 14px;
        margin-bottom: 14px;
    }
    .bex-explore-feed {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 360px) {
    .bex-explore-header {
        padding: max(8px, env(safe-area-inset-top, 8px)) 10px 8px 10px;
    }
    .bex-explore-title {
        font-size: 16px;
    }
    .bex-explore-create-btn {
        padding: 6px 12px;
        font-size: 11.5px;
        min-height: 44px;
        box-sizing: border-box;
    }
    .bex-creator-item {
        width: 54px;
    }
    .bex-creator-ring {
        width: 46px;
        height: 46px;
    }
    .bex-creator-avatar {
        width: 42px;
        height: 42px;
    }
    .bex-post-card {
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .bex-post-header,
    .bex-post-action-bar,
    .bex-post-body {
        padding-left: 10px;
        padding-right: 10px;
    }
    .bex-post-header-main {
        gap: 6px;
    }
    .bex-post-context-row .bex-post-author-meta {
        font-size: 10.5px;
        padding: 1px 6px;
    }
    .bex-post-action-group {
        gap: 6px;
    }
}

/* ── 9. Text-only Post & Video Media Enhancements ── */
.bex-post-card.is-text-only {
    border-top: 3px solid var(--bex-primary, var(--color-primary));
    background: var(--wa-surface, var(--color-bg-light));
}
.bex-post-card.is-text-only .bex-post-body {
    padding-top: 14px;
}
.bex-post-text-highlight {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--wa-text, var(--color-bg-dark));
    padding: 14px 16px;
    margin: 4px 0 10px;
    border-radius: 12px;
    background: var(--wa-line, rgba(0, 0, 0, 0.03));
    word-break: break-word;
}
html.dark .bex-post-text-highlight {
    background: rgba(255, 255, 255, 0.04);
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}
.bex-post-media-video {
    background: var(--color-text);
    aspect-ratio: 16 / 9;
    max-height: 520px;
}
.bex-post-media-video-el {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain;
}

/* ── 10. Gelişmiş Gönderi İşlemleri & 3 Nokta Menüsü (V5) ── */
.bex-desktop-only-btn {
    display: inline-flex !important;
}
@media (max-width: 767px) {
    .bex-desktop-only-btn {
        display: none !important;
    }
}

.bex-post-three-dots-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    color: var(--wa-muted, var(--wa-muted));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.bex-post-three-dots-btn:hover {
    background: var(--wa-hover, rgba(0, 0, 0, 0.06));
    color: var(--wa-text, var(--color-bg-dark));
    transform: scale(1.05);
}
html.dark .bex-post-three-dots-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}

.bex-post-edited-tag {
    font-size: 11px;
    color: var(--wa-muted, var(--wa-muted));
    font-style: italic;
    opacity: 0.9;
}
.bex-post-pinned-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--wa-green-deep, var(--wa-green-deep));
}

.bex-post-comments-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--wa-search, rgba(0, 0, 0, 0.03));
    border-radius: 12px;
    font-size: 12px;
    color: var(--wa-muted, var(--wa-muted));
    margin-top: 8px;
    user-select: none;
}
html.dark .bex-post-comments-disabled {
    background: rgba(255, 255, 255, 0.04);
}

/* Masaüstü Popover Menü */
.bex-post-popover-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 220px;
    background: var(--wa-card-bg, var(--color-bg-light));
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));
    padding: 6px;
    z-index: 1000;
    animation: bexMenuFade 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.dark .bex-post-popover-menu {
    background: var(--wa-line);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
@keyframes bexMenuFade {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.bex-post-popover-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bex-post-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--wa-text, var(--color-bg-dark));
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
}
html.dark .bex-post-popover-item {
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}
.bex-post-popover-item:hover {
    background: var(--wa-hover, rgba(0, 0, 0, 0.05));
    color: var(--wa-green-deep, var(--wa-green-deep));
}
html.dark .bex-post-popover-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--wa-green-soft);
}
.bex-post-popover-item.is-danger {
    color: #ef4444;
}
.bex-post-popover-item.is-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
.bex-post-popover-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Mobil Alt Menü / Action Sheet */
.bex-post-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 26, 0.6);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: bexFadeIn 0.18s ease forwards;
}
.bex-post-sheet {
    width: 100%;
    max-width: 500px;
    background: var(--wa-surface, var(--color-bg-light));
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 16px));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    animation: bexSheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.dark .bex-post-sheet {
    background: var(--wa-line);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bex-post-sheet-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.bex-post-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--wa-text, var(--color-bg-dark));
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}
html.dark .bex-post-sheet-item {
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}
.bex-post-sheet-item:hover,
.bex-post-sheet-item:active {
    background: var(--wa-hover, rgba(0, 0, 0, 0.06));
}
html.dark .bex-post-sheet-item:hover,
html.dark .bex-post-sheet-item:active {
    background: rgba(255, 255, 255, 0.08);
}
.bex-post-sheet-item.is-danger {
    color: #ef4444;
}
.bex-post-sheet-item.is-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}
.bex-post-sheet-cancel {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));
    background: var(--wa-search, rgba(0, 0, 0, 0.04));
    color: var(--wa-text, var(--color-bg-dark));
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
html.dark .bex-post-sheet-cancel {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}

/* Düzenleme ve İstatistik Modalleri */
.bex-post-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 26, 0.65);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: bexFadeIn 0.18s ease forwards;
}
.bex-post-dialog-card {
    width: 100%;
    max-width: 480px;
    background: var(--wa-surface, var(--color-bg-light));
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));
    overflow: hidden;
    animation: bexModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.dark .bex-post-dialog-card {
    background: var(--wa-line);
    border-color: rgba(255, 255, 255, 0.12);
}
.bex-post-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--wa-line, rgba(0, 0, 0, 0.07));
}
html.dark .bex-post-dialog-header {
    border-color: rgba(255, 255, 255, 0.08);
}
.bex-post-dialog-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wa-text, var(--color-bg-dark));
}
html.dark .bex-post-dialog-title {
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}
.bex-post-dialog-body {
    padding: 16px 18px;
}
.bex-post-edit-textarea {
    width: 100%;
    height: 110px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.12));
    background: var(--wa-bg, var(--color-bg-light));
    color: var(--wa-text, var(--color-bg-dark));
    font-family: inherit;
    font-size: 13.5px;
    resize: none;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease;
}
.bex-post-edit-textarea:focus {
    border-color: var(--wa-green-deep, var(--wa-green-deep));
}
html.dark .bex-post-edit-textarea {
    background: var(--color-bg-dark);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}
.bex-post-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--wa-line, rgba(0, 0, 0, 0.07));
    background: var(--wa-search, rgba(0, 0, 0, 0.02));
}
html.dark .bex-post-dialog-footer {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.08);
}
.bex-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.bex-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border-radius: 14px;
    background: var(--wa-search, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.06));
}
html.dark .bex-stat-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.bex-stat-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--wa-green-deep, var(--wa-green-deep));
    line-height: 1.1;
    margin-top: 4px;
}
.bex-stat-lbl {
    font-size: 11.5px;
    color: var(--wa-muted, var(--wa-muted));
    margin-top: 2px;
}

/* ── Sohbete İlet (Forward to Chat) Modal Stilleri ── */
.bex-forward-modal-wrap .bex-comment-sheet {
    max-width: 440px !important;
}

html.dark #bex-forward-modal textarea#bex-forward-note {
    background: var(--bx-surface, #111B21) !important;
    color: var(--wa-text, var(--bx-text, #E9EDEF)) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #bex-forward-modal input#bex-forward-search-input {
    color: var(--wa-text, var(--bx-text, #E9EDEF)) !important;
}

html.dark #bex-forward-modal .bex-forward-row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark #bex-forward-modal .bex-forward-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BEXGRAM FEED MODERN SOCIAL SUITE (Screenshots 1-5 Standards)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Top Post Creator Box ("Ne düşünüyorsun, [İsim]?") */
.bex-feed-create-card {
    width: 100%;
    max-width: min(720px, 100%);
    background: var(--wa-surface, var(--color-bg-light));
    border: 1px solid var(--wa-line, rgba(0,0,0,0.08));
    border-radius: 16px;
    padding: 12px 14px 10px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    position: relative;
    z-index: 20;
    overflow: visible;
}
html.dark .bex-feed-create-card {
    background: var(--wa-surface, var(--color-bg-dark));
    border-color: rgba(255, 255, 255, 0.08);
}
.bex-feed-create-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wa-line, rgba(0,0,0,0.06));
    position: relative;
    z-index: 21;
}
html.dark .bex-feed-create-top {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.bex-feed-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.06);
}
html.dark .bex-feed-user-avatar {
    border-color: rgba(255,255,255,0.1);
}
.bex-feed-create-input-btn {
    flex: 1;
    background: var(--wa-search, var(--wa-search));
    color: var(--wa-muted, var(--wa-muted));
    border-radius: 20px;
    border: none;
    padding: 9px 14px;
    text-align: left;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    outline: none;
}
html.dark .bex-feed-create-input-btn {
    background: var(--wa-search, var(--wa-line));
    color: var(--wa-muted, var(--wa-muted));
}
.bex-feed-create-input-btn:hover {
    background: var(--wa-hover, #e4e6eb);
}
html.dark .bex-feed-create-input-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Audience Selector Pill & Dropdown */
.bex-feed-audience-wrap {
    position: relative;
    z-index: 22;
    flex-shrink: 0;
}
.bex-feed-audience-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 20px;
    background: var(--wa-search, var(--wa-search));
    border: 1px solid var(--wa-line, rgba(0,0,0,0.08));
    color: var(--wa-text, var(--color-bg-dark));
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    outline: none;
}
html.dark .bex-feed-audience-btn {
    background: var(--wa-search, var(--wa-line));
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--wa-text, var(--wa-line));
}
.bex-feed-audience-btn:hover {
    border-color: var(--wa-green-deep, var(--wa-green-deep));
}
.bex-feed-aud-icon {
    display: inline-flex;
    align-items: center;
    color: var(--wa-green-deep, var(--wa-green-deep));
}
.bex-feed-audience-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 80 !important;
    min-width: 140px;
    background: var(--wa-surface, var(--color-bg-light));
    border: 1px solid var(--wa-line, rgba(0,0,0,0.1));
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
html.dark .bex-feed-audience-menu {
    background: var(--wa-surface, var(--wa-line));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.bex-feed-aud-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--wa-text, var(--color-bg-dark));
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
}
html.dark .bex-feed-aud-opt {
    color: var(--wa-text, var(--wa-line));
}
.bex-feed-aud-opt:hover {
    background: var(--wa-hover, rgba(0,0,0,0.04));
}
html.dark .bex-feed-aud-opt:hover {
    background: rgba(255,255,255,0.06);
}
.bex-feed-aud-opt.is-selected {
    color: var(--wa-green-deep, var(--wa-green-deep));
    background: rgba(0, 168, 132, 0.08);
}

.bex-feed-create-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    width: 100%;
}
.bex-feed-quick-act {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid var(--wa-line, rgba(0,0,0,0.06));
    background: var(--wa-surface, var(--color-bg-light));
    cursor: pointer;
    transition: all 0.15s;
    outline: none;
    min-width: 0;
    width: 100%;
}
.bex-feed-quick-act:hover {
    background: var(--wa-hover, rgba(0,0,0,0.04));
    border-color: var(--wa-green-deep, var(--wa-green-deep));
}
html.dark .bex-feed-quick-act {
    background: var(--wa-surface, var(--color-bg-dark));
    border-color: rgba(255,255,255,0.08);
}
html.dark .bex-feed-quick-act:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--wa-green-deep, var(--wa-green-deep));
}
.bex-act-label {
    font-weight: 700;
    font-size: 12px;
    color: var(--wa-text, var(--color-bg-dark));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark .bex-act-label {
    color: var(--wa-text, var(--wa-line));
}
@media (max-width: 480px) {
    .bex-act-label {
        font-size: 11px;
    }
    .bex-feed-quick-act {
        padding: 7px 4px;
        gap: 4px;
    }
}
.bex-feed-create-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 20px;
    background: var(--wa-green-deep, var(--wa-green-deep));
    color: var(--color-bg-light);
    font-weight: 700;
    font-size: 12.5px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 1px 3px rgba(0, 168, 132, 0.25);
}
.bex-feed-create-submit-btn:hover {
    opacity: 0.92;
}
.bex-feed-create-submit-btn:active {
    transform: scale(0.97);
}

/* 2. Stories Tray Carousel (Screenshot 1) */
.bex-stories-tray-container {
    position: relative;
    margin-bottom: 14px;
    width: 100%;
}
.bex-stories-track {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.bex-stories-track::-webkit-scrollbar {
    display: none;
}
.bex-story-card {
    position: relative;
    width: 110px;
    min-width: 110px;
    height: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
}
.bex-story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.bex-story-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.bex-story-card:hover .bex-story-card-bg {
    transform: scale(1.04);
}

/* Story Card 1: Hikaye Oluştur */
.bex-story-create-card {
    background: var(--wa-surface, var(--color-bg-light));
    display: flex;
    flex-direction: column;
}
html.dark .bex-story-create-card {
    background: #242526;
}
.bex-story-create-card .bex-story-card-bg {
    height: 135px;
    position: relative;
    inset: auto;
}
.bex-story-create-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: var(--wa-surface, var(--color-bg-light));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8px;
    z-index: 2;
}
html.dark .bex-story-create-footer {
    background: #242526;
}
.bex-story-plus-btn {
    position: absolute;
    top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1877f2;
    border: 3px solid var(--wa-surface, var(--color-bg-light));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    color: #fff;
}
html.dark .bex-story-plus-btn {
    border-color: #242526;
}
.bex-story-create-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--wa-text, #050505);
    text-align: center;
    line-height: 1.2;
}
html.dark .bex-story-create-lbl {
    color: #e4e6eb;
}

/* User Story Cards */
.bex-story-avatar-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3.5px solid #1877f2;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.bex-story-avatar-badge.is-viewed {
    border-color: #8c939d;
}
.bex-story-avatar-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bex-story-author-name {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-bg-light);
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    line-height: 1.2;
}
.bex-story-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 40%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
}
.bex-story-create-card::after {
    display: none;
}

.bex-stories-scroll-btn {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wa-surface, var(--color-bg-light));
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: var(--wa-text, #050505);
    transition: transform 0.15s;
}
html.dark .bex-stories-scroll-btn {
    background: #3a3b3c;
    border-color: rgba(255,255,255,0.1);
    color: #e4e6eb;
}
.bex-stories-scroll-btn:hover {
    transform: translateY(-50%) scale(1.08);
}

/* 3. Text on Decorative Background Canvas (Auto-Scaling & Overflow Protected) */
.bex-post-canvas {
    width: 100%;
    min-height: 180px;
    height: auto !important;
    max-height: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 22px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden !important;
    border-radius: 16px;
    margin: 4px 0 10px 0;
    user-select: text;
    transition: min-height 0.2s ease, padding 0.2s ease;
}
.bex-post-canvas-text {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    line-height: 1.4;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Metin uzunluguna gore dinamik tipografi kademeleri */
.bex-post-canvas.canvas-short .bex-post-canvas-text {
    font-size: 25px;
    line-height: 1.35;
    text-align: center;
}
.bex-post-canvas.canvas-medium .bex-post-canvas-text {
    font-size: 19px;
    line-height: 1.42;
    text-align: center;
}
.bex-post-canvas.canvas-long {
    align-items: flex-start;
    padding: 24px 20px;
}
.bex-post-canvas.canvas-long .bex-post-canvas-text {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.bex-post-canvas.canvas-xlarge {
    align-items: flex-start;
    padding: 22px 18px;
}
.bex-post-canvas.canvas-xlarge .bex-post-canvas-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.58;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
}

@media (max-width: 640px) {
    .bex-post-canvas {
        min-height: 160px;
        padding: 20px 14px;
        border-radius: 14px;
    }
    .bex-post-canvas.canvas-short .bex-post-canvas-text {
        font-size: 20px;
    }
    .bex-post-canvas.canvas-medium .bex-post-canvas-text {
        font-size: 16.5px;
    }
    .bex-post-canvas.canvas-long .bex-post-canvas-text {
        font-size: 14.5px;
    }
    .bex-post-canvas.canvas-xlarge .bex-post-canvas-text {
        font-size: 13.5px;
        line-height: 1.52;
    }
}

/* 4. Reactions & Comments Stats Row */
.bex-post-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px 0;
    font-size: 13.5px;
    color: var(--wa-text, var(--color-bg-dark));
    user-select: none;
}
html.dark .bex-post-stats-row {
    color: var(--wa-text, var(--wa-line));
}
.bex-stats-reactions-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bex-post-likes-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}
.bex-likes-bold-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wa-text, var(--color-bg-dark));
}
html.dark .bex-likes-bold-text {
    color: var(--wa-text, var(--wa-line));
}
.bex-post-likes-badge:hover .bex-likes-bold-text {
    text-decoration: underline;
}
.bex-post-likes-badge.is-hidden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--wa-search, rgba(0,0,0,0.04));
    font-size: 12px;
    font-weight: 500;
    color: var(--wa-muted, var(--wa-muted));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
html.dark .bex-post-likes-badge.is-hidden {
    background: rgba(255,255,255,0.06);
    color: var(--wa-muted, var(--wa-muted));
}
.bex-post-likes-badge.is-hidden:hover {
    background: var(--wa-hover, rgba(0,0,0,0.08));
    color: var(--wa-text, var(--color-bg-dark));
}
.bex-reaction-icons-stack {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
}
.bex-react-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 1.5px solid var(--wa-surface, var(--color-bg-light));
    margin-right: -4px;
}
html.dark .bex-react-badge {
    border-color: var(--wa-surface, #242526);
}
.bex-react-blue { background: #1877f2; color: #fff; }
.bex-react-red { background: #fa383e; color: #fff; }

.bex-hide-likes-quick-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--wa-muted, var(--wa-muted));
    opacity: 0.6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, background 0.15s;
}
.bex-hide-likes-quick-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}
html.dark .bex-hide-likes-quick-btn:hover {
    background: rgba(255,255,255,0.1);
}

.bex-post-comments-count-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.bex-post-comments-count-btn:hover {
    text-decoration: underline;
}


/* Reaction Popover (Hover / Long-press on Beğen) */
.bex-reactions-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--wa-surface, var(--color-bg-light));
    padding: 6px 10px;
    border-radius: 30px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    border: 1px solid rgba(0,0,0,0.08);
    animation: bex-popover-in 0.18s ease;
}
html.dark .bex-reactions-popover {
    background: #242526;
    border-color: rgba(255,255,255,0.1);
}
@keyframes bex-popover-in {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.bex-popover-emoji {
    font-size: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.15s;
    line-height: 1;
}
.bex-popover-emoji:hover {
    transform: scale(1.35) translateY(-4px);
}
/* ═════════════════════════════════════════════════════════════════════
   BEXGRAM DEKORATİF ARKA PLAN VE ŞEFFAF EMOJİLİ KANVAS STİLLERİ
   ═════════════════════════════════════════════════════════════════════ */
.bex-bg-none { background: #e4e6eb !important; }

/* 1. Şeffaf Emojili Arka Planlar */
.bex-bg-hearts {
    background-color: #e11d48 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%E2%9D%A4%EF%B8%8F%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%92%96%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%92%95%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #e11d48 0%, #ff1493 50%, #ff4d6d 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-fire {
    background-color: #dc2626 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%94%A5%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%E2%9A%A1%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%92%A5%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #f59e0b 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-stars {
    background-color: #3730a3 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%E2%9C%A8%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%8C%9F%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%92%AB%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #3730a3 0%, #6366f1 50%, #a855f7 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-party {
    background-color: #0284c7 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%8E%89%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%A5%B3%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8E%88%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #0284c7 0%, #6366f1 50%, #ec4899 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-coffee {
    background-color: #582f0e !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%E2%98%95%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%A5%90%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8D%A9%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #582f0e 0%, #7f4f24 50%, #936639 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-space {
    background-color: #090d16 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%9A%80%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%AA%90%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8C%8C%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #090d16 0%, #1e1b4b 50%, #312e81 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-music {
    background-color: #0891b2 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%8E%B5%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%8E%B6%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8E%A7%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #0891b2 0%, #4f46e5 50%, #9333ea 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-blossom {
    background-color: #f43f5e !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%8C%B8%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%8C%BA%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8C%B7%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #fb7185 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-lucky {
    background-color: #047857 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%8D%80%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%8C%BF%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8D%83%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-food {
    background-color: #ea580c !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%8D%95%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%8D%94%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8D%9F%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #ea580c 0%, #d97706 50%, #f59e0b 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-chat {
    background-color: var(--color-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%92%AC%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%92%AD%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%93%B1%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, var(--color-primary) 0%, var(--wa-green-deep) 50%, #059669 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}
.bex-bg-crown {
    background-color: #a16207 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Ctext%20x%3D%2715%27%20y%3D%2740%27%20font-size%3D%2728%27%20opacity%3D%270.25%27%3E%F0%9F%91%91%3C%2Ftext%3E%3Ctext%20x%3D%2770%27%20y%3D%2765%27%20font-size%3D%2724%27%20opacity%3D%270.20%27%3E%F0%9F%92%8E%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27105%27%20font-size%3D%2726%27%20opacity%3D%270.22%27%3E%F0%9F%8F%86%3C%2Ftext%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #a16207 0%, #ca8a04 50%, #eab308 100%) !important;
    background-repeat: repeat;
    color: #fff !important;
}

/* 2. Doygun Canlı Renkler & Gradyanlar ("Tam Renk") */
.bex-bg-magenta { background: linear-gradient(135deg, #d946ef 0%, #ec4899 50%, #f43f5e 100%) !important; color: #fff !important; }
.bex-bg-sunset { background: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #facc15 100%) !important; color: #fff !important; }
.bex-bg-ocean { background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #06b6d4 100%) !important; color: #fff !important; }
.bex-bg-emerald { background: linear-gradient(135deg, #047857 0%, #10b981 50%, #34d399 100%) !important; color: #fff !important; }
.bex-bg-purple { background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #c084fc 100%) !important; color: #fff !important; }
.bex-bg-cyber { background: linear-gradient(135deg, #0284c7 0%, #6366f1 50%, #9333ea 100%) !important; color: #fff !important; }
.bex-bg-candy { background: linear-gradient(135deg, #db2777 0%, #ec4899 50%, #f472b6 100%) !important; color: #fff !important; }
.bex-bg-sunshine { background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%) !important; color: #fff !important; }
.bex-bg-dark { background: linear-gradient(135deg, #0b0f19 0%, #182234 50%, #0f172a 100%) !important; color: #fff !important; }
.bex-bg-aurora { background: linear-gradient(135deg, #059669 0%, #0284c7 50%, #7c3aed 100%) !important; color: #fff !important; }
.bex-bg-retro { background: linear-gradient(135deg, #d97706 0%, #db2777 50%, #7c3aed 100%) !important; color: #fff !important; }
.bex-bg-slate { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; color: #fff !important; }
.bex-bg-midnight { background: linear-gradient(135deg, #0b1329 0%, #172554 100%) !important; color: #fff !important; }

/* ─────────────────────────────────────────────────────────────
   10. INTERACTIVE POLL COMPONENT (Akış & Gönderi Anketleri)
   ───────────────────────────────────────────────────────────── */
.bex-post-poll-box {
    margin: 10px 14px 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--wa-surface-subtle, rgba(0, 0, 0, 0.025));
    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
html.dark .bex-post-poll-box {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}
.bex-post-poll-box.is-loading {
    opacity: 0.65;
    pointer-events: none;
}
.bex-post-poll-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.bex-post-poll-icon {
    font-size: 16px;
    line-height: 1;
}
.bex-post-poll-question {
    font-size: 14px;
    font-weight: 700;
    color: var(--wa-text, var(--color-bg-dark));
    line-height: 1.35;
}
html.dark .bex-post-poll-question {
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}
.bex-post-poll-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bex-post-poll-option {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--wa-surface, var(--color-bg-light));
    border: 1.5px solid var(--wa-line, rgba(0, 0, 0, 0.09));
    color: var(--wa-text, var(--color-bg-dark));
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
html.dark .bex-post-poll-option {
    background: var(--bx-surface, #111B21);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--wa-text, var(--bx-text, #E9EDEF));
}
.bex-post-poll-option:hover {
    border-color: var(--bex-primary, var(--color-primary));
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.12);
}
.bex-post-poll-option:active {
    transform: scale(0.99);
}
.bex-post-poll-option.is-selected {
    border-color: var(--bex-primary, var(--color-primary));
    background: rgba(0, 168, 132, 0.05);
}
html.dark .bex-post-poll-option.is-selected {
    background: rgba(0, 168, 132, 0.12);
    border-color: var(--bex-primary, var(--color-primary));
}
.bex-post-poll-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 168, 132, 0.16);
    pointer-events: none;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    z-index: 1;
}
.bex-post-poll-option.is-selected .bex-post-poll-bar {
    background: rgba(0, 168, 132, 0.26);
}
html.dark .bex-post-poll-bar {
    background: rgba(0, 168, 132, 0.22);
}
html.dark .bex-post-poll-option.is-selected .bex-post-poll-bar {
    background: rgba(0, 168, 132, 0.35);
}
.bex-post-poll-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bex-post-poll-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--wa-muted, var(--wa-muted));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.18s ease;
}
.bex-post-poll-option:hover .bex-post-poll-radio {
    border-color: var(--bex-primary, var(--color-primary));
}
.bex-post-poll-option.is-selected .bex-post-poll-radio {
    border-color: var(--bex-primary, var(--color-primary));
    background: var(--bex-primary, var(--color-primary));
}
.bex-post-poll-radio .bex-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bg-light);
    display: block;
}
.bex-post-poll-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    line-height: 1.35;
}
.bex-post-poll-pct {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bex-primary, var(--color-primary));
    margin-left: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bex-post-poll-vcount {
    font-size: 11px;
    font-weight: 500;
    color: var(--wa-muted, var(--wa-muted));
}
.bex-post-poll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--wa-muted, var(--wa-muted));
    padding: 0 2px;
}
.bex-poll-voted-badge {
color: var(--bex-primary, var(--color-primary));
font-weight: 700;
}

/* Üye kabuğu: whatsapp-clone.css 246–258 height:100% / overflow kilitlerini ezer.
   Kaydırma kabuğu .bex-user-container ve pencere; akış kesilmez.
   #kesfet-desktop-sidebar sayfada yok; kuralı yalnızca o id varken etkiler. */
body.bex-user-page.bex-wa.page-explore > main,
body.bex-user-page.bex-wa.page-explore main {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
flex: none !important;
min-width: 0;
}
body.bex-user-page.bex-wa.page-explore > main > #kesfet-main-section,
body.bex-user-page.bex-wa.page-explore #kesfet-main-section {
display: flex !important;
flex-direction: column;
flex: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
min-width: 0;
max-width: 100%;
}
body.bex-user-page.page-explore .bex-explore-shortcuts {
display: grid;
gap: 6px;
width: 100%;
max-width: min(680px, 100%);
margin: 12px auto 0;
padding: 12px;
box-sizing: border-box;
min-width: 0;
background: var(--wa-surface, #fff);
color: var(--wa-text, var(--color-bg-dark));
border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));
border-radius: 16px;
}
body.bex-user-page.page-explore .bex-explore-shortcuts button,
body.bex-user-page.page-explore .bex-explore-shortcuts a {
min-height: 44px;
box-sizing: border-box;
}


/* ── Bexgram Gönderi Kullanıcı Etiketleri (Post Tags) ── */
.bex-post-media-wrap {
    position: relative;
}

.bex-post-tag-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(17, 27, 33, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}

.bex-post-tag-btn:hover {
    background: rgba(17, 27, 33, 0.95);
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.bex-post-tag-btn:active {
    transform: scale(0.92);
}

.bex-post-tag-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--bex-primary, var(--color-primary));
    color: var(--color-bg-light);
    font-size: 10px;
    font-weight: 700;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-bg-light);
}

.bex-post-tags-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 12px;
    animation: bexTagOverlayIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bexTagOverlayIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.bex-post-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 90%;
}

.bex-post-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(17, 27, 33, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-bg-light) !important;
    padding: 6px 13px 6px 6px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.bex-post-tag-pill:hover {
    background: var(--bex-primary, var(--color-primary));
    transform: translateY(-2px) scale(1.04);
    color: var(--color-bg-light) !important;
}

.bex-post-tag-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: block;
}

.bex-post-tag-username {
    font-size: 13px;
    letter-spacing: -0.01em;
}
/* Preserve authored comment lines and keep unbroken links inside narrow cards. */
.bex-comment-body,
.bex-post-comment-content {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bex-comment-text-display {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ==========================================================================
   BEXGRAM META-STYLE STORIES TRAY & DOUBLE-TAP TO LIKE (2026 REFRESH)
   ========================================================================== */

.bex-stories-tray {
    width: 100%;
    padding: 12px 14px 10px;
    background: var(--wa-surface, #ffffff);
    border-bottom: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08));
    margin-bottom: 12px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

html.dark .bex-stories-tray {
    background: var(--wa-surface, var(--bx-surface, #111b21));
    border-bottom-color: var(--wa-line, rgba(255, 255, 255, 0.08));
}

.bex-stories-scroll-container {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.bex-stories-scroll-container::-webkit-scrollbar {
    display: none;
}

.bex-story-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    touch-manipulation: manipulation;
    text-align: center;
    outline: none;
}

.bex-story-ring-wrap {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    padding: 2.5px;
    position: relative;
    box-sizing: border-box;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.bex-story-chip:active .bex-story-ring-wrap {
    transform: scale(0.92);
}

/* Instagram Neon Gradient Ring for Unread Stories */
.bex-story-ring-wrap.is-unseen {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 4px 14px rgba(220, 39, 67, 0.28);
}

/* Muted Grey Ring for Already Viewed Stories */
.bex-story-ring-wrap.is-seen {
    background: var(--wa-line, rgba(148, 163, 184, 0.4));
}

/* Empty Ring for Own Avatar */
.bex-story-ring-wrap.is-empty {
    background: transparent;
}

/* Prompt Ring for Quick Create */
.bex-story-ring-wrap.is-prompt {
    background: linear-gradient(135deg, #00a884 0%, #0284c7 100%);
}

.bex-story-avatar-box {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2.5px solid var(--wa-surface, #ffffff);
    overflow: hidden;
    background: var(--wa-bg, #f0f2f5);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark .bex-story-avatar-box {
    border-color: var(--wa-surface, #111b21);
    background: var(--wa-bg, var(--bx-surface-2, #202c33));
}

.bex-story-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.bex-story-prompt-box {
    color: #ffffff;
    background: linear-gradient(135deg, #00a884 0%, #0284c7 100%);
}

/* Blue Plus Badge on Own Story */
.bex-story-plus-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0095f6;
    color: #ffffff;
    border: 2px solid var(--wa-surface, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 149, 246, 0.45);
    pointer-events: none;
}

html.dark .bex-story-plus-badge {
    border-color: var(--wa-surface, #111b21);
}

.bex-story-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wa-text, #111b21);
    max-width: 68px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

html.dark .bex-story-label {
    color: var(--wa-text, var(--bx-text, #e9edef));
}

/* ==========================================================================
   DOUBLE-TAP TO LIKE HEART BURST (INSTAGRAM TIER)
   ========================================================================== */

.bex-double-tap-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 90px;
    height: 90px;
    pointer-events: none;
    z-index: 50;
    animation: bexHeartPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    filter: drop-shadow(0 6px 20px rgba(239, 68, 68, 0.55));
}

.bex-double-tap-heart svg {
    width: 100%;
    height: 100%;
    fill: #ef4444;
}

@keyframes bexHeartPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    18% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: 1;
    }
    35% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    75% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.65) translateY(-24px);
        opacity: 0;
    }
}

/* Mikro-Yaylanma Aksiyon Butonları */
.bex-post-action-btn,
.bex-action-btn-heart,
.bex-action-btn-comment,
.bex-action-btn-share,
.bex-action-btn-bookmark {
    transition: transform 0.16s ease, color 0.16s ease !important;
}

.bex-post-action-btn:active,
.bex-action-btn-heart:active,
.bex-action-btn-comment:active,
.bex-action-btn-share:active,
.bex-action-btn-bookmark:active {
    transform: scale(0.85) !important;
}

/* Akıllı Kart Cam Kenarlığı */
.bex-post-card,
.bex-feed-item {
    border-radius: 20px !important;
    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;
    background: var(--wa-surface, #ffffff) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden;
    margin-bottom: 16px !important;
}

html.dark .bex-post-card,
html.dark .bex-feed-item {
    background: var(--wa-surface, var(--bx-surface, #111b21)) !important;
    border-color: var(--wa-line, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Yorumlardaki bağlantı, @kullanıcı ve #etiketler */
.bex-comment-link, .bex-comment-mention, .bex-comment-tag { color: var(--wa-green-deep, #00a884); text-decoration: none; font-weight: 600; }
.bex-comment-link { overflow-wrap: anywhere; }
.bex-comment-link:hover, .bex-comment-mention:hover, .bex-comment-tag:hover { text-decoration: underline; }

/* Devamını Oku / Daha Az Göster Butonları (İçeriğin Sağ Altına Konumlandırma) */
.bex-expandable-text-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.bex-text-short,
.bex-text-full {
    position: relative;
    display: block;
    width: 100%;
}
.bex-read-more-pos {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 6px !important;
    text-align: right !important;
}
.bex-read-more-btn,
.bex-read-less-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 3px 12px !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--bex-primary, #00a884) !important;
    background: rgba(0, 168, 132, 0.12) !important;
    border: 1px solid rgba(0, 168, 132, 0.35) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.15s ease !important;
}
.bex-read-more-btn:hover,
.bex-read-less-btn:hover {
    background: var(--bex-primary, #00a884) !important;
    color: #ffffff !important;
    transform: scale(1.03) !important;
}
html.dark .bex-read-more-btn,
html.dark .bex-read-less-btn {
    background: rgba(37, 211, 102, 0.18) !important;
    border-color: rgba(37, 211, 102, 0.4) !important;
    color: #25d366 !important;
}
html.dark .bex-read-more-btn:hover,
html.dark .bex-read-less-btn:hover {
    background: #25d366 !important;
    color: #0b141a !important;
}

/* Canvas (Renkli Arka Plan) İçi Sağ Alt Devamını Oku Butonu */
.bex-post-canvas {
    position: relative !important;
    padding-bottom: 52px !important;
}
.bex-post-canvas .bex-post-canvas-text,
.bex-post-canvas .bex-expandable-text-wrap,
.bex-post-canvas .bex-text-short,
.bex-post-canvas .bex-text-full {
    position: static !important;
}
.bex-post-canvas .bex-read-more-pos {
    position: absolute !important;
    right: 14px !important;
    bottom: 12px !important;
    margin: 0 !important;
    width: auto !important;
    z-index: 10 !important;
}
.bex-read-more-canvas-btn,
.bex-read-less-canvas-btn {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.15s ease !important;
}
.bex-read-more-canvas-btn:hover,
.bex-read-less-canvas-btn:hover {
    background: rgba(0, 0, 0, 0.85) !important;
    transform: scale(1.04) !important;
}

/* ─────────────────────────────────────────────────────────────
   Bexgram Modern Visual Link Card (WhatsApp / X / Social Standard)
   ───────────────────────────────────────────────────────────── */
.bex-post-link-card-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: transparent;
}
.bex-post-link-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--wa-card-bg, #ffffff);
    border: 1px solid var(--wa-border, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    margin: 6px 12px 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
html.dark .bex-post-link-card {
    background: #182229;
    border-color: rgba(255, 255, 255, 0.08);
}
.bex-post-link-card:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 168, 132, 0.35);
}
html.dark .bex-post-link-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border-color: rgba(0, 168, 132, 0.45);
}
.bex-link-card-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 340px;
    background: #0f171d;
    overflow: hidden;
}
.bex-link-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.bex-post-link-card:hover .bex-link-card-thumb {
    transform: scale(1.02);
}
.bex-link-card-domain-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(11, 20, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #e9edef;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.bex-link-card-favicon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: contain;
}
/* Modern Translucent "Bağlantıya git" Action Button */
.bex-link-go-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(11, 20, 26, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.22s ease;
    user-select: none;
    -webkit-user-select: none;
}
.bex-link-go-btn:hover {
    background: rgba(0, 168, 132, 0.88);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    color: #ffffff !important;
}
.bex-link-go-btn svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.5;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.bex-link-go-btn:hover svg {
    transform: translate(1px, -1px);
}
.bex-link-card-info {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bex-link-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wa-text, #111b21);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html.dark .bex-link-card-title {
    color: #e9edef;
}
.bex-link-card-desc {
    font-size: 13px;
    line-height: 1.45;
    color: #667781;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html.dark .bex-link-card-desc {
    color: #8696a0;
}
.bex-link-card-footer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #00a884;
}
@media (max-width: 640px) {
    .bex-post-link-card {
        margin: 4px 8px 8px;
        border-radius: 12px;
    }
    .bex-link-card-thumb-wrap {
        max-height: 240px;
    }
    .bex-link-card-info {
        padding: 10px 12px 12px;
    }
    .bex-link-card-title {
        font-size: 14px;
    }
    .bex-link-card-desc {
        font-size: 12.5px;
    }
}

/* Responsive Video Embeds for Posts (YouTube, Vimeo, HTML5 Video) */
.bex-post-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 520px;
    background: #000000;
    overflow: hidden;
    border-radius: 12px;
    margin: 4px 0 8px;
}
.bex-post-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =====================================================================
   FACEBOOK STYLE FEED CARD ENHANCEMENTS (kesfet.php)
   ===================================================================== */
.fb-post-caption-top {
    font-size: 14.5px;
    line-height: 1.48;
    color: var(--wa-text, #e9edef);
    word-break: break-word;
    white-space: pre-line;
}

.fb-globe-icon {
    font-size: 12px;
    color: var(--wa-muted, #8696a0);
    opacity: 0.85;
}

/* Facebook Stats Row (Reactions & Comments/Shares) */
.fb-stats-row {
    padding: 8px 14px 6px;
    font-size: 12.5px;
    color: var(--wa-muted, #8696a0);
    border-bottom: 1px solid var(--wa-border, rgba(255, 255, 255, 0.06));
}

.fb-reaction-stack {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.fb-icon-bubble {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--wa-card-bg, #1f2c34);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.fb-like-bubble {
    background: #1877f2;
    z-index: 2;
}

.fb-heart-bubble {
    background: #f02849;
    z-index: 1;
}

.fb-stats-meta-item {
    cursor: pointer;
    transition: color 0.15s ease;
}

.fb-stats-meta-item:hover {
    text-decoration: underline;
    color: var(--wa-text, #e9edef);
}

/* Facebook 4-Action Button Bar */
.fb-action-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--wa-border, rgba(255, 255, 255, 0.07));
    border-bottom: 1px solid var(--wa-border, rgba(255, 255, 255, 0.07));
    padding: 3px 6px;
    margin: 4px 0 6px;
}

.fb-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wa-muted, #8696a0);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    user-select: none;
}

.fb-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--wa-text, #e9edef);
}

.fb-action-btn:active {
    transform: scale(0.97);
}

.fb-action-btn.is-liked {
    color: #1877f2 !important;
}

.fb-action-btn.is-liked svg {
    fill: #1877f2;
}

.fb-action-btn.bex-post-gift-btn {
    color: #f59e0b !important;
}

.fb-action-btn.bex-post-gift-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24 !important;
}

@media (max-width: 480px) {
    .fb-action-btn {
        gap: 4px;
        font-size: 12px;
        padding: 7px 2px;
    }
    .fb-btn-label {
        font-size: 11.5px;
    }
}

/* Facebook Capsule Comment Input Box */
.fb-comment-capsule-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 10px;
}

.fb-comment-form {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    background: var(--wa-input-bg, rgba(255, 255, 255, 0.06));
    border-radius: 20px;
    border: 1px solid var(--wa-border, rgba(255, 255, 255, 0.08));
    transition: border-color 0.2s ease, background 0.2s ease;
}

.fb-comment-form:focus-within {
    border-color: var(--wa-green-deep, #00a884);
    background: var(--wa-input-focus-bg, rgba(255, 255, 255, 0.09));
}

.fb-capsule-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 8px 36px 8px 14px !important;
    font-size: 13px !important;
    color: var(--wa-text, #e9edef) !important;
    border-radius: 20px !important;
}

.fb-capsule-input::placeholder {
    color: var(--wa-muted, #8696a0);
    opacity: 0.8;
}

.fb-comment-send-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--wa-green-deep, #00a884);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.fb-comment-send-btn:hover {
    transform: translateY(-50%) scale(1.15);
}

.fb-comment-send-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Kompakt Görselsiz Bağlantı Önizleme Kartı & Tıklanabilir Linkler */
.bex-compact-link-card {
    border-radius: 12px;
    background: #f0f2f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    display: block;
    text-decoration: none !important;
}
html.dark .bex-compact-link-card {
    background: #202c33;
    border-color: rgba(255, 255, 255, 0.08);
}
.bex-compact-link-card:hover {
    border-color: var(--bex-primary, #00a884);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.bex-inline-link {
    color: var(--bex-primary, #00a884) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    word-break: break-all;
    font-weight: 500;
}
.bex-inline-link:hover {
    opacity: 0.85;
}