/* ============================================= */
/* --- 1. DEĞİŞKENLER VE GLOBAL STİLLER --- */
/* ============================================= */
:root {
    /* Ana Renkler */
    --accent-color: #1DA1F2;
    --accent-color-hover: #1a91da;
    --accent-color-light: #e8f5fe;
    --success-color: #17BF63;
    --danger-color: #E0245E;

    /* Açık Mod Varsayılanları */
    --bg-color: #F5F8FA;
    --card-bg-color: #FFFFFF;
    --text-color: #14171A;
    --secondary-text-color: #657786;
    --border-color: #E1E8ED;
    --hover-bg-color: #F9F9F9;
    
    /* Diğer Değişkenler */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --border-radius: 12px;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html.dark-mode {
    /* Karanlık Mod Değerleri */
    --bg-color: #15202B;
    --card-bg-color: #192734;
    --text-color: #FFFFFF;
    --secondary-text-color: #8899A6;
    --border-color: #38444D;
    --hover-bg-color: #253341;
    --accent-color-light: #1c2938;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding-top: 65px; /* Sabit header için boşluk */
    transition: background-color 0.3s, color 0.3s;
}

a { color: var(--accent-color); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input[type="submit"] {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 9999px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

button:hover, input[type="submit"]:hover {
    background-color: var(--accent-color-hover);
    transform: scale(1.03);
}

button:disabled { background-color: #cccccc; cursor: not-allowed; }

input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%; padding: 12px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 8px; font-size: 1rem;
    font-family: var(--font-family);
}
textarea { resize: vertical; min-height: 80px; }

/* ============================================= */
/* --- 2. HEADER (NİHAİ SÜRÜM) --- */
/* ============================================= */
.desktop-header {
    display: block; /* Masaüstünde varsayılan olarak gösterilir */
}
.mobile-header, .mobile-bottom-nav {
    display: none; /* Mobilde gösterilecek elemanları varsayılan olarak gizle */
}

.main-header {
    background-color: var(--card-bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 65px;
}
.header-content {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
}
.logo h1 { font-size: 1.5rem; color: var(--accent-color); margin: 0; }
.search-form-container { flex-grow: 1; display: flex; justify-content: center; position: relative; }
.search-form { position: relative; width: 100%; max-width: 400px; }
.search-form svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--secondary-text-color); }
.search-form input { width: 100%; padding: 10px 15px 10px 45px; border-radius: 20px; transition: all 0.2s ease; }
.search-form input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-color-light); }
.main-nav { display: flex; align-items: center; gap: 15px; }
.main-nav .nav-icon-link {
    display: flex; align-items: center; justify-content: center;
    color: var(--secondary-text-color); position: relative;
    padding: 8px; border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}
.main-nav .nav-icon-link:hover { background-color: var(--hover-bg-color); color: var(--text-color); }
.main-nav svg { width: 24px; height: 24px; }
#notification-count-badge, #notification-count-badge-mobile {
    position: absolute;
    top: 8px; 
    right: 8px; 
    background-color: var(--danger-color);
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--card-bg-color); 
}

/* header.php'deki yeni linkler için stiller */
.main-nav .nav-text-link {
    color: var(--secondary-text-color);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: 20px;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}

.main-nav .nav-text-link:hover {
    background-color: var(--hover-bg-color);
    color: var(--text-color);
    text-decoration: none;
}

.main-nav .nav-text-link.danger:hover {
    color: var(--danger-color);
}

.nav-profile-link {
    line-height: 0; /* Resmin etrafındaki boşluğu kaldırır */
}

.nav-profile-pic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.nav-profile-link:hover .nav-profile-pic {
    border-color: var(--accent-color);
}

#theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem; /* İkon boyutunu ayarlar */
}
/* Çıkış Yap ikonu için hover rengi */
.main-nav .nav-icon-link.danger:hover {
    color: var(--danger-color);
    background-color: #fde8ef; /* Açık mod için pembe arka plan */
}

html.dark-mode .main-nav .nav-icon-link.danger:hover {
    background-color: #581c35; /* Koyu mod için koyu pembe arka plan */
}

