/* Apple Design System - CSS Variables */

:root {

    /* Apple Colors */

    --apple-blue: #007AFF;

    --apple-blue-dark: #0056CC;

    --apple-blue-light: #5AC8FA;

    --apple-green: #34C759;

    --apple-indigo: #5856D6;

    --apple-orange: #FF9500;

    --apple-pink: #FF2D92;

    --apple-purple: #AF52DE;

    --apple-red: #FF3B30;

    --apple-teal: #5AC8FA;

    --apple-yellow: #FFCC00;

    

    /* Apple Grays */

    --apple-gray-1: #8E8E93;

    --apple-gray-2: #AEAEB2;

    --apple-gray-3: #C7C7CC;

    --apple-gray-4: #D1D1D6;

    --apple-gray-5: #E5E5EA;

    --apple-gray-6: #F2F2F7;

    

    /* System Colors */

    --apple-label: #000000;

    --apple-secondary-label: #3C3C43;

    --apple-tertiary-label: #3C3C43;

    --apple-quaternary-label: #3C3C43;

    --apple-system-fill: #78788033;

    --apple-secondary-system-fill: #78788028;

    --apple-tertiary-system-fill: #7676801E;

    --apple-quaternary-system-fill: #74748014;

    

    /* Background Colors */

    --apple-system-background: #FFFFFF;

    --apple-secondary-system-background: #F2F2F7;

    --apple-tertiary-system-background: #FFFFFF;

    --apple-system-grouped-background: #F2F2F7;

    --apple-secondary-system-grouped-background: #FFFFFF;

    --apple-tertiary-system-grouped-background: #F2F2F7;

    

    /* Separator Colors */

    --apple-separator: #3C3C4336;

    --apple-opaque-separator: #C6C6C8;

    

    /* Typography */

    --apple-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

}



/* Reset ve Temel Stiller */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--apple-font-family);

    background-color: var(--apple-system-grouped-background);

    color: var(--apple-label);

    line-height: 1.47;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



.container {

    max-width: 1600px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header styles moved to header-modern.css */



/* Search styles moved to header-modern.css */







.filter-option {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 0;

    cursor: pointer;

    transition: color 0.2s ease;

}



.filter-option:hover {

    color: #3b82f6;

}



.filter-option input[type="checkbox"] {

    width: 16px;

    height: 16px;

    accent-color: #3b82f6;

}



.filter-option span {

    font-size: 14px;

    font-weight: 500;

}



/* Search Results */

.search-results {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    margin-top: 8px;

    z-index: 1001;

    max-height: 400px;

    overflow-y: auto;

}



.search-results-content {

    padding: 12px 0;

}



.search-result-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    cursor: pointer;

    transition: background 0.2s ease;

    border-bottom: 1px solid #f1f5f9;

}



.search-result-item:hover {

    background: #f8fafc;

}



.search-result-item:last-child {

    border-bottom: none;

}



.search-result-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f1f5f9;

    font-size: 16px;

}



.search-result-content {

    flex: 1;

}



.search-result-title {

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;

    margin-bottom: 2px;

}



.search-result-description {

    font-size: 12px;

    color: #64748b;

}



.search-section h4 {

    font-size: 13px;

    font-weight: 600;

    color: #64748b;

    margin: 0;

    padding: 8px 16px;

    background: #f8fafc;

    border-bottom: 1px solid #f1f5f9;

}



.search-no-results, .search-loading, .search-error {

    padding: 20px;

    text-align: center;

    font-size: 14px;

}



.search-loading {

    color: #64748b;

}



.search-error {

    color: #ef4444;

}



.search-no-results {

    color: #64748b;

}



/* ===== X.COM STYLE POST MODAL ===== */



/* Modal Base */

.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

    background: rgba(0, 0, 0, 0.4);

    align-items: flex-start;

    justify-content: center;

    padding-top: 5vh;

}



.modal.show {

    display: flex;

}



/* X.com Style Modal Content */

.post-modal-content {

    background: #fff;

    border-radius: 16px;

    width: 100%;

    max-width: 600px;

    max-height: 90vh;

    overflow: hidden;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

}



/* X.com Style Modal Header */

.post-modal-header {

    padding: 12px 16px;

    border-bottom: 1px solid #eff3f4;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #fff;

}



/* X.com Style Header Elements */

.modal-close {

    background: transparent;

    border: none;

    padding: 8px;

    border-radius: 50%;

    cursor: pointer;

    color: #0f1419;

    transition: background-color 0.2s;

}



.modal-close:hover {

    background: rgba(15, 20, 25, 0.1);

}



.modal-close i {

    font-size: 18px;

}



.post-submit-btn {

    background: #1d9bf0;

    border: none;

    color: white;

    padding: 6px 16px;

    border-radius: 20px;

    font-weight: 700;

    font-size: 15px;

    cursor: pointer;

    transition: all 0.2s ease;

    opacity: 0.5;

}



.post-submit-btn:not(:disabled) {

    opacity: 1;

}



.post-submit-btn:hover:not(:disabled) {

    background: #1a8cd8;

}



.post-submit-btn:disabled {

    cursor: not-allowed;

}



/* X.com Style Modal Body */

.post-modal-body {

    padding: 16px;

    max-height: calc(90vh - 60px);

    overflow-y: auto;

}



/* X.com Style Post Form */

.post-form {

    display: flex;

    flex-direction: column;

    gap: 0;

}



/* X.com Style User Info */

.post-user-info {

    display: flex;

    gap: 12px;

    margin-bottom: 12px;

}



.post-user-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.user-info-text {

    flex: 1;

}



/* X.com Style Textarea */

.textarea-container {

    position: relative;

    flex: 1;

}



#postContent {

    width: 100%;

    min-height: 80px;

    max-height: 400px;

    padding: 0;

    border: none;

    background: transparent;

    font-size: 20px;

    line-height: 1.25;

    color: #0f1419;

    resize: none;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-weight: 400;

}



#postContent::placeholder {

    color: #536471;

    font-size: 20px;

}



#postContent:focus {

    outline: none;

}



/* Format Toolbar */

.format-toolbar {

    display: flex;

    gap: 4px;

    padding: 12px 16px;

    background: #f1f5f9;

    border-top: 1px solid #e2e8f0;

}



.format-btn {

    background: transparent;

    border: none;

    width: 32px;

    height: 32px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: #64748b;

    transition: all 0.2s ease;

    font-size: 14px;

}



.format-btn:hover {

    background: #e2e8f0;

    color: #1e293b;

}



.format-btn:active {

    background: #cbd5e1;

}



/* X.com Style Character Counter */

.character-counter {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: 52px; /* Align with content under avatar */

}



.char-count {

    font-size: 13px;

    color: #536471;

}



.char-progress {

    width: 20px;

    height: 20px;

    position: relative;

}



.char-progress-bar {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: conic-gradient(#1d9bf0 0deg, #e1e8ed 0deg);

    transition: all 0.2s ease;

}



/* Hide other stats for clean X.com look */

.post-stats,

.stat-item,

.writing-suggestions {

    display: none;

}



/* Writing Suggestions */

.writing-suggestions {

    background: #fef3c7;

    border: 1px solid #f59e0b;

    border-radius: 12px;

    padding: 16px;

    margin-top: 12px;

}



.suggestion-item {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: #92400e;

    margin-bottom: 8px;

}



.suggestion-item:last-child {

    margin-bottom: 0;

}



.suggestion-item i {

    color: #f59e0b;

}



/* Post Preview */

.post-preview {

    background: #f8fafc;

    border: 2px solid #e2e8f0;

    border-radius: 16px;

    margin-top: 20px;

    overflow: hidden;

}



.preview-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    background: #f1f5f9;

    border-bottom: 1px solid #e2e8f0;

}



.preview-title {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    color: #1e293b;

}



.preview-title i {

    color: #3b82f6;

}



.preview-toggle {

    background: transparent;

    border: none;

    color: #64748b;

    cursor: pointer;

    padding: 8px;

    border-radius: 8px;

    transition: all 0.2s ease;

}



.preview-toggle:hover {

    background: #e2e8f0;

    color: #1e293b;

}



.preview-content {

    padding: 20px;

}



.preview-post {

    background: white;

    border-radius: 12px;

    padding: 20px;

    border: 1px solid #e2e8f0;

}



.preview-post-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

}



.preview-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.preview-user-info h5 {

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

    margin: 0 0 4px 0;

}



.preview-user-info span {

    font-size: 14px;

    color: #64748b;

}



.preview-text {

    color: #1e293b;

    line-height: 1.6;

    margin-bottom: 16px;

    font-size: 15px;

}



.preview-actions {

    display: flex;

    gap: 24px;

    padding-top: 16px;

    border-top: 1px solid #f1f5f9;

}



.preview-action-btn {

    background: transparent;

    border: none;

    color: #64748b;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    padding: 8px 12px;

    border-radius: 8px;

    transition: all 0.2s ease;

}



.preview-action-btn:hover {

    background: #f1f5f9;

    color: #1e293b;

}



/* X.com Style Attachment Buttons */

.attachment-buttons {

    display: flex;

    gap: 0;

    padding: 12px 0;

    border-top: 1px solid #eff3f4;

    margin-top: 12px;

}



.attachment-btn {

    background: transparent;

    border: none;

    padding: 8px;

    border-radius: 50%;

    cursor: pointer;

    color: #1d9bf0;

    transition: background-color 0.2s;

    position: relative;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.attachment-btn:hover {

    background: rgba(29, 155, 240, 0.1);

}



.attachment-btn i {

    font-size: 18px;

}



/* File Preview Area */

.file-preview-area {

    margin: 20px 0;

    background: #f8fafc;

    border-radius: 16px;

    border: 1px solid #e2e8f0;

    overflow: hidden;

}



.file-preview-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    background: #f1f5f9;

    border-bottom: 1px solid #e2e8f0;

}



.file-preview-header h4 {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

    margin: 0;

}



.clear-all-btn {

    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #dc2626;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 13px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.clear-all-btn:hover {

    background: #fee2e2;

    border-color: #fca5a5;

}



.file-preview-list {

    padding: 20px;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    gap: 16px;

}



.file-preview-item {

    position: relative;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    overflow: hidden;

    transition: all 0.2s ease;

}



.file-preview-item:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.file-preview-image {

    width: 100%;

    height: 120px;

    object-fit: cover;

}



.file-preview-info {

    padding: 12px;

}



.file-preview-name {

    font-size: 13px;

    font-weight: 500;

    color: #1e293b;

    margin: 0 0 4px 0;

    word-break: break-all;

}



.file-preview-size {

    font-size: 12px;

    color: #64748b;

    margin: 0;

}



.file-remove-btn {

    position: absolute;

    top: 8px;

    right: 8px;

    background: rgba(239, 68, 68, 0.9);

    border: none;

    color: white;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 12px;

    transition: all 0.2s ease;

}



.file-remove-btn:hover {

    background: #dc2626;

    transform: scale(1.1);

}



/* X.com Style Post Options */

.post-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 12px;

    margin-left: 52px; /* Align with content under avatar */

}



.privacy-selector {

    position: relative;

}



.privacy-btn {

    background: transparent;

    border: 1px solid #cfd9de;

    border-radius: 20px;

    padding: 4px 12px;

    display: flex;

    align-items: center;

    gap: 4px;

    cursor: pointer;

    color: #1d9bf0;

    font-size: 13px;

    font-weight: 700;

    transition: background-color 0.2s;

}



.privacy-btn:hover {

    background: rgba(29, 155, 240, 0.1);

}



.privacy-dropdown {

    position: absolute;

    bottom: 100%;

    left: 0;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

    min-width: 200px;

    z-index: 1000;

    margin-bottom: 8px;

}



.privacy-option {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px;

    cursor: pointer;

    transition: all 0.2s ease;

    border-bottom: 1px solid #f1f5f9;

}



.privacy-option:last-child {

    border-bottom: none;

}



.privacy-option:hover {

    background: #f8fafc;

}



.privacy-option i {

    width: 20px;

    color: #64748b;

}



.privacy-option div strong {

    display: block;

    font-weight: 600;

    color: #1e293b;

    margin-bottom: 2px;

}



.privacy-option div small {

    color: #64748b;

    font-size: 13px;

}



/* Responsive Design */

