/* ===== SOSYALLES PAGE - Facebook Style ===== */

/* Page background */
.sosyal-page-wrap {
    background: #f0f2f5;
    min-height: 100vh;
    padding-bottom: 40px;
}

/* Hero - Facebook-style compact header */
.sosyal-hero {
    text-align: center;
    padding: 28px 20px 20px;
    background: #fff;
    border-radius: 0 0 12px 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border-bottom: 1px solid #dddfe2;
}
.sosyal-hero .sosyal-icon-wrap {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
    background: linear-gradient(135deg, #1877f2, #42b72a);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
}
.sosyal-hero h1 {
    font-size: 24px; font-weight: 800; color: #1c1e21; margin-bottom: 4px;
}
.sosyal-hero p {
    font-size: 14px; color: #65676b; margin: 0; max-width: 400px; margin-inline: auto;
}

/* Tabs - Facebook style */
.sosyal-tabs {
    display: flex; gap: 0;
    background: #fff;
    border-bottom: 1px solid #dddfe2;
    margin-bottom: 16px;
    padding: 0 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.sosyal-tab {
    flex: 1; padding: 14px 0; text-align: center; font-weight: 600; font-size: 15px;
    color: #65676b; cursor: pointer; border-bottom: 3px solid transparent;
    transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none;
    border-radius: 8px; margin: 4px;
}
.sosyal-tab:hover { background: #f0f2f5; color: #1877f2; border-bottom-color: transparent; border-radius: 8px; }
.sosyal-tab.active {
    color: #1877f2; border-bottom-color: #1877f2;
    background: transparent; border-radius: 0; margin: 0 4px;
}
.sosyal-tab i { margin-right: 6px; }
.sosyal-tab-content { display: none; }
.sosyal-tab-content.active { display: block; }

/* Create Post Card - Facebook "What's on your mind?" */
.sosyal-create-card {
    background: #fff; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-bottom: 16px;
    border: none; overflow: hidden;
    transition: box-shadow 0.3s;
}
.sosyal-create-card.expanded {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-color: transparent;
}

/* Trigger bar - Facebook style */
.sosyal-create-trigger {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    cursor: pointer; transition: background 0.2s; user-select: none;
}
.sosyal-create-trigger:hover { background: #f0f2f5; }
.sosyal-create-trigger span {
    flex: 1; font-size: 17px; color: #65676b;
    background: #f0f2f5; border-radius: 20px; padding: 8px 16px;
}
.sosyal-trigger-arrow {
    color: #65676b; font-size: 13px;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.sosyal-create-card.expanded .sosyal-trigger-arrow {
    transform: rotate(180deg);
}

/* Collapsible body (forum) */
.sosyal-create-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
    padding: 0 16px;
}
.sosyal-create-card.expanded .sosyal-create-body {
    padding: 0 16px 16px;
}

/* Post trigger bar */
.sosyal-post-trigger-bar { cursor: pointer; }
.sosyal-post-trigger-bar:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Divider between trigger and actions */
.sosyal-create-card .sosyal-create-trigger + .sosyal-create-actions-row {
    border-top: 1px solid #e4e6eb; padding: 8px 16px;
    display: flex; justify-content: space-around;
}

/* Modal overlay */
.sosyal-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 20px;
}
.sosyal-modal-overlay.active { opacity: 1; visibility: visible; }

/* Modal - Facebook style */
.sosyal-modal {
    background: #fff; border-radius: 8px; width: 100%; max-width: 500px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(30px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    max-height: 90vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.sosyal-modal::-webkit-scrollbar { width: 5px; }
.sosyal-modal::-webkit-scrollbar-track { background: transparent; }
.sosyal-modal::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.sosyal-modal::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
.sosyal-modal-overlay.active .sosyal-modal {
    transform: translateY(0) scale(1);
}
.sosyal-modal-header {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 20px; border-bottom: 1px solid #e4e6eb;
    position: relative;
}
.sosyal-modal-header h3 {
    font-size: 20px; font-weight: 700; color: #1c1e21; margin: 0;
}
.sosyal-modal-close {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: #e4e6eb; color: #606770; font-size: 20px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; line-height: 1;
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
}
.sosyal-modal-close:hover { background: #d8dadf; }
.sosyal-modal-body { padding: 16px; }

/* Modal textarea layout */
.sosyal-modal-textarea-wrap {
    display: flex; gap: 12px; align-items: flex-start;
}
.sosyal-modal-textarea-inner { flex: 1; }
.sosyal-modal-user-name {
    font-size: 15px; font-weight: 600; color: #1c1e21; margin-bottom: 8px;
}
.sosyal-modal-body textarea {
    width: 100%; border: none; padding: 0; font-size: 15px; resize: none;
    min-height: 120px; font-family: inherit; color: #1c1e21;
    line-height: 1.5; background: transparent;
}
.sosyal-modal-body textarea:focus { outline: none; }
.sosyal-modal-body textarea::placeholder { color: #65676b; font-size: 14px; }
.sosyal-modal-divider {
    height: 1px; background: #e4e6eb; margin: 12px 0;
}
.sosyal-create-card textarea {
    width: 100%; border: 1px solid #e4e6eb; border-radius: 8px; padding: 12px;
    font-size: 14px; resize: vertical; min-height: 80px; font-family: inherit;
    transition: border-color 0.2s; color: #1c1e21;
}
.sosyal-create-card textarea:focus { outline: none; border-color: #1877f2; }
.sosyal-create-actions {
    display: flex; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap;
    border: 1px solid #e4e6eb; border-radius: 8px; padding: 10px 12px;
}
.sosyal-create-actions .btn-attach {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: transparent; border: none; border-radius: 6px;
    font-size: 13px; color: #65676b; cursor: pointer; transition: all 0.2s;
}
.sosyal-create-actions .btn-attach:hover { background: #f0f2f5; }
.sosyal-create-actions .btn-attach i { color: #45bd62; font-size: 20px; }
.sosyal-btn-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 24px;
    background: #1877f2; color: #fff;
    border: none; border-radius: 6px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; margin-left: auto;
}
.sosyal-btn-submit:hover { background: #166fe5; }

/* Location tag input */
.sosyal-location-input {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: transparent; border: none; border-radius: 6px;
    font-size: 13px; color: #65676b;
}
.sosyal-location-input:hover { background: #f0f2f5; }
.sosyal-location-input input {
    border: none; background: none; font-size: 13px; width: 120px; color: #1c1e21;
    outline: none;
}
.sosyal-location-input i { color: #f5533d; font-size: 20px; }

/* Image preview */
.sosyal-img-preview {
    margin-top: 10px; position: relative; display: inline-block;
}
.sosyal-img-preview img {
    max-height: 120px; border-radius: 8px; border: 1px solid #e4e6eb;
}
.sosyal-img-preview .remove-preview {
    position: absolute; top: -6px; right: -6px; width: 24px; height: 24px;
    background: #1c1e21; color: #fff; border: 2px solid #fff; border-radius: 50%;
    font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* Avatar - Facebook style */
.sosyal-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #1877f2, #42b72a);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0;
}

/* Post Card - Facebook style */
.sosyal-post {
    background: #fff; border-radius: 8px; padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-bottom: 16px;
    border: none;
}
.sosyal-post-header {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px 0;
}
.sosyal-post-meta { flex: 1; }
.sosyal-post-meta strong {
    font-size: 15px; color: #1c1e21; display: block; font-weight: 600;
    cursor: pointer;
}
.sosyal-post-meta strong:hover { text-decoration: underline; }
.sosyal-post-meta small { font-size: 13px; color: #65676b; }
.sosyal-post-meta .location-badge {
    display: inline-flex; align-items: center; gap: 4px;
    color: #65676b; font-size: 13px; font-weight: 400;
    margin-left: 0; background: none; padding: 0;
}
.sosyal-post-meta .location-badge i { color: #f5533d; font-size: 11px; }
.sosyal-post-delete {
    background: none; border: none; color: #bec3c9; cursor: pointer;
    font-size: 16px; padding: 8px; border-radius: 50%; transition: all 0.2s;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
}
.sosyal-post-delete:hover { background: #f0f2f5; color: #606770; }
.sosyal-post-content {
    font-size: 15px; color: #1c1e21; line-height: 1.5;
    padding: 8px 16px 12px; white-space: pre-wrap;
}
.sosyal-post-image {
    width: 100%; margin-bottom: 0; max-height: 500px;
    object-fit: cover; border-radius: 0;
}

/* Post Actions - Facebook style like/comment/share row */
.sosyal-post-actions {
    display: flex; align-items: center; gap: 0;
    padding: 4px 16px 4px;
    border-top: 1px solid #e4e6eb;
    margin: 0 0;
}
.sosyal-action-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: none; border: none; font-size: 15px; color: #65676b;
    cursor: pointer; padding: 10px 0; border-radius: 6px; transition: all 0.15s;
    flex: 1; font-weight: 600;
}
.sosyal-action-btn:hover { background: #f0f2f5; }
.sosyal-action-btn.liked { color: #1877f2; }
.sosyal-action-btn.liked i { font-weight: 900; }
.sosyal-action-btn.disliked { color: #f5533d; }
.sosyal-action-btn.disliked i { font-weight: 900; }

/* Like / Dislike pop animation */
@keyframes sosyal-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.sosyal-anim-pop i {
    display: inline-block;
    animation: sosyal-pop 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Comments - Facebook style */
.sosyal-comments {
    margin: 0; padding: 8px 16px 12px;
    border-top: none; background: #fff;
    border-radius: 0 0 8px 8px;
}
.sosyal-comment {
    display: flex; gap: 8px; padding: 4px 0; border-bottom: none;
    margin-bottom: 4px;
}
.sosyal-comment:last-child { border-bottom: none; }
.sosyal-comment .sosyal-avatar { width: 32px; height: 32px; font-size: 12px; }
.sosyal-comment-body {
    flex: 1; background: #f0f2f5; border-radius: 18px; padding: 8px 12px;
}
.sosyal-comment-body strong { font-size: 13px; color: #1c1e21; }
.sosyal-comment-body p { font-size: 13px; color: #1c1e21; margin: 2px 0 0; }
.sosyal-comment-body small { font-size: 11px; color: #65676b; }

/* Comment head with actions */
.sosyal-comment-head {
    display: flex; align-items: center; gap: 6px;
}
.sosyal-comment-head strong { flex: 1; }
.sosyal-comment-actions {
    display: inline-flex; gap: 2px; margin-left: auto;
}
.sosyal-comment-actions button {
    background: none; border: none; padding: 2px 6px; cursor: pointer;
    font-size: 12px; color: #65676b; border-radius: 4px; transition: all 0.2s;
}
.sosyal-comment-actions button:hover { color: #1877f2; background: rgba(24,119,242,0.1); }

/* Comment edit input */
.sosyal-comment-edit-input {
    width: 100%; border: 1px solid #1877f2; border-radius: 18px; padding: 6px 12px;
    font-size: 13px; font-family: inherit; outline: none; margin-top: 4px;
}

/* Comment form - Facebook style */
.sosyal-comment-form {
    display: flex; gap: 8px; margin-top: 8px; align-items: center;
}
.sosyal-comment-form input {
    flex: 1; border: 1px solid #e4e6eb; border-radius: 20px; padding: 8px 16px;
    font-size: 13px; outline: none; transition: border-color 0.2s;
    background: #f0f2f5;
}
.sosyal-comment-form input:focus { border-color: #1877f2; background: #fff; }
.sosyal-comment-form button {
    background: #1877f2; color: #fff; border: none; border-radius: 20px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.sosyal-comment-form button:hover { background: #166fe5; }

/* Post report button */
.sosyal-post-report {
    background: none; border: none; color: #bec3c9; cursor: pointer;
    font-size: 13px; padding: 4px; transition: color 0.2s; margin-left: 4px;
}
.sosyal-post-report:hover { color: #f5533d; }

/* Forum Topic Card - Facebook Group style */
.sosyal-topic {
    background: #fff; border-radius: 8px; padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-bottom: 12px;
    border: none; cursor: pointer; transition: all 0.2s;
}
.sosyal-topic:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.sosyal-topic-header { display: flex; align-items: flex-start; gap: 10px; }
.sosyal-topic-header .sosyal-avatar { width: 40px; height: 40px; font-size: 15px; }
.sosyal-topic-info { flex: 1; }
.sosyal-topic-title { font-size: 15px; font-weight: 700; color: #1c1e21; margin-bottom: 4px; }
.sosyal-topic-snippet { font-size: 14px; color: #65676b; line-height: 1.4; }
.sosyal-topic-location {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: #f5533d;
    background: rgba(245,83,61,0.08); padding: 3px 10px; border-radius: 12px;
    margin-bottom: 6px; width: fit-content;
}
.sosyal-topic-location i { font-size: 10px; }
.sosyal-topic-time {
    font-size: 12px; color: #65676b; margin-top: 6px;
}
.sosyal-topic-time i { margin-right: 4px; font-size: 11px; }
.sosyal-topic-meta {
    display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: #65676b;
}
.sosyal-topic-meta i { margin-right: 4px; }

/* Category badges */
.sosyal-category-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
    text-transform: none;
}
.sosyal-category-badge.cat-soru { background: rgba(24,119,242,0.1); color: #1877f2; }
.sosyal-category-badge.cat-oneri { background: rgba(66,183,42,0.1); color: #42b72a; }
.sosyal-category-badge.cat-deneyim { background: rgba(245,158,11,0.1); color: #e8850c; }
.sosyal-category-badge.cat-genel { background: rgba(101,103,107,0.1); color: #65676b; }
.sosyal-category-badge.cat-anket { background: rgba(139,92,246,0.12); color: #7c3aed; }
.topic-filter.active { outline: 2px solid; outline-offset: -1px; }

/* ===== Poll builder (create form) ===== */
.sosyal-poll-builder {
    margin: 10px 0 6px;
    padding: 12px;
    background: rgba(139,92,246,0.06);
    border: 1px dashed rgba(139,92,246,0.35);
    border-radius: 10px;
}
.sosyal-poll-builder-title {
    font-size: 13px; font-weight: 700; color: #7c3aed; margin-bottom: 8px;
}
#pollOptionsList { display: flex; flex-direction: column; gap: 6px; }
#pollOptionsList .poll-option-input {
    width: 100%; padding: 8px 12px; border: 1px solid #e4e6eb; border-radius: 8px;
    font-size: 14px; background: #fff; color: #1c1e21; outline: none; transition: border-color .15s;
}
#pollOptionsList .poll-option-input:focus { border-color: #7c3aed; }
.sosyal-poll-add-btn {
    margin-top: 8px; padding: 6px 12px; border: 1px solid rgba(139,92,246,0.4);
    background: #fff; color: #7c3aed; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.sosyal-poll-add-btn:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* ===== Poll view (detail) ===== */
.sosyal-poll {
    margin: 14px 0;
    padding: 14px;
    background: rgba(139,92,246,0.05);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 12px;
}
.sosyal-poll-header {
    font-size: 14px; font-weight: 700; color: #7c3aed; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.sosyal-poll-total {
    font-size: 12px; font-weight: 600; color: #65676b; background: #fff;
    padding: 2px 10px; border-radius: 999px;
}
.sosyal-poll-opts { display: flex; flex-direction: column; gap: 8px; }
.sosyal-poll-opt {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid #e4e6eb; border-radius: 10px;
    padding: 10px 12px; cursor: pointer; user-select: none;
    transition: border-color .15s, transform .1s;
}
.sosyal-poll-opt:hover { border-color: #7c3aed; }
.sosyal-poll-opt:active { transform: scale(0.995); }
.sosyal-poll-opt.selected { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(139,92,246,0.2) inset; }
.sosyal-poll-bar {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(139,92,246,0.08));
    transition: width .35s ease;
    z-index: 0;
}
.sosyal-poll-opt.selected .sosyal-poll-bar {
    background: linear-gradient(90deg, rgba(139,92,246,0.32), rgba(139,92,246,0.14));
}
.sosyal-poll-opt-row {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 14px; color: #1c1e21;
}
.sosyal-poll-opt-text { font-weight: 600; }
.sosyal-poll-opt.selected .sosyal-poll-opt-text { color: #7c3aed; }
.sosyal-poll-opt-meta { font-size: 12px; color: #65676b; display: flex; gap: 8px; font-weight: 600; }
.sosyal-poll-opt.selected .sosyal-poll-opt-meta { color: #7c3aed; }
.sosyal-poll-hint {
    margin-top: 10px; font-size: 12px; color: #65676b; text-align: center;
}

/* Dark mode */
[data-theme="dark"] .sosyal-poll { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.30); }
[data-theme="dark"] .sosyal-poll-header { color: #c4b5fd; }
[data-theme="dark"] .sosyal-poll-total { background: #242526; color: #b0b3b8; }
[data-theme="dark"] .sosyal-poll-opt { background: #242526; border-color: #3e4042; }
[data-theme="dark"] .sosyal-poll-opt-row { color: #e4e6eb; }
[data-theme="dark"] .sosyal-poll-opt-meta { color: #b0b3b8; }
[data-theme="dark"] .sosyal-poll-hint { color: #b0b3b8; }
[data-theme="dark"] .sosyal-poll-builder { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.45); }
[data-theme="dark"] #pollOptionsList .poll-option-input { background: #3a3b3c; color: #e4e6eb; border-color: #3e4042; }
[data-theme="dark"] #pollOptionsList .poll-option-input:focus { background: #242526; border-color: #c4b5fd; }
[data-theme="dark"] .sosyal-poll-add-btn { background: #242526; color: #c4b5fd; border-color: rgba(196,181,253,0.4); }
[data-theme="dark"] .sosyal-poll-add-btn:hover { background: #7c3aed; color: #fff; }
[data-theme="dark"] .sosyal-category-badge.cat-anket { background: rgba(139,92,246,0.2); color: #c4b5fd; }

/* Topic Detail (expanded) - Facebook post detail style */
.sosyal-topic-detail {
    background: #fff; border-radius: 8px; padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-bottom: 16px;
    border: none;
}
.sosyal-topic-detail .topic-full-content {
    font-size: 15px; color: #1c1e21; line-height: 1.6;
    margin: 16px 0; white-space: pre-wrap;
}
.sosyal-topic-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: #1877f2; cursor: pointer;
    background: none; border: none; padding: 8px 12px; margin-bottom: 12px;
    transition: all 0.2s; border-radius: 6px; font-weight: 600;
}
.sosyal-topic-back:hover { background: rgba(24,119,242,0.1); }

/* Replies - Facebook comment style */
.sosyal-replies { margin-top: 16px; }
.sosyal-reply {
    display: flex; gap: 8px; padding: 6px 0;
    border-top: none; margin-bottom: 4px;
}
.sosyal-reply .sosyal-avatar { width: 32px; height: 32px; font-size: 12px; }
.sosyal-reply-body {
    flex: 1; background: #f0f2f5; border-radius: 18px; padding: 8px 12px;
}
.sosyal-reply-body strong { font-size: 13px; color: #1c1e21; }
.sosyal-reply-body p {
    font-size: 14px; color: #1c1e21; margin: 4px 0 0;
    line-height: 1.4; white-space: pre-wrap;
}
.sosyal-reply-body small { font-size: 12px; color: #65676b; }
.sosyal-reply-form {
    display: flex; gap: 8px; margin-top: 12px;
}
.sosyal-reply-form textarea {
    flex: 1; border: 1px solid #e4e6eb; border-radius: 18px; padding: 10px 14px;
    font-size: 14px; font-family: inherit; resize: none; min-height: 40px;
    outline: none; transition: border-color 0.2s; background: #f0f2f5;
}
.sosyal-reply-form textarea:focus { border-color: #1877f2; background: #fff; }
.sosyal-reply-form button {
    align-self: flex-end;
    background: #1877f2; color: #fff; border: none; border-radius: 8px;
    padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.sosyal-reply-form button:hover { background: #166fe5; }

/* Create topic form */
.sosyal-create-card .topic-title-input {
    width: 100%; border: 1px solid #e4e6eb; border-radius: 8px; padding: 12px 14px;
    font-size: 15px; font-family: inherit; margin-bottom: 10px;
    transition: border-color 0.2s; color: #1c1e21;
}
.sosyal-create-card .topic-title-input:focus { outline: none; border-color: #1877f2; }
.sosyal-create-card .topic-category-select {
    border: 1px solid #e4e6eb; border-radius: 8px; padding: 8px 12px;
    font-size: 13px; background: #f0f2f5; color: #1c1e21;
    outline: none; cursor: pointer;
}

/* Empty state */
.sosyal-empty {
    text-align: center; padding: 40px 20px; color: #65676b;
}
.sosyal-empty i { font-size: 48px; margin-bottom: 12px; color: #bec3c9; display: block; }
.sosyal-empty p { font-size: 15px; }

/* Load more */
.sosyal-load-more {
    text-align: center; padding: 16px;
}
.sosyal-load-more button {
    background: #e4e6eb; border: none; border-radius: 8px;
    padding: 10px 28px; font-size: 14px; font-weight: 600; color: #1c1e21;
    cursor: pointer; transition: all 0.2s;
}
.sosyal-load-more button:hover { background: #d8dadf; }

/* New posts bar - Facebook style */
.sosyal-new-bar {
    text-align: center; padding: 10px 16px;
    background: #e7f3ff; color: #1877f2; font-size: 14px; font-weight: 600;
    border-radius: 8px; margin-bottom: 12px; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: background 0.2s;
}
.sosyal-new-bar:hover { background: #d4e9fd; }

/* Responsive */
@media (max-width: 768px) {
    .sosyal-modal { scrollbar-width: none; -ms-overflow-style: none; }
    .sosyal-modal::-webkit-scrollbar { display: none; }
    .sosyal-hero { padding: 20px 16px 16px; }
    .sosyal-hero h1 { font-size: 20px; }
    .sosyal-create-card { border-radius: 0; }
    .sosyal-post { border-radius: 0; margin-bottom: 8px; }
    .sosyal-topic { border-radius: 0; margin-bottom: 8px; }
    .sosyal-topic-detail { border-radius: 0; padding: 16px; }
    .sosyal-create-actions { gap: 4px; }
    .sosyal-btn-submit { margin-left: 0; width: 100%; justify-content: center; }
    .sosyal-topic-time { display: block; }
    .sosyal-tabs { border-radius: 0; }
    .sosyal-modal { max-width: 100%; border-radius: 0; max-height: 100vh; }
    .sosyal-modal-overlay { padding: 0; align-items: flex-end; }
    .sosyal-modal-body textarea { font-size: 14px; }
    .sosyal-modal-body textarea::placeholder { font-size: 13px; }
}

/* Dark mode */
[data-theme="dark"] .sosyal-page-wrap { background: #18191a; }
[data-theme="dark"] .sosyal-hero { background: #242526; border-color: #3e4042; }
[data-theme="dark"] .sosyal-hero h1 { color: #e4e6eb; }
[data-theme="dark"] .sosyal-hero p { color: #b0b3b8; }
[data-theme="dark"] .sosyal-tabs { background: #242526; border-color: #3e4042; }
[data-theme="dark"] .sosyal-tab { color: #b0b3b8; }
[data-theme="dark"] .sosyal-tab:hover { background: #3a3b3c; color: #2d88ff; }
[data-theme="dark"] .sosyal-tab.active { color: #2d88ff; border-bottom-color: #2d88ff; }
[data-theme="dark"] .sosyal-create-card { background: #242526; }
[data-theme="dark"] .sosyal-create-trigger span { background: #3a3b3c; color: #b0b3b8; }
[data-theme="dark"] .sosyal-modal { background: #242526; }
[data-theme="dark"] .sosyal-modal-header { border-bottom-color: #3e4042; }
[data-theme="dark"] .sosyal-modal-header h3 { color: #e4e6eb; }
[data-theme="dark"] .sosyal-modal-close { background: #3a3b3c; color: #e4e6eb; }
[data-theme="dark"] .sosyal-modal-divider { background: #3e4042; }
[data-theme="dark"] .sosyal-modal-body textarea { color: #e4e6eb; }
[data-theme="dark"] .sosyal-modal-body textarea::placeholder { color: #b0b3b8; }
[data-theme="dark"] .sosyal-modal-user-name { color: #e4e6eb; }
[data-theme="dark"] .sosyal-post { background: #242526; }
[data-theme="dark"] .sosyal-post-content { color: #e4e6eb; }
[data-theme="dark"] .sosyal-post-meta strong { color: #e4e6eb; }
[data-theme="dark"] .sosyal-post-meta small { color: #b0b3b8; }
[data-theme="dark"] .sosyal-post-actions { border-top-color: #3e4042; }
[data-theme="dark"] .sosyal-action-btn { color: #b0b3b8; }
[data-theme="dark"] .sosyal-action-btn:hover { background: #3a3b3c; }
[data-theme="dark"] .sosyal-action-btn.liked { color: #2d88ff; }
[data-theme="dark"] .sosyal-comment-body { background: #3a3b3c; }
[data-theme="dark"] .sosyal-comment-body strong { color: #e4e6eb; }
[data-theme="dark"] .sosyal-comment-body p { color: #e4e6eb; }
[data-theme="dark"] .sosyal-comment-form input { background: #3a3b3c; color: #e4e6eb; border-color: #3e4042; }
[data-theme="dark"] .sosyal-comment-form input:focus { background: #242526; border-color: #2d88ff; }
[data-theme="dark"] .sosyal-topic { background: #242526; }
[data-theme="dark"] .sosyal-topic:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
[data-theme="dark"] .sosyal-topic-title { color: #e4e6eb; }
[data-theme="dark"] .sosyal-topic-snippet { color: #b0b3b8; }
[data-theme="dark"] .sosyal-topic-detail { background: #242526; }
[data-theme="dark"] .sosyal-topic-detail .topic-full-content { color: #e4e6eb; }
[data-theme="dark"] .sosyal-topic-location { background: rgba(245,83,61,0.15); color: #f87171; }
[data-theme="dark"] .sosyal-reply-body { background: #3a3b3c; }
[data-theme="dark"] .sosyal-reply-body strong { color: #e4e6eb; }
[data-theme="dark"] .sosyal-reply-body p { color: #e4e6eb; }
[data-theme="dark"] .sosyal-reply-form textarea { background: #3a3b3c; color: #e4e6eb; border-color: #3e4042; }
[data-theme="dark"] .sosyal-reply-form textarea:focus { background: #242526; border-color: #2d88ff; }
[data-theme="dark"] .sosyal-create-card textarea { background: #3a3b3c; color: #e4e6eb; border-color: #3e4042; }
[data-theme="dark"] .sosyal-create-card .topic-title-input { background: #3a3b3c; color: #e4e6eb; border-color: #3e4042; }
[data-theme="dark"] .sosyal-create-card .topic-category-select { background: #3a3b3c; color: #e4e6eb; border-color: #3e4042; }
[data-theme="dark"] .sosyal-create-actions { border-color: #3e4042; }
[data-theme="dark"] .sosyal-load-more button { background: #3a3b3c; color: #e4e6eb; }
[data-theme="dark"] .sosyal-load-more button:hover { background: #4e4f50; }
[data-theme="dark"] .sosyal-new-bar { background: rgba(45,136,255,0.15); color: #2d88ff; }
[data-theme="dark"] .sosyal-empty { color: #b0b3b8; }
[data-theme="dark"] .sosyal-empty i { color: #3e4042; }
[data-theme="dark"] .sosyal-post-trigger-bar { background: #242526; }
[data-theme="dark"] .sosyal-location-results { background: #242526; border-color: #3e4042; }
[data-theme="dark"] .sosyal-loc-item { color: #e4e6eb; }
[data-theme="dark"] .sosyal-loc-item:hover { background: #3a3b3c; }
[data-theme="dark"] .sosyal-loc-item strong { color: #e4e6eb; }
[data-theme="dark"] .sosyal-loc-item small { color: #b0b3b8; }
[data-theme="dark"] .sosyal-location-input input { color: #e4e6eb; }

/* Location autocomplete dropdown */
.sosyal-location-results {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 280px; max-width: 360px; max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid #e4e6eb; border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.08); z-index: 1000;
}
.sosyal-loc-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    cursor: pointer; transition: background 0.15s; color: #1c1e21;
}
.sosyal-loc-item:hover { background: #f0f2f5; }
.sosyal-loc-item:first-child { border-radius: 8px 8px 0 0; }
.sosyal-loc-item:last-child { border-radius: 0 0 8px 8px; }
.sosyal-loc-item i { color: #f5533d; font-size: 14px; flex-shrink: 0; }
.sosyal-loc-item div { flex: 1; min-width: 0; }
.sosyal-loc-item strong { display: block; font-size: 14px; font-weight: 600; color: #1c1e21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sosyal-loc-item small { display: block; font-size: 12px; color: #65676b; margin-top: 1px; }
.sosyal-loc-empty { cursor: default; color: #65676b; font-size: 13px; }
.sosyal-loc-empty:hover { background: transparent; }
.sosyal-loc-empty i { color: #bec3c9; }