/* Tema değiştirme ikonunun boyutunu ayarlama */
#theme-toggle-btn .theme-icon {
    font-size: 1.5rem;
    line-height: 1;
}
/* ============================================= */
/* --- 3. ANA SAYFA VE İKİ SÜTUNLU YAPI --- */
/* ============================================= */
.main-layout-container { display: flex; max-width: 1000px; margin: 20px auto; gap: 20px; padding: 0 15px; }
.main-feed-column { flex: 1; min-width: 0; }
.sidebar-column { width: 300px; flex-shrink: 0; }
.trending-topics-card { background-color: var(--card-bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px; position: sticky; top: 85px; }
.trending-topics-card h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.trending-list { list-style: none; padding: 0; margin: 0; }
.trending-list li a { display: block; padding: 10px 5px; font-weight: bold; border-radius: 5px; transition: background-color 0.2s ease; }
.trending-list li a:hover { background-color: var(--hover-bg-color); }
.trending-list li a span { display: block; font-size: 0.85rem; color: var(--secondary-text-color); font-weight: normal; margin-top: 2px; }

/* ============================================= */
/* --- 4. GÖNDERİ PAYLAŞMA FORMU --- */
/* ============================================= */
.new-post-section.modern-form {
    display: flex;
    gap: 15px;
    padding: 20px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}
.modern-form .form-content {
    flex-grow: 1;
}
.modern-form .form-footer {
    display: flex;
    align-items: center;
    gap: 15px; /* Sayaç ve buton arasına boşluk koyar */
}
/* --- Dairesel Sayaç Stilleri --- */
.circular-counter {
    position: relative;
    width: 28px;
    height: 28px;
}

.circular-counter .progress-ring {
    transform: rotate(-90deg); /* Sayacın üstten başlamasını sağlar */
}

.circular-counter .progress-ring__circle,
.circular-counter .progress-ring__circle-bg {
    transition: stroke-dashoffset 0.3s, stroke 0.3s;
}

/* Sayacın arka plan (boş) halkası */
.circular-counter .progress-ring__circle-bg {
    stroke: var(--border-color); 
}

/* Sayacın ilerlemeyi gösteren renkli halkası */
.circular-counter .progress-ring__circle {
    stroke: var(--accent-color); 
    stroke-linecap: round; 
}

/* Limite yaklaşıldığında görünecek kalan karakter sayısı metni */
/* Yeni Doğru Kod */
.circular-counter .chars-left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color-secondary);
    display: none; 
}
.modern-form textarea {
    border: none;
    min-height: 60px;
    font-size: 1.2rem;
    background-color: transparent;
    width: 100%;
    resize: none;
    padding: 10px 0;
    line-height: 1.4;
	overflow: hidden;
}
.modern-form textarea:focus { outline: none; }
.modern-form .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}
.modern-form .action-icons { display: flex; gap: 10px; }
.modern-form .icon-btn { 
    color: var(--accent-color); 
    background: none; 
    border: none;
    padding: 8px; 
    cursor: pointer; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modern-form .icon-btn:hover { background-color: var(--accent-color-light); }

/* ============================================= */
/* --- 5. GÖNDERİ KARTI (POST) (NİHAİ SÜRÜM) --- */
/* ============================================= */
.post {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: var(--card-shadow);
}

/* --- Gönderi Başlığı --- */
.post-header {
    display: flex;
    align-items: flex-start; 
    gap: 15px;
    margin-bottom: 15px;
}
.post-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.post-author-info {
    flex-grow: 1;
}
.post-author-name {
    font-weight: bold;
    color: var(--text-color);
}
.post-author-name:hover {
    text-decoration: underline;
}
.verified-badge {
    color: var(--accent-color);
    font-size: 1rem;
    margin-left: 3px;
}
.post-author-username {
    color: var(--secondary-text-color);
    font-size: 0.95rem;
    display: block; /* İsimle alt alta gelmesi için */
    line-height: 1.2;
}
.post-timestamp {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.delete-post-btn.icon-btn { /* Silme butonu için daha modern stil */
    background: none;
    color: var(--secondary-text-color);
    font-size: 1.5rem;
    padding: 0 5px;
    font-weight: normal;
    border-radius: 50%;
}
.delete-post-btn.icon-btn:hover {
    background-color: var(--hover-bg-color);
    color: var(--danger-color);
}

/* --- Gönderi İçeriği --- */
.post-content p {
    margin: 0 0 15px 0;
    white-space: pre-wrap; /* Satır sonlarını korur */
    word-wrap: break-word;
    font-size: 1.1rem;
    line-height: 1.5;
}
.content-link {
    font-weight: 500;
}
.post-media {
    margin-top: 15px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    aspect-ratio: 16 / 9; /* Zıplama Önleyici */
    background-color: var(--hover-bg-color);
}
.post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Modern Eylem Butonları Barı --- */
.post-actions-bar {
    display: flex;
    justify-content: space-around;
    margin: 15px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.action-btn {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 20px;
    transition: all 0.2s ease;
    flex-grow: 1; /* Butonların eşit yer kaplaması için */
    justify-content: center;
}
.action-btn:hover {
    color: var(--accent-color);
    background-color: var(--accent-color-light);
}
.action-btn.like-btn:hover {
    color: var(--danger-color);
    background-color: #fde8ef;
}
html.dark-mode .action-btn.like-btn:hover {
    background-color: #581c35;
}
.action-btn.liked, .action-btn.liked svg {
    color: var(--danger-color);
    fill: var(--danger-color);
    stroke: var(--danger-color);
}
.action-btn.bookmarked svg {
    fill: var(--accent-color);
}

/* --- Yorum Alanı --- */
.comments-section-wrapper {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.comments-section {
    /*max-height: 250px; 
    overflow-y: auto;*/
    margin-bottom: 15px;
    padding-right: 10px; /* Kaydırma çubuğu için boşluk */
}

.comment {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.comment-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-content {
    background-color: var(--hover-bg-color);
    padding: 10px 15px;
    border-radius: 18px;
    width: 100%;
}
.comment-content a {
    color: var(--text-color);
    font-weight: bold;
}
.comment-content a:hover {
    text-decoration: underline;
}
.comment-content p {
    margin: 5px 0 0 0;
    white-space: normal; /* Yorumlarda satır sonu normal olsun */
    word-wrap: break-word;
}

.modern-comment-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.comment-form-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-input-wrapper {
    display: flex;
    flex-grow: 1;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    background-color: var(--hover-bg-color);
}
.comment-input-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-light);
}

.modern-comment-form input[type="text"] {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 10px 15px;
}
.modern-comment-form input[type="text"]:focus {
    outline: none;
}

.modern-comment-form button {
    margin-right: 5px; /* Butonu input'un içine alır */
}


/* ============================================= */
/* --- 6. MESAJLAŞMA SAYFASI --- */
/* ============================================= */
.messages-layout { display: flex; height: calc(100vh - 65px); gap: 0; }
.conversations-list { width: 350px; flex-shrink: 0; border-right: 1px solid var(--border-color); overflow-y: auto; background-color: var(--card-bg-color); }
.conversations-list h3 { padding: 20px; margin: 0; border-bottom: 1px solid var(--border-color); }
.conversation-item { display: flex; align-items: center; padding: 15px 20px; cursor: pointer; transition: background-color 0.2s ease; }
.conversation-item:hover { background-color: var(--hover-bg-color); }
.conversation-item.active { background-color: var(--accent-color-light); }
.conversation-avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; }
.chat-area { flex-grow: 1; display: flex; flex-direction: column; }
#chat-welcome { flex-grow: 1; display: flex; align-items: center; justify-content: center; color: var(--secondary-text-color); }
#chat-window { display: flex; flex-direction: column; height: 100%; }
.chat-header { padding: 20px; border-bottom: 1px solid var(--border-color); } .chat-header h3 { margin: 0; }
.back-to-conversations-btn {
    display: none;
}
.messages-area { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; }
.message {
    display: flex;
    margin-bottom: 15px;
    max-width: 75%; /* Mesajların çok uzun olmasını engeller */
}
.message.sent {
    align-self: flex-end;
    flex-direction: row-reverse; /* İçeriği sağa yaslar */
}
.message.received {
    align-self: flex-start;
}
.message-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.message-bubble p {
    margin: 0 0 5px 0; /* Metin ile zaman damgası arasına boşluk koy */
    word-wrap: break-word; /* Uzun kelimeleri kır */
}
/* Gönderilen mesaj balonu renkleri */
.message.sent .message-bubble {
    background-color: var(--accent-color);
    color: white;
    border-bottom-right-radius: 4px;
}
.message.sent .message-bubble .message-timestamp {
    color: rgba(255, 255, 255, 0.7);
}

/* Alınan mesaj balonu renkleri */
.message.received .message-bubble {
    background-color: var(--hover-bg-color);
    color: var(--text-color);
    border-bottom-left-radius: 4px;
}
.message.received .message-bubble .message-timestamp {
    color: var(--secondary-text-color);
}
/* Zaman damgası stili */
.message-timestamp {
    font-size: 0.75rem; /* 12px */
    display: block;
    text-align: right;
    opacity: 0.8;
}
.message-form-modern {
    padding: 10px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
    /* Düzeltme: Sohbet penceresinin en altına sabitler */
    margin-top: auto; 
}

.message-input-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 5px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.message-input-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-light);
}