@media (max-width: 768px) {

    .post-modal-content {

        width: 95%;

        max-height: 95vh;

        border-radius: 16px;

    }

    

    .post-modal-header {

        padding: 20px;

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

    }

    

    .modal-actions {

        width: 100%;

        justify-content: space-between;

    }

    

    .post-form {

        padding: 20px;

    }

    

    .attachment-buttons {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .file-preview-list {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .post-stats {

        flex-direction: column;

        gap: 8px;

    }

}



/* ===== NOTIFICATION STYLES ===== */

.notification {

    position: fixed;

    top: 20px;

    right: 20px;

    background: white;

    border-radius: 12px;

    padding: 16px 20px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-width: 300px;

    z-index: 10000;

    animation: slideIn 0.3s ease;

}



.notification-success {

    border-left: 4px solid #10b981;

}



.notification-error {

    border-left: 4px solid #ef4444;

}



.notification-warning {

    border-left: 4px solid #f59e0b;

}



.notification-info {

    border-left: 4px solid #3b82f6;

}



.notification-content {

    display: flex;

    align-items: center;

    gap: 12px;

}



.notification-content i {

    font-size: 18px;

}



.notification-success .notification-content i {

    color: #10b981;

}



.notification-error .notification-content i {

    color: #ef4444;

}



.notification-warning .notification-content i {

    color: #f59e0b;

}



.notification-info .notification-content i {

    color: #3b82f6;

}



.notification-close {

    background: transparent;

    border: none;

    color: #64748b;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.notification-close:hover {

    background: #f1f5f9;

    color: #1e293b;

}



@keyframes slideIn {

    from {

        transform: translateX(100%);

        opacity: 0;

    }

    to {

        transform: translateX(0);

        opacity: 1;

    }

}



/* ===== EMOJI PICKER STYLES ===== */

.emoji-picker {

    position: absolute;

    bottom: 100%;

    right: 0;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

    width: 320px;

    max-height: 400px;

    z-index: 1000;

    margin-bottom: 8px;

    overflow: hidden;

}



.emoji-picker-header {

    padding: 16px 20px;

    border-bottom: 1px solid #f1f5f9;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.emoji-picker-header h4 {

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

    margin: 0;

}



.emoji-search {

    padding: 16px 20px;

    border-bottom: 1px solid #f1f5f9;

}



.emoji-search input {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

}



.emoji-categories {

    display: flex;

    padding: 12px 16px;

    gap: 8px;

    border-bottom: 1px solid #f1f5f9;

    background: #f8fafc;

}



.emoji-category {

    background: transparent;

    border: none;

    padding: 8px 12px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 18px;

    transition: all 0.2s ease;

}



.emoji-category:hover,

.emoji-category.active {

    background: #e2e8f0;

}



.emoji-grid {

    padding: 16px;

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 4px;

    max-height: 200px;

    overflow-y: auto;

}



.emoji-btn {

    background: transparent;

    border: none;

    font-size: 24px;

    padding: 8px;

    cursor: pointer;

    border-radius: 8px;

    transition: all 0.2s ease;

}



.emoji-btn:hover {

    background: #f1f5f9;

    transform: scale(1.2);

}



/* ===== ADDITIONAL HELPER STYLES ===== */

.video-preview-placeholder {

    width: 100%;

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

}



.hashtag {

    color: #3b82f6;

    font-weight: 600;

}



.mention {

    color: #8b5cf6;

    font-weight: 600;

}



/* X.com Style Direct Post Creation */

.post-creation-section {

    background: white;

    border-radius: 16px;

    padding: 16px;

    margin-bottom: 24px;

    border: 1px solid #eff3f4;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    position: relative;

}



/* Direct Post Composer */

.direct-post-composer {

    display: flex;

    gap: 12px;

    align-items: flex-start;

}



.direct-user-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.direct-content-wrapper {

    flex: 1;

    min-width: 0;

}



.post-creation-header {

    display: flex;

    gap: 12px;

    margin-bottom: 12px;

}



.direct-textarea-container {

    width: 100%;

    margin-bottom: 12px;

}



.direct-textarea-container textarea {

    width: 100%;

    min-height: 60px;

    max-height: 200px;

    padding: 12px 0;

    border: none;

    background: transparent;

    font-size: 20px;

    line-height: 1.25;

    color: #0f1419;

    resize: none;

    outline: none;

    font-family: inherit;

}



.direct-textarea-container textarea::placeholder {

    color: #536471;

}



.direct-post-textarea::placeholder {

    color: #536471;

    font-size: 20px;

}



.direct-post-textarea:focus {

    outline: none;

}



.direct-file-preview-area {

    margin: 12px 0 12px 52px; /* Align with content under avatar */

}



.direct-file-preview-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.direct-file-preview-item {

    position: relative;

    border-radius: 8px;

    overflow: hidden;

}



.direct-file-preview-item video {

    max-width: 100px;

    max-height: 100px;

    border-radius: 8px;

}



.direct-file-preview-item img {

    max-width: 100px;

    max-height: 100px;

    object-fit: cover;

    border-radius: 8px;

}



.direct-post-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-left: 52px; /* Align with content under avatar */

    margin-top: 12px;

    padding-top: 12px;

    border-top: 1px solid #eff3f4;

}



.direct-attachment-buttons {

    display: flex;

    gap: 0;

}



.direct-attachment-btn {

    background: transparent;

    border: none;

    padding: 8px;

    border-radius: 50%;

    cursor: pointer;

    color: #1d9bf0;

    transition: background-color 0.2s;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.direct-attachment-btn:hover {

    background: rgba(29, 155, 240, 0.1);

}



.direct-attachment-btn i {

    font-size: 18px;

}



.direct-post-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}



.direct-character-counter {

    display: flex;

    align-items: center;

    gap: 8px;

}



.direct-char-count {

    font-size: 13px;

    color: #536471;

}



.direct-char-progress {

    width: 20px;

    height: 20px;

    position: relative;

}



.direct-char-progress-bar {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: conic-gradient(#1d9bf0 0deg, #e1e8ed 0deg);

    transition: all 0.2s ease;

}



.direct-post-submit-btn {

    background: #1d9bf0;

    border: none;

    color: white;

    padding: 6px 16px;

    border-radius: 20px;

    font-weight: 700;

    font-size: 15px;

    cursor: pointer;

    transition: all 0.2s ease;

    opacity: 0.5;

}



.direct-post-submit-btn:not(:disabled) {

    opacity: 1;

}



.direct-post-submit-btn:hover:not(:disabled) {

    background: #1a8cd8;

}



.direct-post-submit-btn:disabled {

    cursor: not-allowed;

}



.user-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



/* ===== POST POLL DISPLAY ===== */

.post-poll {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px;

    margin: 12px 0;

}



.poll-question {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

    margin-bottom: 12px;

}



.poll-options {

    margin-bottom: 12px;

}



.poll-option-item {

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 12px;

    margin-bottom: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    position: relative;

    overflow: hidden;

}



.poll-option-item:hover {

    border-color: #1d9bf0;

}



.poll-option-item.voted {

    background: #e0f2fe;

    border-color: #1d9bf0;

}



.poll-option-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 2;

}



.poll-option-text {

    font-weight: 500;

}



.poll-option-percentage {

    font-weight: 600;

    color: #1d9bf0;

}



.poll-option-progress {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    background: linear-gradient(90deg, #1d9bf0 0%, #e0f2fe 100%);

    z-index: 1;

    transition: width 0.3s ease;

    opacity: 0.2;

}



.poll-info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 14px;

    color: #64748b;

}



.poll-votes-count {

    font-weight: 500;

}



.poll-time-remaining {

    color: #f59e0b;

}



/* ===== POST LOCATION DISPLAY ===== */

.post-location {

    display: flex;

    align-items: center;

    gap: 8px;

    background: #f0f9ff;

    border: 1px solid #bae6fd;

    border-radius: 8px;

    padding: 12px;

    margin: 12px 0;

    color: #0369a1;

    font-weight: 500;

    transition: all 0.2s ease;

}



.post-location:hover {

    background: #e0f2fe;

    border-color: #7dd3fc;

}



.post-location i {

    color: #dc2626;

}



.location-name {

    flex: 1;

    font-weight: 500;

    color: #0f172a;

}



.location-btn {

    background: #1d9bf0;

    color: white;

    border: none;

    padding: 6px 12px;

    border-radius: 16px;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition: background 0.2s ease;

    display: flex;

    align-items: center;

    gap: 4px;

}



.location-btn:hover {

    background: #1a8cd8;

}



/* ===== POST COUNTDOWN DISPLAY ===== */

.post-countdown {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border: none;

    border-radius: 16px;

    padding: 20px;

    margin: 16px 0;

    color: white;

    position: relative;

    overflow: hidden;

}



.post-countdown::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);

    animation: shimmer 3s infinite;

}



@keyframes shimmer {

    0% { left: -100%; }

    100% { left: 100%; }

}



.countdown-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 16px;

    font-weight: 600;

    color: #ffffff;

    font-size: 18px;

}



.countdown-title i {

    color: #ffffff;

    animation: pulse 2s infinite;

}



@keyframes pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.6; }

}



.countdown-display {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

}



/* Countdown timer and display use same styles */

.countdown-timer {

    display: flex;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;

}



.countdown-unit {

    display: flex;

    flex-direction: column;

    align-items: center;

    background: rgba(255, 255, 255, 0.15);

    border-radius: 12px;

    padding: 12px 16px;

    min-width: 70px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    animation: countdownPulse 1s ease-in-out infinite alternate;

}



@keyframes countdownPulse {

    0% { transform: scale(1); }

    100% { transform: scale(1.02); }

}



.countdown-number {

    font-size: 28px;

    font-weight: 700;

    color: #ffffff;

    line-height: 1;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.countdown-label {

    font-size: 12px;

    color: rgba(255, 255, 255, 0.9);

    margin-top: 4px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-weight: 500;

}



/* Countdown expired state */

.post-countdown.countdown-finished {

    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);

}



.post-countdown.countdown-finished .countdown-unit {

    background: rgba(255, 255, 255, 0.1);

}



.countdown-expired {

    text-align: center;

    font-weight: 600;

    color: #ffffff;

    font-size: 18px;

    padding: 12px;

}



.countdown-description {

    margin-top: 16px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 12px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

    line-height: 1.4;

    backdrop-filter: blur(5px);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



/* ===== EMOJI PICKER ===== */

.emoji-picker {

    position: absolute;

    bottom: 100%;

    left: 52px;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

    z-index: 1000;

    width: 380px;

    max-height: 450px;

    overflow-y: scroll;

    margin-bottom: 8px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    scrollbar-color: #cbd5e1 #f1f5f9;

}



.emoji-picker-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px;

    border-bottom: 1px solid #e2e8f0;

    background: #f8fafc;

    border-radius: 12px 12px 0 0;

}



.emoji-picker-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

}



.emoji-close {

    background: none;

    border: none;

    font-size: 20px;

    cursor: pointer;

    color: #64748b;

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

}



.emoji-close:hover {

    background: #e2e8f0;

    color: #dc2626;

}



/* Emoji Tabs */

.emoji-tabs {

    display: flex;

    border-bottom: 1px solid #e2e8f0;

    padding: 0 12px;

    gap: 2px;

    background: #f8fafc;

}



.emoji-tab {

    background: none;

    border: none;

    padding: 10px 14px;

    font-size: 16px;

    cursor: pointer;

    border-radius: 6px 6px 0 0;

    transition: all 0.2s;

    position: relative;

    color: #64748b;

}



.emoji-tab:hover {

    background: #f1f5f9;

    color: #334155;

}



.emoji-tab.active {

    background: #dbeafe;

    color: #1d4ed8;

}



.emoji-tab.active::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    right: 0;

    height: 2px;

    background: #1d4ed8;

}



/* Emoji Content */

.emoji-content {

    padding: 12px;

    height: 300px;

    overflow-y: auto;

}



.emoji-category {

    display: none;

}



.emoji-category.active {

    display: block;

}



.emoji-grid {

    display: grid;

    grid-template-columns: repeat(9, 1fr);

    gap: 6px;

    margin-bottom: 8px;

}



.emoji-item {

    font-size: 18px;

    padding: 6px;

    text-align: center;

    cursor: pointer;

    border-radius: 6px;

    transition: all 0.2s;

    user-select: none;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.emoji-item:hover {

    background: #f1f5f9;

    transform: scale(1.1);

}



/* Emoji picker scrollbar styling */

.emoji-picker::-webkit-scrollbar {

    width: 8px;

}



.emoji-picker::-webkit-scrollbar-track {

    background: #f1f5f9;

    border-radius: 4px;

}



.emoji-picker::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 4px;

}



.emoji-picker::-webkit-scrollbar-thumb:hover {

    background: #94a3b8;

}



/* ===== QUOTE TWEET MODAL ===== */

.quote-modal-content {

    max-width: 600px;

    width: 90%;

    max-height: 80vh;

    overflow-y: auto;

}



.quote-form {

    padding: 0;

}



.quote-input-container {

    display: flex;

    gap: 12px;

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid #e2e8f0;

}



.quote-user-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.quote-input-wrapper {

    flex: 1;

    position: relative;

}



.quote-input-wrapper textarea {

    width: 100%;

    min-height: 80px;

    max-height: 200px;

    padding: 12px 16px;

    border: none;

    border-radius: 12px;

    background: #f8fafc;

    resize: vertical;

    font-size: 16px;

    line-height: 1.5;

    font-family: inherit;

    outline: none;

    transition: background-color 0.2s;

}



.quote-input-wrapper textarea:focus {

    background: #ffffff;

    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);

}



.quote-input-wrapper textarea::placeholder {

    color: #9ca3af;

}



.quote-char-counter {

    position: absolute;

    right: 12px;

    bottom: 8px;

    font-size: 13px;

    color: #6b7280;

    background: rgba(255, 255, 255, 0.9);

    padding: 2px 6px;

    border-radius: 6px;

    backdrop-filter: blur(4px);

}



.quoted-post-preview {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 16px;

    margin-bottom: 20px;

    transition: border-color 0.2s;

}



.quoted-post-preview:hover {

    border-color: #cbd5e1;

}



.quoted-post-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}



.quoted-post-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    object-fit: cover;

}



.quoted-post-user {

    flex: 1;

}



.quoted-post-name {

    font-weight: 600;

    color: #1f2937;

    font-size: 14px;

}



.quoted-post-username {

    color: #6b7280;

    font-size: 13px;

}



.quoted-post-content {

    color: #374151;

    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 12px;

}



.quoted-post-media {

    border-radius: 12px;

    overflow: hidden;

    margin-top: 12px;

}



.quoted-post-media img {

    width: 100%;

    height: auto;

    display: block;

}



.quoted-post-media video {

    width: 100%;

    height: auto;

    display: block;

}



.quote-actions {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    padding-top: 16px;

    border-top: 1px solid #f1f5f9;

}