.message-form-modern textarea {
    flex-grow: 1;
    border: none;
    padding: 10px;
    background-color: transparent;
    resize: none;
    font-size: 1rem;
    max-height: 100px; /* Çok fazla satırı engeller */
    overflow-y: auto;
    line-height: 1.4;
    outline: none; /* Focus outline'ı kaldır */
}

.message-form-modern .icon-btn,
.message-form-modern .send-btn {
    background: none;
    border: none;
    padding: 8px;
    margin: 0 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--secondary-text-color);
    flex-shrink: 0; /* Daralmayı engelle */
    transition: background-color 0.2s, color 0.2s;
}

.message-form-modern .icon-btn:hover {
    background-color: var(--accent-color-light);
    color: var(--accent-color);
}

.message-form-modern .send-btn {
    background-color: var(--accent-color);
    color: white;
}
.message-form-modern .send-btn:hover {
    background-color: var(--accent-color-hover);
    color: white;
}

/* ============================================= */
/* --- 7. PROFİL SAYFASI --- */
/* ============================================= */
.profile-page-container { max-width: 800px; margin: 20px auto; padding: 0 15px; }
.profile-header-card { background-color: var(--card-bg-color); border-radius: var(--border-radius); border: 1px solid var(--border-color); margin-bottom: 20px; overflow: hidden; }
.profile-cover-photo { width: 100%; height: 200px; background-color: #333; }
.profile-cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-section { position: relative; height: 60px; padding: 0 20px; }
.profile-page-avatar { position: absolute; top: -70px; width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--card-bg-color); background-color: var(--card-bg-color); object-fit: cover; }
.profile-actions { display: flex; justify-content: flex-end; padding: 15px 20px 0; }
.profile-action-btn { border: 1px solid var(--accent-color); background-color: transparent; color: var(--accent-color); font-weight: bold; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.profile-action-btn.follow-btn { background-color: var(--accent-color); color: white; }
.profile-info-details { padding: 0 20px 20px; }
.profile-full-name { font-size: 1.5rem; margin: 0; }
.profile-username { color: var(--secondary-text-color); margin-bottom: 15px; }
.profile-bio { margin-bottom: 15px; }
.profile-stats { display: flex; gap: 20px; }
.profile-stats a { color: var(--secondary-text-color); }
.profile-stats a:hover { text-decoration: none; }
.profile-stats strong { color: var(--text-color); }

/* ============================================= */
/* --- 8. PROFİL DÜZENLEME SAYFASI --- */
/* ============================================= */
.edit-profile-container { max-width: 700px; margin: 20px auto; padding: 30px; background-color: var(--card-bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--card-shadow); }
.edit-profile-container h2 { margin-top: 0; margin-bottom: 30px; text-align: center; font-size: 1.8rem; }
.edit-profile-form .form-group { margin-bottom: 25px; }
.edit-profile-form label { display: flex; font-weight: bold; margin-bottom: 8px; color: var(--secondary-text-color); }
.image-upload-wrapper { margin-bottom: 20px; }
.cover-upload, .avatar-upload { position: relative; background-color: var(--hover-bg-color); cursor: pointer; overflow: hidden; }
.cover-upload { width: 100%; height: 220px; border-radius: var(--border-radius); }
.cover-upload img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-section { margin-top: -80px; padding-left: 20px; position: relative; z-index: 2; margin-bottom: 10px; }
.avatar-upload { width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--card-bg-color); background-color: var(--card-bg-color); }
.avatar-upload img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.upload-icon-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.cover-upload:hover .upload-icon-label,
.avatar-upload:hover .upload-icon-label { opacity: 1; }
.image-upload-wrapper input[type="file"] { display: none; }
.edit-profile-form .form-actions { display: flex; justify-content: flex-end; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color); }