.quote-actions .btn {

    padding: 10px 24px;

    font-weight: 600;

    border-radius: 24px;

    transition: all 0.2s;

}



.quote-actions .btn-outline {

    background: transparent;

    border: 1px solid #d1d5db;

    color: #6b7280;

}



.quote-actions .btn-outline:hover {

    background: #f9fafb;

    border-color: #9ca3af;

}



.quote-actions .btn-primary {

    background: #3b82f6;

    border: 1px solid #3b82f6;

    color: white;

}



.quote-actions .btn-primary:hover {

    background: #2563eb;

    border-color: #2563eb;

    transform: translateY(-1px);

}



.quote-actions .btn-primary:disabled {

    background: #9ca3af;

    border-color: #9ca3af;

    cursor: not-allowed;

    transform: none;

}



/* ===== QUOTED POST IN FEED ===== */

.quoted-post-container {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 16px;

    margin-top: 16px;

    transition: all 0.2s;

    cursor: pointer;

}



.quoted-post-container:hover {

    border-color: #cbd5e1;

    background: #f1f5f9;

}



.quoted-post-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}



.quoted-post-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.quoted-post-user {

    flex: 1;

    min-width: 0;

}



.quoted-post-name {

    font-weight: 600;

    color: #1f2937;

    font-size: 14px;

    margin: 0;

    line-height: 1.2;

}



.quoted-post-username {

    color: #6b7280;

    font-size: 13px;

    margin: 0;

    line-height: 1.2;

}



.quoted-post-content {

    color: #374151;

    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 12px;

    word-wrap: break-word;

}



.quoted-post-content:last-child {

    margin-bottom: 0;

}



.quoted-post-media {

    border-radius: 12px;

    overflow: hidden;

    margin-top: 12px;

    background: #ffffff;

}



.quoted-post-media img {

    width: 100%;

    height: auto;

    max-height: 300px;

    object-fit: cover;

    display: block;

}



.quoted-post-media video {

    width: 100%;

    height: auto;

    max-height: 300px;

    display: block;

}



.quoted-special-content {

    margin-top: 8px;

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.6);

    border-radius: 8px;

    border: 1px solid rgba(0, 0, 0, 0.05);

}



.quoted-special-content:last-child {

    margin-bottom: 0;

}



/* Prevent quoted posts from showing their own media when inside quotes */

.quoted-post-container .post-image,

.quoted-post-container .post-images,

.quoted-post-container .post-images-grid,

.quoted-post-container .post-video {

    display: none;

}



/* ===== REAL POLL SYSTEM ===== */

.poll-creator {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px;

    margin: 12px 0 12px 52px;

}



.poll-creator-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

}



.poll-creator-title {

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

    display: flex;

    align-items: center;

    gap: 8px;

}



.poll-question-input {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 16px;

    margin-bottom: 12px;

    resize: none;

}



.poll-option {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

}



.poll-option-input {

    flex: 1;

    padding: 8px 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

}



.poll-option-remove {

    background: #fee2e2;

    border: 1px solid #fca5a5;

    color: #dc2626;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

}



.poll-option-remove:hover {

    background: #fecaca;

}



.poll-add-option {

    background: #f0f9ff;

    border: 1px solid #bae6fd;

    color: #0369a1;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.2s ease;

    margin-bottom: 12px;

}



.poll-add-option:hover {

    background: #e0f2fe;

}



.poll-settings {

    display: flex;

    gap: 16px;

    align-items: center;

    flex-wrap: wrap;

}



.poll-duration-select {

    padding: 6px 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    background: white;

}



.poll-multiple-choice {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 14px;

    color: #64748b;

}



.poll-close-btn {

    background: transparent;

    border: none;

    color: #64748b;

    padding: 4px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.poll-close-btn:hover {

    background: #f1f5f9;

    color: #ef4444;

}



/* ===== REAL LOCATION SYSTEM ===== */

.location-picker {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px;

    margin: 12px 0 12px 52px;

}



.location-search {

    position: relative;

    margin-bottom: 12px;

}



.location-search-input {

    width: 100%;

    padding: 12px 76px 12px 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

}



.location-current-btn, .location-manual-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: #1d9bf0;

    border: none;

    color: white;

    width: 28px;

    height: 28px;

    border-radius: 4px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}



.location-current-btn {

    right: 40px;

}



.location-manual-btn {

    right: 8px;

    background: #059669;

}



.location-suggestions {

    max-height: 150px;

    overflow-y: auto;

    border-radius: 8px;

    border: 1px solid #e2e8f0;

    background: white;

}



.location-suggestion {

    padding: 12px;

    cursor: pointer;

    border-bottom: 1px solid #f1f5f9;

    transition: background-color 0.2s;

}



.location-suggestion:hover {

    background: #f8fafc;

}



.location-suggestion:last-child {

    border-bottom: none;

}



.selected-location {

    background: #f0f9ff;

    border: 1px solid #bae6fd;

    border-radius: 8px;

    padding: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.location-info {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #0369a1;

    font-weight: 500;

}



/* ===== REAL COUNTDOWN SYSTEM ===== */

.countdown-creator {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px;

    margin: 12px 0 12px 52px;

}



.countdown-title-input {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 16px;

    margin-bottom: 12px;

    font-weight: 600;

}



.countdown-date-input {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    margin-bottom: 12px;

}



.countdown-description-input {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    resize: none;

    rows: 3;

}



/* Logo - Consistent across all pages */

.logo {

    display: flex !important;

    align-items: center !important;

    font-size: 24px !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    flex-shrink: 0 !important;

}



.logo-link {

    display: flex;

    align-items: center;

    text-decoration: none;

    color: inherit;

    transition: all 0.2s ease;

}



.logo-link:hover {

    transform: scale(1.02);

}



.logo i {

    margin-right: 10px;

    font-size: 28px;

    color: #0866FF;

}



/* Navigation - Consistent across all pages */

.nav {

    display: flex !important;

    gap: 8px !important;

    background: #f1f5f9 !important;

    padding: 6px !important;

    border-radius: 12px !important;

    flex-shrink: 0 !important;

}



.nav-link {

    text-decoration: none;

    color: #64748b;

    font-weight: 500;

    padding: 10px 16px;

    border-radius: 8px;

    transition: all 0.2s ease;

    font-size: 14px;

}



.nav-link:hover,

.nav-link.active {

    color: #0f172a;

    background: #ffffff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



/* Header Actions - Consistent across all pages */

.header-actions {

    display: flex !important;

    gap: 12px !important;

    align-items: center !important;

    flex-shrink: 0 !important;

}



/* User Menu Styles */

.user-menu {

    position: relative;

    cursor: pointer;

}



.user-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    overflow: hidden;

    border: 2px solid #e2e8f0;

    transition: all 0.2s ease;

}



.user-avatar:hover {

    border-color: #3b82f6;

    transform: scale(1.05);

}



.user-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.user-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 8px;

    background: white;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    border: 1px solid #e2e8f0;

    min-width: 220px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.2s ease;

    z-index: 1000;

}



.user-menu:hover .user-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-header {

    padding: 16px;

    border-bottom: 1px solid #e2e8f0;

    background: #f8fafc;

    border-radius: 12px 12px 0 0;

}



.dropdown-header strong {

    display: block;

    color: #0f172a;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 4px;

}



.dropdown-header span {

    color: #64748b;

    font-size: 12px;

}



.dropdown-menu {

    padding: 8px 0;

}



.dropdown-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    color: #64748b;

    text-decoration: none;

    font-size: 14px;

    transition: all 0.2s ease;

}



.dropdown-item:hover {

    background: #f1f5f9;

    color: #0f172a;

}



.dropdown-item i {

    width: 16px;

    color: #64748b;

}



.dropdown-divider {

    height: 1px;

    background: #e2e8f0;

    margin: 8px 0;

}



/* Alert Styles */

.alert {

    padding: 12px 16px;

    border-radius: 8px;

    margin-bottom: 16px;

    font-size: 14px;

    font-weight: 500;

}



.alert-success {

    background: #dcfce7;

    color: #166534;

    border: 1px solid #bbf7d0;

}



.alert-error {

    background: #fef2f2;

    color: #dc2626;

    border: 1px solid #fecaca;

}



.alert-warning {

    background: #fffbeb;

    color: #d97706;

    border: 1px solid #fed7aa;

}



.alert-info {

    background: #eff6ff;

    color: #2563eb;

    border: 1px solid #bfdbfe;

}



/* Button Styles - Profesyonel */

.btn {

    padding: 12px 24px;

    border: none;

    border-radius: 8px;

    font-weight: 600;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    font-family: var(--apple-font-family);

}



.btn-primary {

    background: var(--apple-blue);

    color: white;

    border: none;

    border-radius: 12px;

    font-weight: 600;

    font-size: 17px;

    letter-spacing: -0.41px;

    box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3);

    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);

}



.btn-primary:hover {

    background: var(--apple-blue-dark);

    transform: translateY(-0.5px);

    box-shadow: 0 3px 8px rgba(0, 122, 255, 0.4);

}



.btn-outline {

    background: var(--apple-secondary-system-background);

    color: var(--apple-blue);

    border: 1px solid var(--apple-separator);

    border-radius: 12px;

    font-weight: 600;

    font-size: 17px;

    letter-spacing: -0.41px;

}



.btn-outline:hover {

    background: var(--apple-blue);

    color: white;

    border-color: var(--apple-blue);

    transform: translateY(-0.5px);

}



.btn-large {

    padding: 16px 32px;

    font-size: 16px;

}



.btn-sm {

    padding: 8px 16px;

    font-size: 12px;

}



/* Main Content Grid */

.content-grid {

    display: grid;

    grid-template-columns: 250px 1fr 300px;

    gap: 24px;

    margin-top: 24px;

    align-items: start;

}



/* Sidebar Styles - Profesyonel */

.sidebar {

    position: sticky;
    height: fit-content;

}



.sidebar-section {

    padding: 24px;

    margin-bottom: 20px;

}



.sidebar-section:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.sidebar-section h3 {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 16px;

    color: #0f172a;

    position: relative;

}



.sidebar-section h3::after {

    content: '';

    position: absolute;

    bottom: -6px;

    left: 0;

    width: 30px;

    height: 2px;

    background: #3b82f6;

    border-radius: 1px;

}



.category-list {

    list-style: none;

}



.category-list li {

    margin-bottom: 8px;

}



.category-list a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 8px;

    color: #64748b;

    text-decoration: none;

    transition: all 0.2s ease;

    font-weight: 500;

}



.category-list a:hover {

    background: #f8fafc;

    color: #0f172a;

}



.category-list i {

    width: 20px;

    color: #3b82f6;

    font-size: 16px;

}



/* Main Feed */

.main-feed {

    max-width: none;

    margin: 0;

    min-width: 0;

}



.welcome-section {

    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);

    border-radius: 16px;

    padding: 40px;

    text-align: center;

    color: white;

    margin-bottom: 24px;

    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

}



.welcome-content h1 {

    font-size: 32px;

    font-weight: 700;

    margin-bottom: 16px;

}



.welcome-content p {

    font-size: 18px;

    margin-bottom: 24px;

    opacity: 0.9;

    line-height: 1.6;

}



/* Post Styles - Profesyonel */

.post {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 24px;

    margin-bottom: 16px;

    transition: all 0.2s ease;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.post:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    border-color: #cbd5e1;

}



.post-header {

    display: flex;

    align-items: flex-start;

    margin-bottom: 16px;

}



.post-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    margin-right: 12px;

    object-fit: cover;

    border: 2px solid #e2e8f0;

}



.post-info {

    flex: 1;

}



.post-author {

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 2px;

    font-size: 16px;

}



.post-company {

    color: #64748b;

    font-size: 14px;

    display: block;

    margin-bottom: 2px;

}



.post-time {

    color: #94a3b8;

    font-size: 13px;

}



.post-menu {

    background: none;

    border: none;

    color: #64748b;

    cursor: pointer;

    padding: 8px;

    border-radius: 6px;

    transition: all 0.2s ease;

}



.post-menu:hover {

    background: #f1f5f9;

    color: #0f172a;

}



.post-content {

    margin-bottom: 16px;

}



.post-content p {

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 16px;

    color: #334155;

}



.post-content-link {

    text-decoration: none;

    color: inherit;

    display: block;

    cursor: pointer;

    transition: all 0.2s ease;

    border-radius: 8px;

    padding: 4px;

    margin: -4px;

}



.post-content-link:hover {

    color: inherit;

    text-decoration: none;

    background: rgba(59, 130, 246, 0.05);

}



.post-image img,

.post-video video {

    width: 100%;

    height: auto;

    border-radius: 8px;

    margin-top: 12px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    display: block;

    object-fit: contain;

}



/* Post Images Grid */

.post-images-grid {

    display: grid;

    gap: 4px;

    margin-top: 12px;

    border-radius: 8px;

    overflow: hidden;

    max-height: 400px;

}



.post-images-grid[data-count="1"] {

    grid-template-columns: 1fr;

    max-width: 500px;

    max-height: 350px;

}



.post-images-grid[data-count="2"] {

    grid-template-columns: 1fr 1fr;

}



.post-images-grid[data-count="3"] {

    grid-template-columns: 1fr 1fr 1fr;

}



.post-images-grid[data-count="4"] {

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

}



.post-image-item {

    position: relative;

    overflow: hidden;

    border-radius: 6px;

    background: #f8f9fa;

}



.post-image-item img,

.post-image-grid-item img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    cursor: pointer;

    transition: opacity 0.2s ease;

}



.post-image-item img:hover,

.post-image-grid-item img:hover {

    opacity: 0.9;

}



/* Grid video support */

.post-image-item video,

.post-image-grid-item video {

    width: 100%;

    height: 200px;

    object-fit: cover;

    border-radius: 6px;

}





/* Post Video */

.post-video {

    margin-top: 12px;

    max-width: 500px;

}



/* Legacy video support - convert to thumbnail */

.post-video .large-video {

    position: relative;

    width: 100%;

    max-height: 350px;

    border-radius: 8px;

    overflow: hidden;

    background: #000;

}



.post-video .large-video .play-button {

    width: 70px;

    height: 70px;

}



.post-video .large-video .play-button i {

    font-size: 28px;

    margin-left: 4px;

}



.post-video video {

    width: 100%;

    height: auto;

    max-height: 400px;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    display: block;

    object-fit: contain;

}



/* Post Link */

.post-link {

    margin-top: 12px;

}



.link-preview {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    background: #f8fafc;

    text-decoration: none;

    color: inherit;

    transition: all 0.2s ease;

}



.link-preview:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

}



.link-icon {

    width: 40px;

    height: 40px;

    background: #3b82f6;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 18px;

}



.link-content {

    flex: 1;

}



.link-content h4 {

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 4px;

    font-size: 14px;

}



.link-content p {

    color: #64748b;

    font-size: 13px;

    margin-bottom: 4px;

}



.link-url {

    color: #3b82f6;

    font-size: 12px;

}



/* Post Poll */

.post-poll {

    margin-top: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 16px;

    background: #f8fafc;

}



.poll-header {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    color: #0f172a;

    font-weight: 600;

}



.poll-header i {

    color: #3b82f6;

}



.poll-options {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.poll-option-item {

    width: 100%;

}



.poll-option-btn {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    background: white;

    cursor: pointer;

    transition: all 0.2s ease;

    text-align: left;

}



.poll-option-btn:hover {

    border-color: #3b82f6;

    background: #f0f9ff;

}



.poll-option-text {

    font-weight: 500;

    color: #0f172a;

}



.poll-option-votes {

    display: flex;

    gap: 8px;

    font-size: 12px;

    color: #64748b;

}



.poll-footer {

    display: flex;

    justify-content: space-between;

    margin-top: 12px;

    padding-top: 12px;

    border-top: 1px solid #e2e8f0;

    font-size: 12px;

    color: #64748b;

}



/* Post Location */

.post-location {

    margin-top: 12px;

}



.location-preview {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    background: #f8fafc;

}



.location-icon {

    width: 40px;

    height: 40px;

    background: #ef4444;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 18px;

}



.location-content {

    flex: 1;

}



.location-title {

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 4px;

    font-size: 14px;

}



.location-coordinates {

    color: #64748b;

    font-size: 12px;

}



.location-view-btn {

    background: #3b82f6;

    color: white;

    border: none;

    padding: 8px 12px;

    border-radius: 6px;

    font-size: 12px;

    cursor: pointer;

    transition: background 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

}



.location-view-btn:hover {

    background: #2563eb;

}



.post-actions {

    display: flex;

    justify-content: space-between;

    border-top: 1px solid #e2e8f0;

    padding-top: 16px;

}



.action-btn {

    background: none;

    border: none;

    color: #64748b;

    cursor: pointer;

    padding: 8px 12px;

    border-radius: 6px;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 14px;

    font-weight: 500;

}



.action-btn:hover {

    background: #f8fafc;

    color: #3b82f6;

}



.action-btn i {

    font-size: 16px;

}



/* Trending Section - Profesyonel */

.trending-startups {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.trending-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 8px;

    transition: all 0.2s ease;

    cursor: pointer;

    border: 1px solid transparent;

}



.trending-item:hover {

    background: #f8fafc;

    border-color: #e2e8f0;

    transform: translateY(-1px);

}



.trending-link {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: inherit;

    width: 100%;

}



.trending-image {

    flex-shrink: 0;

}



.trending-item img {

    width: 48px;

    height: 48px;

    border-radius: 8px;

    object-fit: cover;

    border: 1px solid #e2e8f0;

    transition: border-color 0.2s ease;

}



.trending-item:hover img {

    border-color: #3b82f6;

}



.trending-info {

    flex: 1;

    min-width: 0;

}



.trending-info h4 {

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 4px;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.trending-info p {

    font-size: 12px;

    color: #64748b;

    margin-bottom: 8px;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.trending-meta {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.trending-founder {

    font-size: 11px;

    color: #64748b;

    display: flex;

    align-items: center;

    gap: 4px;

}



.trending-founder i {

    color: #94a3b8;

    font-size: 10px;

}



.trending-date {

    font-size: 10px;

    color: #94a3b8;

}



.trending-more {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid #e2e8f0;

    text-align: center;

}



.trending-more .btn {

    width: 100%;

    justify-content: center;

    font-size: 13px;

    padding: 10px 16px;

}



.trending-empty {

    text-align: center;

    padding: 32px 20px;

    color: #64748b;

}



.trending-empty i {

    font-size: 32px;

    color: #cbd5e1;

    margin-bottom: 16px;

    display: block;

}



.trending-empty p {

    font-size: 14px;

    margin-bottom: 20px;

    color: #64748b;

}



.trending-empty .btn {

    width: 100%;

    justify-content: center;

    font-size: 13px;

    padding: 10px 16px;

}



/* Events Section - Profesyonel */

.events-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.event-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 8px;

    transition: all 0.2s ease;

    cursor: pointer;

}



.event-item:hover {

    background: #f8fafc;

}



.event-date {

    background: #3b82f6;

    color: white;

    border-radius: 8px;

    padding: 10px;

    text-align: center;

    min-width: 50px;

    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);

}



.event-date .day {

    display: block;

    font-size: 18px;

    font-weight: 700;

}



.event-date .month {

    display: block;

    font-size: 11px;

    text-transform: uppercase;

    font-weight: 500;

}



.event-info h4 {

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 2px;

    font-size: 14px;

}



.event-info p {

    font-size: 13px;

    color: #64748b;

}



/* Footer - Profesyonel */

.footer {

    background: #ffffff;

    border-top: 1px solid #e2e8f0;

    margin-top: 60px;

    padding: 40px 0 20px;

}



.footer-content {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 40px;

    margin-bottom: 30px;

}



.footer-section h4 {

    font-weight: 600;

    margin-bottom: 16px;

    color: #0f172a;

    font-size: 16px;

    position: relative;

}



.footer-section h4::after {

    content: '';

    position: absolute;

    bottom: -6px;

    left: 0;

    width: 25px;

    height: 2px;

    background: #3b82f6;

    border-radius: 1px;

}



.footer-section p {

    color: #64748b;

    margin-bottom: 16px;

    line-height: 1.6;

}



.footer-section ul {

    list-style: none;

}



.footer-section ul li {

    margin-bottom: 8px;

}



.footer-section ul li a {

    color: #64748b;

    text-decoration: none;

    transition: color 0.2s ease;

    font-weight: 500;

}



.footer-section ul li a:hover {

    color: #3b82f6;

}



.social-links {

    display: flex;

    gap: 16px;

}



.social-links a {

    color: #64748b;

    font-size: 20px;

    transition: all 0.2s ease;

    padding: 8px;

    border-radius: 6px;

}



.social-links a:hover {

    color: #3b82f6;

    background: #f8fafc;

}



.footer-bottom {

    text-align: center;

    padding-top: 20px;

    border-top: 1px solid #e2e8f0;

    color: #94a3b8;

    font-weight: 500;

}



.footer-legal {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

}



.legal-links {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}



.legal-links a {

    color: #94a3b8;

    text-decoration: none;

    font-size: 0.9rem;

    transition: color 0.3s ease;

}



.legal-links a:hover {

    color: #3b82f6;

    text-decoration: underline;

}



@media (max-width: 768px) {

    .legal-links {

        flex-direction: column;

        gap: 10px;

    }

}



/* Responsive Design */

@media (max-width: 1024px) {

    .content-grid {

        grid-template-columns: 1fr 2fr;

    }

    

    .right-sidebar {

        display: none;

    }

}



@media (max-width: 768px) {

    .content-grid {

        grid-template-columns: 1fr;

    }

    

    .left-sidebar {

        display: none;

    }

    

    .header-content {

        gap: 16px !important;

        padding: 16px 0 !important;

    }

    

    .search-container {

        margin: 0 !important;

        max-width: 100% !important;

        order: 2;

    }

    

    .nav {

        gap: 4px;

        padding: 4px;

        order: 1;

    }

    

    .nav-link {

        padding: 8px 12px;

        font-size: 13px;

    }

    

    .welcome-content h1 {

        font-size: 24px;

    }

    

    .welcome-content p {

        font-size: 16px;

    }

    

    .post {

        padding: 20px;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

        text-align: center;

    }

    

    /* Trending Startups Mobile */

    .trending-startups {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 16px;

    }

    

    .trending-item {

        flex-direction: column;

        text-align: center;

        padding: 16px;

    }

    

    .trending-link {

        flex-direction: column;

        text-align: center;

    }

    

    .trending-image img {

        width: 64px;

        height: 64px;

    }

    

    .trending-meta {

        align-items: center;

    }

}



@media (max-width: 480px) {

    .container {

        padding: 0 2px;

    }

    

    .welcome-section {

        padding: 24px 20px;

    }

    

    .btn {

        padding: 10px 20px;

        font-size: 13px;

    }

    

    .post-actions {

        flex-wrap: wrap;

        gap: 8px;

    }

    

    .action-btn {

        flex: 1;

        justify-content: center;

    }

}



/* Profesyonel Animasyonlar */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.post {

    animation: fadeInUp 0.4s ease-out;

}



.sidebar-section {

    animation: fadeInUp 0.4s ease-out;

}



/* Profesyonel Scrollbar */

::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: #f1f5f9;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: #94a3b8;

}



/* Hover Efektleri */

.sidebar-section:hover h3::after {

    width: 40px;

    transition: width 0.3s ease;

}



.btn:hover i {

    transform: scale(1.1);

    transition: all 0.2s ease;

}



/* Loading Animasyonu */

@keyframes pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.7; }

}



.loading {

    animation: pulse 1.5s ease-in-out infinite;

}



/* Post Creation Section - Using X.com style from above */



.post-creation-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 0;

}



.user-avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

}



.user-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.post-creation-btn {

    flex: 1;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 24px;

    padding: 10px 16px;

    text-align: left;

    color: #64748b;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 14px;

}



.post-creation-btn:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

}



.post-creation-actions {

    display: flex;

    gap: 8px;

}



.post-creation-actions .action-btn {

    flex: 1;

    background: none;

    border: none;

    padding: 8px 12px;

    border-radius: 8px;

    color: #64748b;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    font-size: 14px;

}



.post-creation-actions .action-btn:hover {

    background: #f1f5f9;

    color: #3b82f6;

}



/* Posts Section */

.posts-section {

    margin-bottom: 32px;

}



.posts-section h3 {

    font-size: 18px;

    font-weight: 600;

    color: #1e293b;

    margin-bottom: 16px;

    padding-bottom: 8px;

    border-bottom: 2px solid #e2e8f0;

}



/* Profile Suggestions */

.profile-suggestions {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.suggestion-item {

    display: flex;

    flex-direction: column;

    gap: 12px;

    padding: 16px;

    border-radius: 12px;

    transition: all 0.2s ease;

    background: #ffffff;

    border: 1px solid #f1f5f9;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    position: relative;

}



.suggestion-item:hover {

    background: #f8fafc;

    border-color: #e2e8f0;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);

    transform: translateY(-1px);

}



.suggestion-avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

    border: 2px solid #f1f5f9;

    transition: border-color 0.2s ease;

}



.suggestion-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.2s ease;

}



.suggestion-item:hover .suggestion-avatar {

    border-color: #3b82f6;

}



.suggestion-item:hover .suggestion-avatar img {

    transform: scale(1.05);

}



.suggestion-info {

    flex: 1;

    min-width: 0;

    overflow: hidden;

}



.suggestion-info h4 {

    font-size: 15px;

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 4px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.2;

}



.suggestion-info p {

    font-size: 13px;

    color: #64748b;

    margin-bottom: 4px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.3;

}



.follower-count {

    font-size: 12px;

    color: #94a3b8;

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 4px;

}



.follower-count::before {

    content: "👥";

    font-size: 10px;

}



.section-subtitle {

    font-size: 13px;

    color: #64748b;

    margin-bottom: 16px;

    font-weight: 400;

    display: flex;

    align-items: center;

    gap: 6px;

}



.section-subtitle::before {

    content: "🌟";

    font-size: 12px;

}



/* Profile Suggestions Başlık Özelleştirme */

.profile-suggestions-title {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 8px;

    color: #1e293b;

    display: flex;

    align-items: center;

    gap: 8px;

}



.profile-suggestions-title::before {

    content: "👥";

    font-size: 16px;

    background: linear-gradient(135deg, #3b82f6, #8b5cf6);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Follow Button */

.follow-btn {

    padding: 8px 16px;

    background: linear-gradient(135deg, #3b82f6, #2563eb);

    color: white;

    border: none;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    white-space: nowrap;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    width: 100%;

    height: 34px;

    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);

}



.follow-btn:hover {

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    transform: scale(1.02);

    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);

}



.follow-btn:active {

    transform: scale(0.98);

}



.follow-btn.following {

    background: linear-gradient(135deg, #10b981, #059669);

    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);

}



.follow-btn.following:hover {

    background: linear-gradient(135deg, #059669, #047857);

    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);

}



.follow-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

}



.follow-btn:disabled:hover {

    transform: none;

    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);

}