/* ============================================= */
/* --- 9. UI CİLALAMA VE DİĞERLERİ --- */
/* ============================================= */
.spinner { border: 3px solid rgba(255, 255, 255, 0.3); width: 18px; height: 18px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.empty-state-message { background-color: var(--card-bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 40px; text-align: center; color: var(--secondary-text-color); margin-top: 20px; }

/* ============================================= */
/* --- 10. MOBİL UYUMLULUK VE MEDYA SORGULARI --- */
/* ============================================= */

/* --- 10.1 MOBİL ARAMA EKRANI (OVERLAY) --- */
/* Bu bölümün @media dışında olması, masaüstünde görünmesini engeller */
.search-overlay {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 2000;
    display: none; /* Varsayılan olarak her zaman gizli */
    flex-direction: column;
    padding: 10px;
}
.search-overlay-header { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 15px; 
}
.search-overlay .search-form { 
    max-width: none; 
    flex-grow: 1; 
}
.close-search-btn { 
    background: none; 
    border: none; 
    font-size: 1rem; 
    color: var(--accent-color); 
    font-weight: bold; 
    padding: 5px 10px; 
    flex-shrink: 0; 
}
#mobile-search-results { 
    display: block; 
    background: none; 
    border: none; 
    box-shadow: none; 
    margin-top: 0; 
}

/* --- 10.2 TABLET GÖRÜNÜMÜ (Sidebar Gizlenir) --- */
@media (max-width: 900px) { 
    .sidebar-column { display: none; } 
    .main-feed-column { max-width: 600px; margin: 0 auto; }
    .main-layout-container { justify-content: center; }
}

/* --- 10.3 MOBİL GÖRÜNÜMÜ (Komple Değişim) --- */
@media (max-width: 768px) {
    /* Ana Yerleşim Değişiklikleri */
    .desktop-header { display: none; }
    .mobile-header, .mobile-bottom-nav { display: flex; }
    body { padding-top: 60px; padding-bottom: 60px; }
    /* --- Mesajlaşma Sayfası Mobil Düzeltmeleri --- */
    .messages-layout {
        /* Flexbox yönünü dikey olarak değiştirir */
        flex-direction: column;
        /* Yüksekliği tam ekran yapar (header ve footer hariç) */
        height: calc(100vh - 120px); 
    }
	.conversations-list {
        /* Genişliği tam ekran yapar */
        width: 100%;
        /* Yüksekliği otomatik ayarlar ve sağ kenarlığı kaldırır */
        height: auto;
        border-right: none;
        flex-shrink: 0; /* Esnemesine izin ver */
        border-bottom: 1px solid var(--border-color); /* Araya ayırıcı çizgi ekler */
    }
	body.mobile-chat-active .conversations-list {
        display: none;
    }

    .chat-area {
        height: 100%; /* Kalan tüm yüksekliği kaplar */
    }

    /* 'chat-active' durumunda sohbet alanını tam ekran göster */
    body.mobile-chat-active .chat-area {
        display: flex;
        position: fixed;
        top: 60px; /* Mobil header yüksekliği */
        left: 0;
        right: 0;
        bottom: 60px; /* Mobil bottom nav yüksekliği */
        width: 100%;
        height: auto;
        z-index: 1001; /* Diğer elemanların üzerinde kalması için */
        background-color: var(--bg-color);
    }
    
    .chat-header {
        /* Geri butonu için yer açar */
        display: flex;
        align-items: center;
        gap: 10px;
    }
	/* Geri butonu (JavaScript ile eklenecek) */
    .back-to-conversations-btn {
        display: block; /* Mobilde göster */
        background: none;
        border: none;
        color: var(--text-color);
        cursor: pointer;
        padding: 5px;
    }
    /* Mobil Header Stilleri */
    .mobile-header {
        height: 60px;
        padding: 0 15px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--card-bg-color);
        border-bottom: 1px solid var(--border-color);
        z-index: 1000;
        align-items: center;
    }
    .mobile-header .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .mobile-header .logo h1 {
        margin: 0;
        font-size: 1.8rem;
    }
    .mobile-header .nav-profile-pic {
        width: 34px;
        height: 34px;
    }

    /* Mobil Alt Navigasyon (Bottom Nav) */
    .mobile-bottom-nav {
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background-color: var(--card-bg-color);
        border-top: 1px solid var(--border-color);
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    html.dark-mode .mobile-bottom-nav {
         box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    }
    .mobile-bottom-nav .nav-icon-link { 
        flex-grow: 1; 
        border: none; 
        background: none; 
        color: var(--secondary-text-color);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        position: relative;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }
    .mobile-bottom-nav .nav-icon-link:hover {
        background-color: var(--hover-bg-color);
    }
    .mobile-bottom-nav .nav-icon-link.active {
        color: var(--accent-color);
    }
    .mobile-bottom-nav svg {
        width: 26px;
        height: 26px;
    }
    
    /* Mobil Arama Ekranını Aktif Etme Kuralı */
    .search-overlay.active { 
        display: flex; 
    }

    /* Diğer Mobil Uyum İyileştirmeleri */
    .main-layout-container, .profile-page-container, .edit-profile-container { 
        padding: 0; 
        margin-top: 10px; 
    }
    .post, .new-post-section, .notifications-section, .hashtag-header, .tab-nav, .profile-header-card { 
        border-radius: 0; 
        border-left: none; 
        border-right: none; 
    }
}
/* ============================================= */
/* --- 11. MODERN ONAY PENCERESİ (MODAL) --- */
/* ============================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Değişiklik: Arka planı daha koyu ve yarı saydam siyah yaptık */
    background-color: rgba(91, 112, 131, 0.4); 
    display: none;  
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--bg-color);
    padding: 32px; /* Değişiklik: İç boşluğu artırdık */
    border-radius: 16px;
    max-width: 320px;
    width: 90%;
    /* Değişiklik: Metinleri ortaladık */
    text-align: center; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-content h2 {
    margin: 0 0 8px 0;
    /* Değişiklik: Başlığı daha büyük ve kalın yaptık */
    font-size: 1.5rem; 
    font-weight: 800;
    color: var(--text-color-primary);
}