/* Post User Link */

.post-user-link {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: inherit;

    transition: opacity 0.2s ease;

    flex: 1;

}



.post-user-link:hover {

    opacity: 0.8;

}



.post-user-link .post-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #e2e8f0;

    transition: border-color 0.2s ease;

}



.post-user-link:hover .post-avatar {

    border-color: #3b82f6;

}



.post-user-link .post-info {

    flex: 1;

}



.post-user-link .post-author {

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 2px;

    font-size: 14px;

}



.post-user-link .post-company {

    font-size: 13px;

    color: #64748b;

    margin-bottom: 2px;

}



.post-user-link .post-time {

    font-size: 12px;

    color: #94a3b8;

}



/* Profile Suggestion Link */

.suggestion-link {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: inherit;

    transition: all 0.2s ease;

    flex: 1;

}



.suggestion-link:hover {

    color: #3b82f6;

}



.suggestion-link .suggestion-avatar img {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #e2e8f0;

    transition: border-color 0.2s ease;

}



.suggestion-link:hover .suggestion-avatar img {

    border-color: #3b82f6;

}



.suggestion-link .suggestion-info {

    flex: 1;

    max-width: 150px;

}



.suggestion-link .suggestion-info h4 {

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 2px;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;

}



.suggestion-link .suggestion-info p {

    font-size: 13px;

    color: #64748b;

    margin-bottom: 2px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;

}



.suggestion-link .follower-count {

    font-size: 12px;

    color: #94a3b8;

}



/* Follow Button States */

.btn.following {

    background: #10b981;

    color: white;

}



.btn.following:hover {

    background: #059669;

}



.btn.following i {

    color: white;

}



.post-actions {

    display: flex;

    justify-content: space-between;

    border-top: 1px solid #e2e8f0;

    padding-top: 16px;

}



/* Messages Menu */

.messages-menu {

    position: relative;

    margin-right: 15px;

}



.messages-btn {

    background: none;

    border: none;

    color: #64748b;

    font-size: 18px;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    transition: all 0.3s ease;

    position: relative;

}



.messages-btn:hover {

    background-color: #f1f5f9;

    color: #1e293b;

}



.message-badge {

    position: absolute;

    top: 2px;

    right: 2px;

    background: #ef4444;

    color: white;

    font-size: 10px;

    font-weight: 600;

    padding: 2px 6px;

    border-radius: 10px;

    min-width: 16px;

    height: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

}



/* Messages Dropdown */

.messages-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    width: 350px;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.3s ease;

    max-height: 400px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.messages-dropdown.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.messages-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 20px;

    border-bottom: 1px solid #f1f5f9;

    flex-shrink: 0;

}



.messages-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

}



.view-all-messages {

    background: none;

    border: none;

    color: #3b82f6;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    padding: 4px 8px;

    border-radius: 6px;

    transition: all 0.2s ease;

}



.view-all-messages:hover {

    background: #eff6ff;

    color: #2563eb;

}



.messages-list {

    flex: 1;

    overflow-y: auto;

    max-height: 280px;

}



.message-preview-item {

    display: flex;

    align-items: center;

    padding: 12px 20px;

    border-bottom: 1px solid #f8fafc;

    cursor: pointer;

    transition: all 0.2s ease;

    position: relative;

}



.message-preview-item:hover {

    background: #f8fafc;

}



.message-preview-item:last-child {

    border-bottom: none;

}



.message-preview-item.unread {

    background: #fefefe;

}



.message-preview-item.unread::before {

    content: '';

    position: absolute;

    left: 8px;

    top: 50%;

    transform: translateY(-50%);

    width: 4px;

    height: 4px;

    background: #3b82f6;

    border-radius: 50%;

}



.message-preview-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

    margin-right: 12px;

    border: 2px solid #e5e7eb;

    flex-shrink: 0;

}



.message-preview-content {

    flex: 1;

    min-width: 0;

}



.message-preview-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2px;

}



.message-preview-name {

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    margin: 0;

}



.message-preview-time {

    font-size: 11px;

    color: #64748b;

    flex-shrink: 0;

    margin-left: 8px;

}



.message-preview-text {

    font-size: 13px;

    color: #64748b;

    margin: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.message-preview-item.unread .message-preview-name {

    color: #1e293b;

}



.message-preview-item.unread .message-preview-text {

    color: #374151;

    font-weight: 500;

}



.messages-footer {

    padding: 12px 20px;

    border-top: 1px solid #f1f5f9;

    text-align: center;

    flex-shrink: 0;

}



.view-all-messages-link {

    color: #3b82f6;

    text-decoration: none;

    font-size: 13px;

    font-weight: 500;

    padding: 8px 16px;

    border-radius: 6px;

    transition: all 0.2s ease;

    display: inline-block;

}



.view-all-messages-link:hover {

    background: #eff6ff;

    color: #2563eb;

}



.no-messages {

    padding: 40px 20px;

    text-align: center;

    color: #64748b;

}



.no-messages i {

    font-size: 32px;

    margin-bottom: 12px;

    color: #cbd5e1;

}



.no-messages p {

    margin: 0;

    font-size: 14px;

}



/* Notifications Menu */

.notifications-menu {

    position: relative;

    margin-right: 20px;

}



.notifications-btn {

    position: relative;

    background: none;

    border: none;

    font-size: 18px;

    color: #64748b;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    transition: all 0.2s ease;

}



.notifications-btn:hover {

    background: #f1f5f9;

    color: #3b82f6;

}



.notification-badge {

    position: absolute;

    top: 0;

    right: 0;

    background: #ef4444;

    color: white;

    font-size: 10px;

    font-weight: 600;

    padding: 2px 6px;

    border-radius: 10px;

    min-width: 18px;

    text-align: center;

    line-height: 14px;

}



.notifications-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    width: 350px;

    max-height: 500px;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    z-index: 1000;

    display: none;

    overflow: hidden;

}



.notifications-dropdown.show {

    display: block;

}



.notifications-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 20px;

    border-bottom: 1px solid #e2e8f0;

    background: #f8fafc;

}



.notifications-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #0f172a;

}



.mark-all-read {

    background: none;

    border: none;

    color: #3b82f6;

    font-size: 12px;

    cursor: pointer;

    padding: 4px 8px;

    border-radius: 4px;

    transition: background 0.2s ease;

}



.mark-all-read:hover {

    background: #dbeafe;

}



.notifications-list {

    max-height: 350px;

    overflow-y: auto;

}



.notification-item {

    display: flex;

    align-items: flex-start;

    padding: 12px 20px;

    border-bottom: 1px solid #f1f5f9;

    transition: background 0.2s ease;

    cursor: pointer;

}



.notification-item:hover {

    background: #f8fafc;

}



.notification-item.unread {

    background: #eff6ff;

}



.notification-item.unread:hover {

    background: #dbeafe;

}



.notification-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 12px;

    flex-shrink: 0;

}



.notification-content {

    flex: 1;

    min-width: 0;

}



.notification-text {

    font-size: 14px;

    color: #374151;

    line-height: 1.4;

    margin-bottom: 4px;

}



.notification-text strong {

    color: #0f172a;

    font-weight: 600;

}



.notification-time {

    font-size: 12px;

    color: #9ca3af;

}



.notification-footer {

    padding: 12px 20px;

    border-top: 1px solid #e2e8f0;

    text-align: center;

}



.view-all-notifications {

    color: #3b82f6;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    transition: color 0.2s ease;

}



.view-all-notifications:hover {

    color: #2563eb;

}



/* Empty notifications state */

.notifications-empty {

    padding: 40px 20px;

    text-align: center;

    color: #9ca3af;

}



.notifications-empty i {

    font-size: 48px;

    margin-bottom: 16px;

    opacity: 0.5;

}



.notifications-empty p {

    margin: 0;

    font-size: 14px;

}



/* Header adjustments for notifications */

.header-actions.logged-in {

    display: flex;

    align-items: center;

    gap: 16px;

}



.user-menu {

    display: flex;

    align-items: center;

}



/* Image Viewer Modal Styles */

.image-viewer-modal-content {

    width: 95vw;

    height: 95vh;

    max-width: 1400px;

    max-height: 900px;

    border-radius: 12px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.image-viewer-modal-header {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding: 8px 12px;

    color: white;

    min-height: 40px;

}



.image-viewer-modal-header .modal-close {

    background: none;

    border: none;

    color: gray;

    font-size: 20px;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    transition: background 0.2s ease;

}



.image-viewer-modal-header .modal-close:hover {

    background: rgba(255, 255, 255, 0.1);

}



.image-viewer-modal-body {

    flex: 1;

    display: flex;

    overflow: hidden;

    min-height: 80vh;

}



.image-viewer-layout {

    display: flex;

    width: 100%;

    height: 100%;

}



.image-viewer-main {

    flex: 3;

    position: relative;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 70vh;

}



.image-container {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    min-height: 70vh;

}



.main-image {

    width: auto !important;

    height: auto !important;

    min-width: 60% !important;

    min-height: 60vh !important;

    max-width: 90% !important;

    max-height: 85vh !important;

    object-fit: contain !important;

    cursor: zoom-in;

    border-radius: 8px;

}



/* Görsel navigasyon butonları */

.image-navigation {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 100%;

    display: flex;

    justify-content: space-between;

    padding: 0 20px;

    pointer-events: none;

    z-index: 10;

}



/* Specific positioning for navigation buttons */

.prev-btn {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

}



.next-btn {

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

}



.nav-btn {

    background: rgba(0, 0, 0, 0.5);

    color: white;

    border: none;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    pointer-events: auto;

}



.nav-btn:hover {

    background: rgba(0, 0, 0, 0.7);

    transform: scale(1.1);

}



.nav-btn:disabled {

    opacity: 0.3;

    cursor: not-allowed;

    transform: none;

}



.nav-btn i {

    font-size: 18px;

}



/* Görsel sayacı */

.image-counter {

    position: absolute;

    top: 20px;

    left: 20px;

    background: rgba(0, 0, 0, 0.5);

    color: white;

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 14px;

    font-weight: 500;

}



/* Sağ taraf - Gönderi içeriği ve yorumlar */

.image-viewer-sidebar {

    width: 350px;

    min-width: 350px;

    background: white;

    border-left: 1px solid #e5e7eb;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.post-content-sidebar {

    display: flex;

    flex-direction: column;

    height: 100%;

}



/* Gönderi başlığı */

.post-header-sidebar {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 20px;

    border-bottom: 1px solid #e5e7eb;

    background: #f9fafb;

}



.post-avatar-sidebar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.post-author-sidebar {

    font-size: 16px;

    font-weight: 600;

    color: #1f2937;

    margin: 0 0 4px 0;

}



.post-time-sidebar {

    font-size: 14px;

    color: #6b7280;

}



/* Gönderi içeriği */

.post-text-sidebar {

    padding: 20px;

    border-bottom: 1px solid #e5e7eb;

}



.post-text-sidebar p {

    margin: 0;

    line-height: 1.6;

    color: #374151;

}



/* Gönderi etkileşimleri */

.post-actions-sidebar {

    display: flex;

    gap: 20px;

    padding: 16px 20px;

    border-bottom: 1px solid #e5e7eb;

}



.action-btn-sidebar {

    background: none;

    border: none;

    color: #6b7280;

    font-size: 14px;

    cursor: pointer;

    padding: 8px 12px;

    border-radius: 6px;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

}



.action-btn-sidebar:hover {

    background: #f3f4f6;

    color: #374151;

}



.action-btn-sidebar.liked {

    color: #ef4444;

}



.action-btn-sidebar.liked i {

    color: #ef4444;

}



/* Yorumlar bölümü */

.comments-section-sidebar {

    flex: 1;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.comments-header {

    padding: 16px 20px;

    border-bottom: 1px solid #e5e7eb;

    background: #f9fafb;

}



.comments-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #1f2937;

}



.comments-list-sidebar {

    flex: 1;

    overflow-y: auto;

    padding: 0;

}



.comment-form-sidebar {

    padding: 16px 20px;

    border-top: 1px solid #e5e7eb;

    background: #f9fafb;

}



.comment-input-container-sidebar {

    display: flex;

    gap: 12px;

    align-items: flex-end;

}



.comment-user-avatar-sidebar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.comment-input-wrapper-sidebar {

    flex: 1;

    display: flex;

    gap: 8px;

    align-items: flex-end;

}



.comment-input-wrapper-sidebar textarea {

    flex: 1;

    border: 1px solid #d1d5db;

    border-radius: 20px;

    padding: 8px 16px;

    font-size: 14px;

    resize: none;

    min-height: 36px;

    max-height: 100px;

    outline: none;

    transition: border-color 0.2s ease;

}



.comment-input-wrapper-sidebar textarea:focus {

    border-color: #3b82f6;

}



.comment-submit-btn-sidebar {

    background: #3b82f6;

    color: white;

    border: none;

    border-radius: 50%;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: background 0.2s ease;

    flex-shrink: 0;

}



.comment-submit-btn-sidebar:hover {

    background: #2563eb;

}



/* Responsive tasarım */

@media (max-width: 768px) {

    .image-viewer-modal-content {

        width: 98vw;

        height: 98vh;

        max-width: none;

        max-height: none;

    }

    

    .image-viewer-sidebar {

        display: none;

    }

    

    .image-viewer-main {

        width: 100%;

        min-height: 60vh;

    }

    

    .main-image {

        min-width: 80%;

        min-height: 50vh;

        max-height: 80vh;

        max-width: 95%;

    }

    

    .nav-btn {

        width: 40px;

        height: 40px;

    }

    

    .nav-btn i {

        font-size: 16px;

    }

}



/* Professional Post Modal Styles */

.modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 10000;

    transition: all 0.3s ease;

}



/* Image Viewer Modal Specific Overrides */

#imageViewerModal.modal {

    align-items: center;

    justify-content: center;

    padding: 0;

}



#imageViewerModal .modal-content {

    width: 95vw !important;

    height: 95vh !important;

    max-width: 1400px !important;

    max-height: 900px !important;

    margin: 0 !important;

}



#imageViewerModal .image-viewer-modal-content {

    width: 95vw !important;

    height: 95vh !important;

    max-width: 1400px !important;

    max-height: 900px !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    display: flex !important;

    flex-direction: column !important;

}



#imageViewerModal .image-viewer-modal-body {

    flex: 1 !important;

    display: flex !important;

    overflow: hidden !important;

    min-height: 80vh !important;

    height: auto !important;

}



#imageViewerModal .image-viewer-layout {

    display: flex !important;

    width: 100% !important;

    height: 100% !important;

}



#imageViewerModal .image-viewer-main {

    flex: 3 !important;

    position: relative !important;

    background: #000 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 70vh !important;

}



#imageViewerModal .image-container {

    position: relative !important;

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 10px !important;

    min-height: 70vh !important;

}



#imageViewerModal .main-image {

    width: auto !important;

    height: auto !important;

    min-width: 70% !important;

    min-height: 70vh !important;

    max-width: 95% !important;

    max-height: 90vh !important;

    object-fit: contain !important;

    cursor: zoom-in !important;

    border-radius: 8px !important;

}



/* Image Viewer Navigation Buttons Specific Overrides */

#imageViewerModal .image-navigation {

    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 100% !important;

    height: auto !important;

    display: flex !important;

    justify-content: space-between !important;

    padding: 0 20px !important;

    pointer-events: none !important;

    z-index: 100 !important;

}



#imageViewerModal .prev-btn {

    position: absolute !important;

    left: 20px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    background: rgba(0, 0, 0, 0.7) !important;

    color: white !important;

    border: none !important;

    border-radius: 50% !important;

    width: 50px !important;

    height: 50px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    z-index: 101 !important;

}



#imageViewerModal .next-btn {

    position: absolute !important;

    right: 20px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    background: rgba(0, 0, 0, 0.7) !important;

    color: white !important;

    border: none !important;

    border-radius: 50% !important;

    width: 50px !important;

    height: 50px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    z-index: 101 !important;

}



#imageViewerModal .prev-btn:hover,

#imageViewerModal .next-btn:hover {

    background: rgba(0, 0, 0, 0.9) !important;

    transform: translateY(-50%) scale(1.1) !important;

}



#imageViewerModal .prev-btn:disabled,

#imageViewerModal .next-btn:disabled {

    opacity: 0.3 !important;

    cursor: not-allowed !important;

    transform: translateY(-50%) !important;

}



#imageViewerModal .nav-btn i {

    font-size: 18px !important;

}



#imageViewerModal .image-counter {

    position: absolute !important;

    top: 20px !important;

    left: 20px !important;

    background: rgba(0, 0, 0, 0.7) !important;

    color: white !important;

    padding: 8px 16px !important;

    border-radius: 20px !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    z-index: 102 !important;

}



/* Mobile specific overrides for Image Viewer */

@media (max-width: 768px) {

    #imageViewerModal .image-viewer-modal-content {

        width: 98vw !important;

        height: 98vh !important;

        max-width: none !important;

        max-height: none !important;

    }

    

    #imageViewerModal .image-viewer-sidebar {

        display: none !important;

    }

    

    #imageViewerModal .image-viewer-main {

        width: 100% !important;

        min-height: 80vh !important;

    }

    

    #imageViewerModal .main-image {

        min-width: 90% !important;

        min-height: 60vh !important;

        max-height: 85vh !important;

        max-width: 98% !important;

    }

    

    #imageViewerModal .prev-btn {

        left: 10px !important;

        width: 40px !important;

        height: 40px !important;

    }

    

    #imageViewerModal .next-btn {

        right: 10px !important;

        width: 40px !important;

        height: 40px !important;

    }

    

    #imageViewerModal .nav-btn i {

        font-size: 16px !important;

    }

}



.modal.show {

    display: flex;

    opacity: 1;

}



.modal-backdrop {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    cursor: pointer;

}



.post-modal-content {

    width: 90vw;

    max-width: 650px;

    max-height: 85vh;

    background: white;

    border-radius: 20px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);

    position: relative;

    transform: scale(0.9);

    transition: all 0.3s ease;

}



.modal.show .post-modal-content {

    transform: scale(1);

}



.post-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 24px 28px;

    border-bottom: 1px solid #e5e7eb;

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    min-height: 80px;

}



.modal-title-section {

    flex: 1;

}



.modal-title {

    font-size: 20px;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 4px 0;

    display: flex;

    align-items: center;

    gap: 10px;

}



.modal-title i {

    color: #3b82f6;

    font-size: 18px;

}



.modal-subtitle {

    font-size: 14px;

    color: #64748b;

    margin: 0;

    font-weight: 400;

}



.modal-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}



.post-modal-header .modal-close {

    background: none;

    border: none;

    color: #6b7280;

    font-size: 18px;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    transition: all 0.2s ease;

}



.post-modal-header .modal-close:hover {

    background: #e5e7eb;

    color: #374151;

}



.post-submit-btn {

    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

    color: white;

    border: none;

    border-radius: 25px;

    padding: 12px 24px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    gap: 8px;

    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

    position: relative;

    overflow: hidden;

    min-width: 120px;

    justify-content: center;

}



.post-submit-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.5s ease;

}



.post-submit-btn:hover::before {

    left: 100%;

}



.btn-text, .btn-loading {

    display: flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

}



.post-submit-btn:hover:not(:disabled) {

    background: #2563eb;

    transform: translateY(-1px);

}



.post-submit-btn:disabled {

    background: #9ca3af;

    cursor: not-allowed;

    transform: none;

}



.post-modal-body {

    flex: 1;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.post-form {

    height: 100%;

    display: flex;

    flex-direction: column;

}



.post-composer {

    display: flex;

    gap: 16px;

    padding: 24px;

    flex: 1;

    overflow: hidden;

}



.post-user-info {

    flex-shrink: 0;

}



.post-user-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #e5e7eb;

}



.post-content-area {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-width: 0;

}



.post-content-area textarea {

    border: none;

    outline: none;

    resize: none;

    font-size: 16px;

    line-height: 1.5;

    color: #1f2937;

    background: transparent;

    min-height: 120px;

    max-height: 300px;

    font-family: inherit;

}



.post-content-area textarea::placeholder {

    color: #9ca3af;

}



/* Post Preview Styles */

.post-preview {

    margin-top: 16px;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    overflow: hidden;

    background: #f9fafb;

}



.preview-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    background: #f3f4f6;

    border-bottom: 1px solid #e5e7eb;

}



.preview-header h4 {

    margin: 0;

    font-size: 14px;

    font-weight: 600;

    color: #374151;

}



.preview-close-btn {

    background: none;

    border: none;

    color: #6b7280;

    font-size: 14px;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.preview-close-btn:hover {

    background: #e5e7eb;

    color: #374151;

}



.preview-content {

    padding: 16px;

}



.preview-text {

    margin-bottom: 16px;

    line-height: 1.6;

    color: #1f2937;

    white-space: pre-wrap;

}



.preview-media {

    margin-bottom: 16px;

}



.preview-media-grid {

    display: grid;

    gap: 8px;

    border-radius: 8px;

    overflow: hidden;

}



.preview-media-grid.single {

    grid-template-columns: 1fr;

}



.preview-media-grid.double {

    grid-template-columns: 1fr 1fr;

}



.preview-media-grid.triple {

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

}



.preview-media-grid.triple .preview-media-item:first-child {

    grid-row: 1 / 3;

}



.preview-media-grid.quad {

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

}



.preview-media-item {

    position: relative;

    aspect-ratio: 1;

    overflow: hidden;

    border-radius: 8px;

    background: #f3f4f6;

}



.preview-media-item img,

.preview-media-item video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.preview-media-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.2s ease;

}



.preview-media-item:hover .preview-media-overlay {

    opacity: 1;

}



.preview-media-actions {

    display: flex;

    gap: 8px;

}



.preview-media-btn {

    background: rgba(255, 255, 255, 0.9);

    border: none;

    border-radius: 50%;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    color: #374151;

}



.preview-media-btn:hover {

    background: white;

    transform: scale(1.1);

}



.preview-attachments {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.preview-attachment-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

}



.preview-attachment-icon {

    width: 32px;

    height: 32px;

    border-radius: 6px;

    background: #f3f4f6;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6b7280;

    flex-shrink: 0;

}



.preview-attachment-info {

    flex: 1;

    min-width: 0;

}



.preview-attachment-title {

    font-size: 14px;

    font-weight: 500;

    color: #1f2937;

    margin-bottom: 2px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.preview-attachment-url {

    font-size: 12px;

    color: #6b7280;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.preview-attachment-remove {

    background: none;

    border: none;

    color: #ef4444;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: background 0.2s ease;

}



.preview-attachment-remove:hover {

    background: #fef2f2;

}



/* Post Attachments */

.post-attachments {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid #e5e7eb;

}



.attachment-buttons {

    display: flex;

    gap: 8px;

    margin-bottom: 16px;

}



.attachment-btn {

    background: none;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 8px 12px;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 14px;

}



.attachment-btn:hover {

    background: #f3f4f6;

    border-color: #d1d5db;

    color: #374151;

}



.attachment-btn i {

    font-size: 16px;

}



.post-options {

    display: flex;

    gap: 8px;

}



.post-option-btn {

    background: none;

    border: 1px solid #e5e7eb;

    border-radius: 6px;

    padding: 6px 12px;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

}



.post-option-btn:hover {

    background: #f3f4f6;

    border-color: #d1d5db;

    color: #374151;

}



/* Enhanced Post User Info */

.post-user-info {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    padding: 0 0 20px 0;

    border-bottom: 1px solid #f1f5f9;

}



.user-avatar-container {

    position: relative;

}



.post-user-avatar {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #e5e7eb;

    transition: border-color 0.2s ease;

}



.user-status-indicator {

    position: absolute;

    bottom: 2px;

    right: 2px;

    width: 14px;

    height: 14px;

    background: #10b981;

    border: 2px solid white;

    border-radius: 50%;

}



.user-info-text h4 {

    font-size: 16px;

    font-weight: 600;

    color: #0f172a;

    margin: 0 0 2px 0;

}



.user-info-text p {

    font-size: 13px;

    color: #64748b;

    margin: 0;

}



/* Enhanced Textarea Container */

.textarea-container {

    position: relative;

}



.textarea-container textarea {

    border: none;

    outline: none;

    resize: none;

    font-size: 16px;

    line-height: 1.6;

    color: #1f2937;

    background: transparent;

    min-height: 120px;

    max-height: 300px;

    width: 100%;

    font-family: inherit;

    padding: 16px 0;

    transition: all 0.2s ease;

}



.textarea-container textarea:focus {

    transform: scale(1.01);

}



.textarea-container textarea::placeholder {

    color: #9ca3af;

    font-style: italic;

}



.textarea-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 8px;

    padding-top: 12px;

    border-top: 1px solid #f1f5f9;

}



/* Character Counter */

.character-counter {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    color: #64748b;

}



.char-count {

    font-weight: 600;

    transition: color 0.2s ease;

}



.char-count.warning {

    color: #f59e0b;

}



.char-count.danger {

    color: #ef4444;

}



.char-progress {

    width: 40px;

    height: 4px;

    background: #e5e7eb;

    border-radius: 2px;

    overflow: hidden;

}



.char-progress-bar {

    height: 100%;

    background: linear-gradient(90deg, #10b981 0%, #3b82f6 50%, #f59e0b 80%, #ef4444 100%);

    border-radius: 2px;

    transition: width 0.2s ease;

    width: 0%;

}



/* Writing Suggestions */

.writing-suggestions {

    padding: 12px;

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    border-radius: 8px;

    margin-top: 12px;

}



.suggestion-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: #1e40af;

}



.suggestion-item i {

    color: #3b82f6;

}



/* Enhanced Preview */

.post-preview {

    margin-top: 20px;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    overflow: hidden;

    background: #fafbfc;

    animation: slideDown 0.3s ease;

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.preview-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    background: #f3f4f6;

    border-bottom: 1px solid #e5e7eb;

}



.preview-title {

    display: flex;

    align-items: center;

    gap: 8px;

}



.preview-title h4 {

    margin: 0;

    font-size: 14px;

    font-weight: 600;

    color: #374151;

}



.preview-title i {

    color: #3b82f6;

    font-size: 14px;

}



.preview-toggle {

    background: none;

    border: none;

    color: #6b7280;

    font-size: 14px;

    cursor: pointer;

    padding: 4px 8px;

    border-radius: 6px;

    transition: all 0.2s ease;

}



.preview-toggle:hover {

    background: #e5e7eb;

    color: #374151;

}



.preview-content {

    padding: 16px;

}



.preview-post {

    background: white;

    border-radius: 12px;

    padding: 16px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.preview-post-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}



.preview-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.preview-user-info h5 {

    font-size: 14px;

    font-weight: 600;

    color: #1f2937;

    margin: 0 0 2px 0;

}



.preview-user-info span {

    font-size: 12px;

    color: #6b7280;

}



.preview-text {

    font-size: 14px;

    line-height: 1.6;

    color: #1f2937;

    margin-bottom: 12px;

    white-space: pre-wrap;

}