.modal-content p {
    margin: 0 0 24px 0; /* Değişiklik: Alt boşluğu artırdık */
    color: var(--text-color-secondary);
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-btn {
    width: 100%;
    padding: 14px; 
    border-radius: 9999px; 
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-btn.cancel {
    background-color: var(--bg-color);
    color: var(--text-color-primary);
    border-color: #38444D; 
}
.modal-btn.cancel:hover {
    background-color: var(--hover-color);
}

.modal-btn.confirm.destructive {
    background-color: var(--destructive-color);
    color: #E0245E; 
    border: none;
}
.modal-btn.confirm.destructive:hover {
    opacity: 0.9;
}
.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--hover-bg-color);
}

.btn-danger {
    background-color: var(--danger-color);
}

.btn-danger:hover {
    background-color: #c91e52; 
}

/* ============================================= */
/* --- 11. SONSUZ KAYDIRMA DÜZELTMELERİ --- */
/* ============================================= */

/* Yükleniyor animasyonunun kapsayıcısı */
.loading-indicator {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    width: 100%;
}

/* Yükleme bittiğinde gösterilecek mesaj */
.end-of-feed-message {
    text-align: center;
    color: var(--secondary-text-color);
    padding: 20px;
}
/* ============================================= */
/* --- 12. SONSUZ KAYDIRMA NİHAİ DÜZELTME --- */
/* ============================================= */
#infinite-scroll-trigger {
    /* ZIPLAMA ÖNLEYİCİ: Sabit bir minimum yükseklik ver */
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.end-of-feed-message {
    text-align: center;
    color: var(--secondary-text-color);
    padding: 20px;
}
/* ============================================= */
/* --- 13. MODERN BİLDİRİMLER SAYFASI --- */
/* ============================================= */
.notifications-section {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Kenarlığı içerde tutar */
}

.notifications-section .section-title {
    padding: 20px;
    margin: 0;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--border-color);
}

.notifications-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    transition: background-color 0.2s ease;
    gap: 15px;
}

.notification-item:hover {
    background-color: var(--hover-bg-color);
    text-decoration: none;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-icon {
    font-size: 1.5rem;
    line-height: 1; /* Dikey hizalama için */
    flex-shrink: 0;
}

/* İkonlara özel renkler */
.icon-like { color: var(--danger-color); }
.icon-comment { color: var(--accent-color); }
.icon-follow { color: var(--success-color); }
.icon-mention { color: var(--secondary-text-color); }

.notification-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.notification-content {
    flex-grow: 1;
}

.notification-content p {
    margin: 0;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.4;
}

.notification-content strong {
    font-weight: bold;
}

.notification-timestamp {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    margin-top: 4px;
    display: block;
}

/* ============================================= */
/* --- 15. GİRİŞ VE KAYIT SAYFALARI (NİHAİ) --- */
/* ============================================= */

.auth-page-v2 {
    margin: 0;
    padding: 0;
    padding-top: 0; /* Header olmadığı için padding'i sıfırla */
    overflow: hidden; /* Kaydırma çubuklarını engelle */
}

.auth-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
}

.auth-visual {
    width: 50%;
    background: linear-gradient(135deg, var(--accent-color) 0%, #1a91da 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.auth-visual .visual-content {
    max-width: 400px;
}

.auth-visual .auth-logo {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
}

.auth-visual p {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.9;
}

.auth-form-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--card-bg-color);
    padding: 20px;
    overflow-y: auto; /* Form uzun olursa kaydırma çubuğu çıksın */
}

.auth-container {
    width: 100%;
    max-width: 400px;
}

.auth-container h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 30px;
    text-align: left;
}

.auth-message{padding:10px;margin-bottom:20px;border-radius:8px;text-align:center;font-size:.9rem}.auth-message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}html.dark-mode .auth-message.success{background-color:#1c4a2a;color:#c6e3ce;border:1px solid #2f6a42}.auth-message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}html.dark-mode .auth-message.error{background-color:#581c35;color:#f5c6cb;border:1px solid #842029}.auth-form .form-group{margin-bottom:20px;position:relative}.auth-form label{display:block;margin-bottom:8px;font-weight:500}.auth-form button{width:100%;padding:12px;font-size:1rem;margin-top:10px}.auth-footer{text-align:center;margin-top:25px;padding-top:20px;font-size:.9rem;color:var(--secondary-text-color);border-top:1px solid var(--border-color)}

/* --- KULLANICI ADI KONTROL STİLLERİ --- */
.feedback-container {
    margin-top: 8px;
    font-size: 0.9rem;
    min-height: 20px;
}
.feedback-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.feedback-success {
    color: var(--success-color);
    font-weight: 500;
}
.feedback-error {
    color: var(--danger-color);
    font-weight: 500;
}
.suggestions {
    margin-top: 5px;
}
.suggestion-btn {
    background-color: var(--hover-bg-color);
    color: var(--accent-color);
    padding: 4px 8px;
    margin: 2px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    cursor: pointer;
}
.suggestion-btn:hover {
    background-color: var(--accent-color-light);
}

/* --- DOĞUM TARİHİ GRUBU --- */
.dob-group {
    display: flex;
    gap: 10px;
}

.dob-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-family);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657786' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    margin-top: -15px;
    margin-bottom: 10px;
}

/* Mobil Uyum */
@media (max-width: 800px) {
    .auth-visual {
        display: none; /* Mobilde görsel alanı gizle */
    }
    .auth-form-container {
        width: 100%;
    }
}

/* ============================================= */
/* --- 16. HASHTAG SAYFASI (MODERN) --- */
/* ============================================= */

.hashtag-header {
    padding: 20px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-bottom: none; /* Alt kenarlığı sekmeler oluşturacak */
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.hashtag-header h1 {
    margin: 0;
    font-size: 1.8rem;
    word-break: break-all; /* Uzun etiketlerin taşmasını engelle */
}

.tab-nav {
    display: flex;
    background-color: var(--card-bg-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.tab-link {
    flex-grow: 1;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    color: var(--secondary-text-color);
    text-decoration: none;
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tab-link:hover {
    background-color: var(--hover-bg-color);
    color: var(--text-color);
    text-decoration: none;
}

.tab-link.active {
    color: var(--accent-color);
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Kenarlığın üzerine gelsin */
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--accent-color);
    border-radius: 99px;
}

/* ============================================= */
/* --- 17. ARAMA SONUÇLARI SAYFASI --- */
/* ============================================= */

.search-header {
    padding: 20px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.search-header h1 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
}

.search-header p {
    margin: 0;
    color: var(--secondary-text-color);
}

.search-results-container .user-card {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    gap: 15px;
    transition: background-color 0.2s ease;
}

.search-results-container .user-card:hover {
    background-color: var(--hover-bg-color);
}

.user-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-card-info {
    flex-grow: 1;
}

.user-card-name {
    color: var(--text-color);
    text-decoration: none;
}
.user-card-name:hover {
    text-decoration: underline;
}
.user-card-name strong {
    font-size: 1.1rem;
}

.user-card-username {
    color: var(--secondary-text-color);
    font-size: 0.95rem;
    display: block;
}

.user-card-bio {
    margin: 8px 0 0 0;
    font-size: 0.95rem;
    color: var(--text-color);
}

.user-card-action {
    flex-shrink: 0;
    align-self: center; /* Butonun dikeyde ortalanması için */
}


/* ============================================= */
/* --- 18. CANLI ARAMA SONUÇLARI --- */
/* ============================================= */
.search-form-container {
    position: relative; /* Sonuçların buna göre konumlanması için */
}

.live-search-results-container {
    display: none; /* Varsayılan olarak gizli */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-top: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1200;
}

.live-search-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 15px;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.2s ease;
}

.live-search-item:hover {
    background-color: var(--hover-bg-color);
    text-decoration: none;
}

.live-search-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.live-search-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--hover-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text-color);
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.live-search-info strong {
    display: block;
    font-weight: bold;
    color: var(--text-color);
}

.live-search-info span {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.no-results-message {
    padding: 20px;
    text-align: center;
    color: var(--secondary-text-color);
}
/* ============================================= */
/* --- 19. MOBİL CANLI ARAMA DÜZELTMESİ --- */
/* ============================================= */
#mobile-search-results {
    position: relative; 
    top: auto;          
    left: auto;         
    box-shadow: none;  
    border: none;       
    margin-top: 15px;   
}
/* ============================================= */
/* --- 20. MOBİL YAN MENÜ STİLLERİ (NİHAİ SÜRÜM) --- */
/* ============================================= */

body.menu-open { overflow: hidden; }

#menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(9, 30, 46, 0.5);
    z-index: 1001; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}