.preview-actions {

    display: flex;

    gap: 16px;

    padding-top: 12px;

    border-top: 1px solid #f3f4f6;

}



.preview-action-btn {

    background: none;

    border: none;

    color: #6b7280;

    font-size: 13px;

    cursor: pointer;

    padding: 4px 8px;

    border-radius: 6px;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

}



.preview-action-btn:hover {

    background: #f3f4f6;

    color: #374151;

}



/* Enhanced Attachment Buttons */

.attachment-buttons {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    gap: 8px;

    margin-bottom: 16px;

}



/* New Modal Action Buttons */

.action-buttons {

    display: flex;

    gap: 8px;

    align-items: center;

}



.preview-toggle-btn,

.draft-save-btn {

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 8px 12px;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 14px;

}



.preview-toggle-btn:hover,

.draft-save-btn:hover {

    background: #f1f5f9;

    color: #374151;

    border-color: #d1d5db;

}



.preview-toggle-btn.active {

    background: #3b82f6;

    color: white;

    border-color: #3b82f6;

}



/* Format Toolbar */

.textarea-wrapper {

    position: relative;

}



.format-toolbar {

    display: flex;

    gap: 4px;

    padding: 8px 12px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-top: none;

    border-radius: 0 0 8px 8px;

    flex-wrap: wrap;

}



.format-btn {

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    padding: 6px 8px;

    border-radius: 4px;

    transition: all 0.2s ease;

    font-size: 14px;

}



.format-btn:hover {

    background: #e5e7eb;

    color: #374151;

}



.format-btn.active {

    background: #3b82f6;

    color: white;

}



/* Post Stats */

.post-stats {

    display: flex;

    gap: 16px;

    margin-top: 8px;

    padding: 8px 0;

    border-top: 1px solid #f3f4f6;

}



.stat-item {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    color: #6b7280;

}



.stat-item i {

    font-size: 12px;

}



/* Drag & Drop Zone */

.drag-drop-zone {

    border: 2px dashed #d1d5db;

    border-radius: 12px;

    padding: 32px;

    text-align: center;

    background: #f9fafb;

    margin-bottom: 16px;

    transition: all 0.3s ease;

}



.drag-drop-zone.drag-over {

    border-color: #3b82f6;

    background: #eff6ff;

    transform: scale(1.02);

}



.drag-drop-content h4 {

    margin: 12px 0 8px;

    color: #374151;

    font-weight: 600;

}



.drag-drop-content p {

    color: #6b7280;

    margin-bottom: 8px;

}



.drag-drop-content small {

    color: #9ca3af;

    font-size: 11px;

}



.drag-drop-icon {

    font-size: 48px;

    color: #9ca3af;

    margin-bottom: 16px;

}



.browse-btn {

    background: none;

    border: none;

    color: #3b82f6;

    cursor: pointer;

    text-decoration: underline;

    font-weight: 500;

}



/* File Preview Area */

.file-preview-area {

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    margin-bottom: 16px;

    overflow: hidden;

}



.file-preview-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    background: #f1f5f9;

    border-bottom: 1px solid #e5e7eb;

}



.file-preview-header h4 {

    margin: 0;

    font-size: 14px;

    color: #374151;

    display: flex;

    align-items: center;

    gap: 8px;

}



.clear-all-btn {

    background: #ef4444;

    color: white;

    border: none;

    padding: 6px 12px;

    border-radius: 6px;

    font-size: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.clear-all-btn:hover {

    background: #dc2626;

}



.file-preview-list {

    padding: 16px;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 12px;

}



.file-preview-item {

    position: relative;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    overflow: hidden;

}



.file-preview-image {

    width: 100%;

    height: 80px;

    object-fit: cover;

    background: #f3f4f6;

    display: flex;

    align-items: center;

    justify-content: center;

}



.file-preview-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.file-preview-info {

    padding: 8px;

}



.file-preview-name {

    font-size: 11px;

    color: #374151;

    margin-bottom: 4px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.file-preview-size {

    font-size: 10px;

    color: #9ca3af;

}



.file-remove-btn {

    position: absolute;

    top: 4px;

    right: 4px;

    background: rgba(239, 68, 68, 0.9);

    color: white;

    border: none;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    cursor: pointer;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.file-remove-btn:hover {

    background: #dc2626;

}



/* Attachment Count Badges */

.attachment-count {

    position: absolute;

    top: -4px;

    right: -4px;

    background: #ef4444;

    color: white;

    border-radius: 50%;

    width: 18px;

    height: 18px;

    font-size: 10px;

    font-weight: bold;

    display: flex;

    align-items: center;

    justify-content: center;

}



.attachment-btn {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    padding: 12px 8px;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    font-weight: 500;

    position: relative;

    overflow: hidden;

}



.attachment-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);

    transition: left 0.3s ease;

}



.attachment-btn:hover::before {

    left: 100%;

}



.attachment-btn:hover {

    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

    border-color: #3b82f6;

    color: #1e40af;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);

}



.attachment-btn.active {

    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

    color: white;

    border-color: #2563eb;

}



.attachment-btn i {

    font-size: 18px;

    transition: transform 0.2s ease;

}



.attachment-btn:hover i {

    transform: scale(1.1);

}



.attachment-btn span {

    font-weight: 500;

}



/* Privacy Selector */

.privacy-selector {

    position: relative;

}



.privacy-btn {

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    padding: 8px 12px;

    color: #64748b;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    font-weight: 500;

}



.privacy-btn:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

    color: #475569;

}



.privacy-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    margin-top: 4px;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    z-index: 1000;

    min-width: 200px;

    overflow: hidden;

}



.privacy-option {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    cursor: pointer;

    transition: background 0.2s ease;

}



.privacy-option:hover {

    background: #f8fafc;

}



.privacy-option i {

    width: 18px;

    color: #6b7280;

}



/* Advanced Features Styles */



/* Link Preview */

.link-preview {

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    margin-bottom: 16px;

    overflow: hidden;

}



.link-preview-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    background: #f1f5f9;

    border-bottom: 1px solid #e5e7eb;

}



.link-preview-header h4 {

    margin: 0;

    font-size: 14px;

    color: #374151;

    display: flex;

    align-items: center;

    gap: 8px;

}



.link-preview-header button {

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.link-preview-header button:hover {

    background: #e5e7eb;

    color: #374151;

}



.link-preview-content {

    display: flex;

    padding: 16px;

    gap: 12px;

}



.link-preview-image {

    width: 80px;

    height: 80px;

    border-radius: 8px;

    overflow: hidden;

    flex-shrink: 0;

    background: #f3f4f6;

}



.link-preview-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.link-preview-info {

    flex: 1;

}



.link-preview-info h5 {

    margin: 0 0 8px 0;

    font-size: 14px;

    font-weight: 600;

    color: #1f2937;

    line-height: 1.4;

}



.link-preview-info p {

    margin: 0 0 8px 0;

    font-size: 13px;

    color: #6b7280;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.link-preview-info span {

    font-size: 12px;

    color: #9ca3af;

}



/* Poll Creator */

.poll-creator {

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    margin-bottom: 16px;

    overflow: hidden;

}



.poll-creator-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    background: #f1f5f9;

    border-bottom: 1px solid #e5e7eb;

}



.poll-creator-header h4 {

    margin: 0;

    font-size: 14px;

    color: #374151;

    display: flex;

    align-items: center;

    gap: 8px;

}



.poll-creator-header button {

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.poll-creator-header button:hover {

    background: #e5e7eb;

    color: #374151;

}



.poll-creator-content {

    padding: 16px;

}



.poll-creator-content input[type="text"] {

    width: 100%;

    padding: 12px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 14px;

    margin-bottom: 16px;

    transition: border-color 0.2s ease;

}



.poll-creator-content input[type="text"]:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



.poll-options {

    margin-bottom: 16px;

}



.poll-option {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 8px;

}



.poll-option input {

    flex: 1;

    padding: 10px 12px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 14px;

    transition: border-color 0.2s ease;

}



.poll-option input:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



.remove-option {

    background: #ef4444;

    color: white;

    border: none;

    border-radius: 50%;

    width: 24px;

    height: 24px;

    cursor: pointer;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

}



.remove-option:hover {

    background: #dc2626;

}



.add-poll-option {

    background: #f3f4f6;

    border: 1px dashed #d1d5db;

    color: #6b7280;

    padding: 10px 16px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

    width: 100%;

}



.add-poll-option:hover {

    background: #f9fafb;

    border-color: #9ca3af;

    color: #374151;

}



.poll-settings {

    display: flex;

    gap: 16px;

    align-items: center;

    padding-top: 16px;

    border-top: 1px solid #e5e7eb;

}



.poll-settings label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    color: #374151;

    cursor: pointer;

}



.poll-settings select {

    padding: 6px 8px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-size: 13px;

    background: white;

}



.poll-settings input[type="checkbox"] {

    margin: 0;

}



/* Location Picker */

.location-picker {

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    margin-bottom: 16px;

    overflow: hidden;

}



.location-picker-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    background: #f1f5f9;

    border-bottom: 1px solid #e5e7eb;

}



.location-picker-header h4 {

    margin: 0;

    font-size: 14px;

    color: #374151;

    display: flex;

    align-items: center;

    gap: 8px;

}