html.dark-mode #menu-overlay { background-color: rgba(0, 0, 0, 0.7); }
#menu-overlay.active { opacity: 1; visibility: visible; transition-delay: 0s; }

#mobile-nav-menu {
    position: fixed; top: 0; left: 0;
    width: 80%; max-width: 300px; height: 100%;
    background-color: var(--card-bg-color);
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Daha akıcı animasyon */
    display: flex; flex-direction: column;
}
#mobile-nav-menu.active {
    transform: translateX(0);
    box-shadow: 5px 0 25px rgba(0,0,0,0.1);
}
html.dark-mode #mobile-nav-menu.active { box-shadow: 5px 0 25px rgba(0,0,0,0.3); }

/* YENİ: Profil Başlık Bölümü */
.mobile-menu-header {
    padding: 20px;
    flex-shrink: 0;
}
.menu-profile-section {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}
.menu-profile-pic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.menu-profile-info {
    display: flex;
    flex-direction: column;
}
.menu-profile-info strong {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
}
.menu-profile-info span {
    font-size: 0.95rem;
    color: var(--secondary-text-color);
}

/* YENİ: Ayırıcı Çizgi Stilleri */
.menu-divider-top {
    border: none; height: 1px;
    background-color: var(--border-color);
    margin: 0; /* Üst-alt boşlukları sıfırla */
}

/* Menü içeriği ve linkler */
.mobile-menu-content {
    padding: 15px 15px;
    overflow-y: auto; flex-grow: 1;
}
.mobile-menu-link {
    display: flex; align-items: center; gap: 20px;
    padding: 14px 15px; border-radius: 8px;
    font-size: 1.1rem; font-weight: 500;
    color: var(--text-color); text-decoration: none;
    width: 100%; background: none; border: none;
    cursor: pointer; text-align: left; margin-bottom: 2px;
}
.mobile-menu-link:hover {
    background-color: var(--hover-bg-color); text-decoration: none;
}
.mobile-menu-link svg {
    width: 26px; height: 26px;
    color: var(--text-color);
    flex-shrink: 0;
}
.mobile-menu-link .theme-icon {
    font-size: 1.6rem; width: 26px; text-align: center;
}
.menu-divider {
    border: none; height: 1px;
    background-color: var(--border-color); margin: 8px 0;
}
.mobile-menu-link.danger { color: var(--danger-color); }
.mobile-menu-link.danger svg { color: var(--danger-color); }

/* Mobil Header'ın doğru ortalanması (Değişiklik yok) */
@media (max-width: 768px) {
    .mobile-header .header-content {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; position: relative; height: 100%;
    }
    .mobile-header .logo {
        position: absolute; right:0;
    }
    #mobile-menu-trigger {
        background: none; border: none; padding: 0;
        position: relative; z-index: 5;
    }
}

/* ============================================= */
/* --- 13. YORUM BÖLÜMÜ (MODERN) --- */
/* ============================================= */

.comments-section .no-comments-message {
    color: var(--secondary-text-color);
    padding: 20px 0;
    text-align: center;
}

.comment {
    display: flex;
    gap: 12px;
    padding-top: 15px;
}

.comment-avatar-link {
    flex-shrink: 0;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.comment-body {
    background-color: var(--hover-bg-color);
    border-radius: 18px;
    padding: 10px 15px;
}

.comment-author-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-author-name strong {
    color: var(--text-color);
    font-weight: 700;
}

.comment-author-name span {
    color: var(--secondary-text-color);
    font-size: 0.95rem;
}

.comment-text {
    margin: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
    color: var(--text-color);
}

.comment-footer {
    display: flex;
    align-items: center;
    gap: 20px; /* Butonlar arası boşluk */
    padding: 5px 10px;
}

/* Yorum eylem butonları (Gönderi butonlarıyla aynı stil) */
.comment-footer .action-btn {
    padding: 5px; /* Daha küçük butonlar için daha az padding */
    gap: 5px;
}
.comment-footer .action-btn .action-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.comment-footer .action-btn:hover {
    color: var(--accent-color);
    background-color: var(--accent-color-light);
}
.comment-footer .action-btn.like-comment-btn:hover {
    color: var(--danger-color);
    background-color: #fde8ef;
}
html.dark-mode .comment-footer .action-btn.like-comment-btn:hover {
    background-color: #581c35;
}
.comment-footer .action-btn.liked {
    color: var(--danger-color);
}

/* YANITLAR (AĞAÇ YAPISI) İÇİN STİLLER */
.replies-container {
    padding-left: 25px;
    margin-left: 15px;
    border-left: 2px solid var(--border-color);
}
.highlighted-comment {
    /* Geçiş efektiyle arka plan rengini değiştir */
    transition: background-color 0.5s ease-in-out;
    background-color: var(--highlight-bg-color, #fff8e1); /* Açık sarı tonu, tema değişkeniyle uyumlu */
    border-radius: 8px; /* Kenarları yuvarlat */
}

/* Dark mode için özel renk */
.dark-mode .highlighted-comment {
    background-color: var(--dark-highlight-bg-color, #4a412a);
}
/* style.css veya ilgili CSS dosyanıza ekleyin */

.highlighted-comment {
    background-color: rgba(29, 161, 242, 0.1); /* Twitter mavisi tonunda hafif bir arkaplan */
    border-radius: 12px;
    transition: background-color 0.5s ease-in-out;
}
/* Menü ve Dropdown Stilleri */
.menu-container {
    position: relative;
    margin-left: auto; /* Sağ tarafa yaslamak için */
}

.icon-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-secondary);
}

.icon-btn:hover {
    background-color: var(--accent-color-light);
    color: var(--accent-color);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 220px;
    padding: 8px 0;
    display: none; /* Varsayılan olarak gizli */
    overflow: hidden;
}

.dropdown-menu.active {
    display: block; /* JS ile açılacak */
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background-color: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color-primary);
    white-space: nowrap;
}