.location-picker-header button {

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.location-picker-header button:hover {

    background: #e5e7eb;

    color: #374151;

}



.location-picker-content {

    padding: 16px;

}



.location-search {

    display: flex;

    gap: 8px;

    margin-bottom: 16px;

}



.location-search input {

    flex: 1;

    padding: 12px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 14px;

    transition: border-color 0.2s ease;

}



.location-search input:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



.current-location-btn {

    background: #3b82f6;

    color: white;

    border: none;

    border-radius: 8px;

    padding: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.current-location-btn:hover {

    background: #2563eb;

}



.location-suggestions {

    max-height: 200px;

    overflow-y: auto;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    background: white;

}



.location-suggestion {

    padding: 12px 16px;

    cursor: pointer;

    border-bottom: 1px solid #f3f4f6;

    transition: background 0.2s ease;

}



.location-suggestion:hover {

    background: #f9fafb;

}



.location-suggestion:last-child {

    border-bottom: none;

}



.selected-location {

    background: #eff6ff;

    border: 1px solid #3b82f6;

    border-radius: 8px;

    padding: 12px 16px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.location-info {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #1e40af;

    font-weight: 500;

}



.selected-location button {

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.selected-location button:hover {

    background: rgba(107, 114, 128, 0.1);

    color: #374151;

}



/* Enhanced Emoji Picker */

.emoji-picker {

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    width: 320px;

    max-height: 400px;

    overflow: hidden;

}



.emoji-picker-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    background: #f8fafc;

    border-bottom: 1px solid #e5e7eb;

}



.emoji-picker-header h4 {

    margin: 0;

    font-size: 14px;

    color: #374151;

}



.emoji-picker-header button {

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.emoji-picker-header button:hover {

    background: #e5e7eb;

    color: #374151;

}



.emoji-search {

    padding: 12px 16px;

    border-bottom: 1px solid #e5e7eb;

}



.emoji-search input {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 14px;

    transition: border-color 0.2s ease;

}



.emoji-search input:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



.emoji-categories {

    display: flex;

    padding: 8px 16px;

    gap: 4px;

    border-bottom: 1px solid #e5e7eb;

    background: #f9fafb;

}



.emoji-category {

    background: none;

    border: none;

    padding: 8px 12px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 16px;

    transition: all 0.2s ease;

}



.emoji-category:hover {

    background: #e5e7eb;

}



.emoji-category.active {

    background: #3b82f6;

    color: white;

}



.emoji-grid {

    padding: 16px;

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 4px;

    max-height: 200px;

    overflow-y: auto;

}



.emoji-item {

    background: none;

    border: none;

    padding: 8px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 20px;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.emoji-item:hover {

    background: #f3f4f6;

    transform: scale(1.1);

}



/* Notification System */

.notification {

    position: fixed;

    top: 20px;

    right: 20px;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    padding: 16px 20px;

    z-index: 10000;

    transform: translateX(100%);

    opacity: 0;

    transition: all 0.3s ease;

    min-width: 300px;

    max-width: 400px;

}



.notification.show {

    transform: translateX(0);

    opacity: 1;

}



.notification-content {

    display: flex;

    align-items: center;

    gap: 12px;

}



.notification-success {

    border-left: 4px solid #10b981;

}



.notification-success .notification-content i {

    color: #10b981;

    font-size: 18px;

}



.notification-error {

    border-left: 4px solid #ef4444;

}



.notification-error .notification-content i {

    color: #ef4444;

    font-size: 18px;

}



.notification-warning {

    border-left: 4px solid #f59e0b;

}



.notification-warning .notification-content i {

    color: #f59e0b;

    font-size: 18px;

}



.notification-info {

    border-left: 4px solid #3b82f6;

}



.notification-info .notification-content i {

    color: #3b82f6;

    font-size: 18px;

}



.notification-content span {

    color: #374151;

    font-size: 14px;

    line-height: 1.4;

}



/* Textarea improvements */

#postContent {

    border: 1px solid #e5e7eb;

    border-radius: 8px 8px 0 0;

    padding: 16px;

    font-family: inherit;

    line-height: 1.6;

}



#postContent:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



/* Mention and Hashtag highlighting */

.mention {

    color: #3b82f6;

    font-weight: 500;

    background: rgba(59, 130, 246, 0.1);

    padding: 2px 4px;

    border-radius: 4px;

}



.hashtag {

    color: #10b981;

    font-weight: 500;

    background: rgba(16, 185, 129, 0.1);

    padding: 2px 4px;

    border-radius: 4px;

}



/* Enhanced writing suggestions */

.writing-suggestions {

    background: #fffbeb;

    border: 1px solid #fde68a;

    border-radius: 8px;

    padding: 12px;

    margin-top: 8px;

}



.suggestion-item {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    font-size: 13px;

    color: #92400e;

}



.suggestion-item:last-child {

    margin-bottom: 0;

}



.suggestion-item i {

    color: #f59e0b;

    font-size: 14px;

}



/* Character progress bar */

.char-progress {

    width: 100%;

    height: 3px;

    background: #f3f4f6;

    border-radius: 2px;

    margin-top: 4px;

    overflow: hidden;

}



.char-progress-bar {

    height: 100%;

    background: #3b82f6;

    border-radius: 2px;

    transition: all 0.3s ease;

    width: 0%;

}



/* User status indicator */

.user-status-indicator {

    position: absolute;

    bottom: 2px;

    right: 2px;

    width: 12px;

    height: 12px;

    background: #10b981;

    border: 2px solid white;

    border-radius: 50%;

}



.user-avatar-container {

    position: relative;

    display: inline-block;

}



/* Enhanced modal backdrop */

.modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

   

}



/* Responsive improvements */

@media (max-width: 768px) {

    .post-modal-content {

        width: 95%;

        max-width: none;

        margin: 20px auto;

        max-height: 90vh;

    }

    

    .attachment-buttons {

        grid-template-columns: repeat(3, 1fr);

        gap: 6px;

    }

    

    .attachment-btn {

        padding: 10px 6px;

        font-size: 11px;

    }

    

    .attachment-btn i {

        font-size: 16px;

    }

    

    .format-toolbar {

        padding: 6px 8px;

        gap: 2px;

    }

    

    .format-btn {

        padding: 4px 6px;

        font-size: 12px;

    }

    

    .post-stats {

        flex-direction: column;

        gap: 8px;

        align-items: flex-start;

    }

    

    .emoji-picker {

        width: 280px;

        max-height: 350px;

    }

    

    .notification {

        right: 10px;

        left: 10px;

        min-width: auto;

        max-width: none;

    }

}



@media (max-width: 480px) {

    .post-modal-content {

        margin: 10px;

        width: calc(100% - 20px);

    }

    

    .modal-actions .action-buttons {

        flex-direction: column;

        gap: 4px;

    }

    

    .preview-toggle-btn,

    .draft-save-btn,

    .post-submit-btn {

        font-size: 12px;

        padding: 6px 10px;

    }

}



.privacy-option div strong {

    display: block;

    font-size: 13px;

    font-weight: 600;

    color: #1f2937;

    margin-bottom: 2px;

}



.privacy-option div small {

    font-size: 11px;

    color: #6b7280;

}



/* Emoji Picker */

.emoji-picker {

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 8px;

    width: 300px;

    height: 350px;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    z-index: 1000;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.emoji-picker-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    border-bottom: 1px solid #e5e7eb;

    background: #f8fafc;

}



.emoji-picker-header h4 {

    margin: 0;

    font-size: 14px;

    font-weight: 600;

    color: #1f2937;

}



.emoji-picker-header button {

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: background 0.2s ease;

}



.emoji-picker-header button:hover {

    background: #e5e7eb;

}



.emoji-categories {

    display: flex;

    padding: 8px;

    border-bottom: 1px solid #f1f5f9;

    background: #fafbfc;

}



.emoji-category {

    background: none;

    border: none;

    padding: 8px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 18px;

    transition: background 0.2s ease;

    flex: 1;

    text-align: center;

}



.emoji-category:hover,

.emoji-category.active {

    background: #e0f2fe;

}



.emoji-grid {

    flex: 1;

    padding: 8px;

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 4px;

    overflow-y: auto;

}



.emoji-item {

    background: none;

    border: none;

    padding: 8px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 18px;

    transition: background 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.emoji-item:hover {

    background: #f1f5f9;

}



/* Post Validation */

.post-validation {

    padding: 16px 24px;

    background: #fef2f2;

    border-top: 1px solid #fecaca;

}



.validation-messages {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.validation-message {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: #dc2626;

}



.validation-message i {

    color: #ef4444;

}



.validation-message.success {

    color: #166534;

}



.validation-message.success i {

    color: #10b981;

}



/* Loading States */

.post-submit-btn.loading .btn-text {

    display: none;

}



.post-submit-btn.loading .btn-loading {

    display: flex;

}



.post-submit-btn:disabled {

    background: #9ca3af;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}



.post-submit-btn:disabled::before {

    display: none;

}



/* Responsive Design */

@media (max-width: 768px) {

    .post-modal-content {

        width: 95vw;

        height: 95vh;

        border-radius: 16px;

    }

    

    .post-modal-header {

        padding: 16px 20px;

        min-height: auto;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }

    

    .modal-actions {

        justify-content: space-between;

    }

    

    .post-composer {

        padding: 16px 20px;

    }

    

    .attachment-buttons {

        grid-template-columns: repeat(3, 1fr);

    }

    

    .attachment-btn {

        padding: 10px 6px;

    }

    

    .attachment-btn span {

        font-size: 11px;

    }

    

    .emoji-picker {

        width: 280px;

        height: 300px;

    }

    

    .privacy-dropdown {

        min-width: 180px;

    }

}



@media (max-width: 480px) {

    .post-modal-content {

        width: 100vw;

        height: 100vh;

        border-radius: 0;

    }

    

    .attachment-buttons {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .user-info-text h4 {

        font-size: 14px;

    }

    

    .user-info-text p {

        font-size: 12px;

    }

}



/* ============== DIRECT POST SYSTEM CSS ============== */



/* Poll Creator */

.poll-creator {

    background: #f8f9fa;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 12px;

}



.poll-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}



.poll-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #0f1419;

}



.poll-creator input[type="text"] {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    margin-bottom: 12px;

}



.poll-options {

    margin-bottom: 12px;

}



.poll-option {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

}



.poll-option input {

    flex: 1;

    padding: 10px;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    font-size: 14px;

}



.remove-option {

    background: #ef4444;

    color: white;

    border: none;

    border-radius: 4px;

    width: 24px;

    height: 24px;

    font-size: 12px;

    cursor: pointer;

}



.add-option-btn {

    background: #1d9bf0;

    color: white;

    border: none;

    border-radius: 6px;

    padding: 8px 12px;

    font-size: 14px;

    cursor: pointer;

}



.poll-settings {

    display: flex;

    gap: 12px;

    margin-top: 12px;

}



.poll-settings select {

    padding: 8px;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    font-size: 14px;

}



/* Location Picker */

.location-picker {

    background: #f8f9fa;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 12px;

}



.location-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}



.location-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #0f1419;

}



.location-picker input[type="text"] {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    margin-bottom: 12px;

}



.location-results {

    max-height: 200px;

    overflow-y: auto;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    margin-bottom: 12px;

}



.location-result-item {

    padding: 12px;

    cursor: pointer;

    border-bottom: 1px solid #e2e8f0;

}



.location-result-item:hover {

    background: #f8f9fa;

}



.location-manual-btn {

    background: #10b981;

    color: white;

    border: none;

    border-radius: 6px;

    padding: 8px 12px;

    font-size: 14px;

    cursor: pointer;

}



.selected-location {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    background: #e0f2fe;

    border-radius: 6px;

    margin-top: 12px;

}



.selected-location i {

    color: #0891b2;

}



/* Countdown Creator */

.countdown-creator {

    background: #f8f9fa;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 12px;

}



.countdown-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}



.countdown-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #0f1419;

}



.countdown-creator input[type="text"],

.countdown-creator input[type="datetime-local"] {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    margin-bottom: 12px;

}



.countdown-creator textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    resize: vertical;

    min-height: 80px;

}



/* Close Button Universal */

.close-btn {

    background: #ef4444;

    color: white;

    border: none;

    border-radius: 50%;

    width: 28px;

    height: 28px;

    font-size: 16px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}



.close-btn:hover {

    background: #dc2626;

}



/* Media Preview */

.direct-media-preview {

    margin-top: 12px;

}



.media-preview-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 8px;

    margin-bottom: 12px;

}



.media-preview-item {

    position: relative;

    border-radius: 8px;

    overflow: hidden;

}



.media-preview-item img,

.media-preview-item video {

    width: 100%;

    height: 150px;

    object-fit: cover;

}



.remove-media {

    position: absolute;

    top: 4px;

    right: 4px;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    border: none;

    border-radius: 50%;

    width: 24px;

    height: 24px;

    font-size: 12px;

    cursor: pointer;

}



/* Notification styles */

.notification-container {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 10000;

    max-width: 400px;

}



.notification {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    margin-bottom: 12px;

    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    animation: slideInRight 0.3s ease-out;

    backdrop-filter: blur(10px);

}



.notification-success {

    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);

    border: 1px solid #10b981;

    color: #166534;

}



.notification-error {

    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);

    border: 1px solid #ef4444;

    color: #991b1b;

}



.notification-warning {

    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);

    border: 1px solid #f59e0b;

    color: #92400e;

}



.notification-info {

    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);

    border: 1px solid #3b82f6;

    color: #1d4ed8;

}



.notification-content {

    display: flex;

    align-items: center;

    gap: 12px;

    flex: 1;

}



.notification-content i {

    font-size: 18px;

}



.notification-close {

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

    border-radius: 50%;

    transition: background 0.2s ease;

    margin-left: 12px;

}



.notification-close:hover {

    background: rgba(0, 0, 0, 0.1);

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(100px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Post menu dropdown */

.post-menu-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    z-index: 1000;

    min-width: 150px;

    display: none;

    opacity: 0;

    transform: translateY(-10px);

    transition: all 0.2s ease;

}



.post-menu-dropdown.show {

    display: block;

    opacity: 1;

    transform: translateY(0);

}



.post-menu-dropdown .menu-item {

    padding: 12px 16px;

    cursor: pointer;

    transition: background-color 0.2s ease;

    border-bottom: 1px solid #f3f4f6;

}



.post-menu-dropdown .menu-item:last-child {

    border-bottom: none;

}



.post-menu-dropdown .menu-item:hover {

    background-color: #f9fafb;

}



.post-menu-dropdown .menu-item.delete:hover {

    background-color: #fef2f2;

    color: #dc2626;

}



/* Post menu container */

.post-menu-container {

    position: relative;

}



.post-menu {

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    transition: background-color 0.2s ease;

    color: #6b7280;

}



.post-menu:hover {

    background-color: #f3f4f6;

    color: #374151;

}



/* Video boyutlandırma */

.post-media video {

    width: 100%;

    max-height: 400px;

    object-fit: cover;

    border-radius: 8px;

}



.post-media img {

    width: 100%;

    max-height: 400px;

    object-fit: cover;

    border-radius: 8px;

}



/* Image viewer video boyutlandırma */

.image-container video {

    width: 100%;

    height: 100%;

    max-height: 500px;

    object-fit: contain;

    border-radius: 8px;

}



/* Share Options Modal Styles */

.share-options-modal-content {

    max-width: 500px;

    width: 100%;

}



.share-options {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.share-option {

    display: flex;

    align-items: center;

    padding: 16px;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

    background: white;

}



.share-option:hover {

    border-color: #3b82f6;

    background-color: #f8fafc;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.share-option-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #f1f5f9;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 16px;

    color: #3b82f6;

    font-size: 20px;

}



.share-option-content h4 {

    font-size: 16px;

    font-weight: 600;

    color: #1e293b;

    margin-bottom: 4px;

}



.share-option-content p {

    font-size: 14px;

    color: #64748b;

    margin: 0;

}



/* Followers List Styles */

.followers-list {

    margin-top: 24px;

    border-top: 1px solid #e5e7eb;

    padding-top: 24px;

}



.followers-header h4 {

    font-size: 18px;

    font-weight: 600;

    color: #1e293b;

    margin-bottom: 16px;

}



.followers-tabs {

    display: flex;

    gap: 8px;

    margin-bottom: 16px;

}



.tab-btn {

    padding: 8px 16px;

    border: 1px solid #e5e7eb;

    background: white;

    border-radius: 20px;

    cursor: pointer;

    font-size: 14px;

    color: #64748b;

    transition: all 0.2s ease;

}



.tab-btn.active {

    background: #3b82f6;

    color: white;

    border-color: #3b82f6;

}



.tab-btn:hover:not(.active) {

    background: #f8fafc;

    border-color: #d1d5db;

}



.followers-search {

    margin-bottom: 16px;

}



.followers-search input {

    width: 100%;

    padding: 12px 16px;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    font-size: 14px;

    outline: none;

    transition: border-color 0.2s ease;

}



.followers-search input:focus {

    border-color: #3b82f6;

}



.followers-content {

    max-height: 300px;

    overflow-y: auto;

}



.follower-item {

    display: flex;

    align-items: center;

    padding: 12px;

    border: 1px solid #f1f5f9;

    border-radius: 8px;

    margin-bottom: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    background: white;

}



.follower-item:hover {

    border-color: #3b82f6;

    background-color: #f8fafc;

}



.follower-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

    margin-right: 12px;

}



.follower-info {

    flex: 1;

}



.follower-name {

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;

    margin-bottom: 2px;

}



.follower-username {

    font-size: 12px;

    color: #64748b;

}



.follower-send {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #3b82f6;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: background-color 0.2s ease;

}



.follower-send:hover {

    background: #2563eb;

}



.loading, .error, .no-users {

    text-align: center;

    padding: 24px;

    color: #64748b;

}



.loading {

    color: #3b82f6;

}



.error {

    color: #dc2626;

}