.menu-item:hover {
    background-color: var(--hover-color);
}

.menu-item svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.menu-item.destructive {
    color: #e0245e;
    font-weight: bold;
}

/* Post ve Yorum Başlıklarını Düzenleme */
.post-header, .comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-header {
    margin-bottom: 5px;
}

.post-author-info, .comment-author-info {
    flex-grow: 1;
}
/* ============================================= */
/* --- BİLDİRİM İKONLARI İÇİN EKSİK CSS KODLARI --- */
/* ============================================= */

/* İkonların genel kapsayıcısı */
.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Avatar ile aynı hizada durması için */
    height: 40px;
    flex-shrink: 0;
}

/* İkonların (SVG) boyutu */
.notification-icon svg {
    width: 26px;
    height: 26px;
}

/* Bildirim türüne göre ikon renkleri */
.notification-icon.icon-like {
    color: var(--danger-color);
}

.notification-icon.icon-follow {
    color: var(--success-color);
}

.notification-icon.icon-comment,
.notification-icon.icon-reply {
    color: var(--accent-color);
}

.notification-icon.icon-mention {
    color: var(--secondary-text-color);
}
.notification-icon.icon-message {
    color: #3B5998; 
}
/* Modern Yorum Formu Genel Stilleri */
.modern-comment-form {
    align-items: flex-start; /* Avatarı yukarıda hizala */
}

.modern-comment-form .form-content {
    flex-grow: 1;
}

.modern-comment-form .comment-textarea-wrapper {
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 2px 5px;
    margin-bottom: 8px;
}
.modern-comment-form .comment-textarea-wrapper:focus-within {
     border-color: var(--accent-color);
     box-shadow: 0 0 0 2px var(--accent-color-light);
}

.modern-comment-form textarea.comment-textarea {
    width: 100%;
    border: none;
    background: none;
    padding: 10px 10px;
    font-size: 1rem;
    min-height: 40px;
    max-height: 150px;
    resize: vertical;
    overflow-y: auto;
    line-height: 1.4;
}
.modern-comment-form textarea:focus {
    outline: none;
}

.modern-comment-form .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modern-comment-form .form-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Yorum içine eklenen medya için stil */
.comment-media {
    margin: 10px 0 5px 0;
    max-height: 300px;
    aspect-ratio: 16 / 9;
}
/* style.css dosyanızın uygun bir yerine ekleyin */

/* --- Medya Önizleme Stilleri --- */
.media-preview-container {
    margin-top: 10px;
    position: relative;
    max-width: 100%; /* Konteynerin taşmasını engelle */
}

.media-preview-item {
    width: 100%;
    max-height: 400px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.remove-media-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    transition: background-color 0.2s;
}
.remove-media-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}
/* style.css dosyasının sonuna eklenecek kod */

.modern-comment-form .action-icons {
    display: flex;
    gap: 10px; /* İkonlar arasına boşluk ekler */
}

/* --- Sayaç Rengi Düzeltmesi --- */
/* Sayacın ilerlemeyi gösteren renkli halkası (Varsayılan olarak nötr renk) */
.circular-counter .progress-ring__circle {
    stroke: var(--border-color); /* Başlangıçta arka planla aynı renk */
    stroke-linecap: round; 
}
/* Sadece metin yazıldığında aktif olacak class */
.circular-counter .progress-ring__circle.active {
    stroke: var(--accent-color); /* Yazı yazılınca mavi olsun */
}
/* style.css */
.post {
    transition: background-color 0.2s ease;
}

.post:hover {
    cursor: pointer;
    background-color: var(--hover-bg-color);
}


/* Header'daki linkleri göreceli konumlandırma için ayarla */
.main-nav .nav-icon-link {
    position: relative;
}

.new-posts-indicator {
    display: none; /* JavaScript ile görünür yapılacak */
    position: absolute; /* Taşıyıcıya göre konumlanacak */
    top: 3px;       /* Yukarıdan uzaklık (değeri ayarlayabilirsiniz) */
    right: 5px;     /* Sağdan uzaklık (değeri ayarlayabilirsiniz) */
    width: 10px;    /* Noktanın genişliği */
    height: 10px;   /* Noktanın yüksekliği */
    background-color: var(--accent-color); /* Ana rengimiz */
    border-radius: 50%; /* Tam bir daire yapmak için */
    border: 1.5px solid var(--primary-background-color, white); /* İkonun üzerinde ayrışmasını sağlayan çerçeve */
    animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1); /* Nefes alıp verme animasyonu */
}


.main-feed-column {
    position: relative;
}

.new-posts-bar {
    position: sticky;
    top: 75px; 
    z-index: 1001;
    width: fit-content;
    margin-left: auto; 
    margin-right: auto;
    background-color: var(--accent-color);
    color: white;
    padding: 8px 16px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 9999px;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease-in-out;
}
/* style.css dosyanızın sonuna ekleyebilirsiniz */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(0, 123, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}