/* --- SİTE TEMİZLİK (HEADER/FOOTER GİZLEME) --- */
header, .site-header, #masthead, footer, .site-footer, #colophon, .nav-links, .post-navigation {
    display: none !important;
}
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
/* ==========================================================================
   MEVZUAT FORUM - PLATINUM STYLE (v25.04 FINAL)
   Yapı: Variables > Reset > Layout > Components > Modules > Media Queries
   ========================================================================== */

/* 1. FONTLAR VE DEĞİŞKENLER */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&display=swap');

:root { 
    /* LinkedIn Orijinal Renk Paleti */
    --bg-body: #f3f2ef;       /* Orijinal LinkedIn zemin rengi */
    --bg-card: #ffffff;       /* Kartlar bembeyaz */
    --bg-side: #ffffff;       /* Yan menüler de beyaz */
    --text-main: rgba(0, 0, 0, 0.9); /* Keskin siyah metin */
    --text-light: rgba(0, 0, 0, 0.6); /* Soluk metinler */
    --border: #e0dfdc;        /* LinkedIn'in ince kenarlık rengi */
    --primary: #0a66c2;       /* LinkedIn Mavisi */
    --success: #057642;       /* LinkedIn Yeşili */
    --danger: #cc1016; 
    --gold: #c37d16; 
    --shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05); /* Çok hafif, yok gibi gölge */
}
[data-theme="dark"] { 
    --bg-body:#f3f2ef; --bg-card:#ffffff; --bg-side:#020617; 
    --text-main:#191919; --text-light:#94a3b8; --border:#334155; 
    --shadow:0 10px 15px -3px rgba(0,0,0,0.5); 
}

/* 2. GENEL SIFIRLAMA (RESET) */
/* 2. GENEL SIFIRLAMA (RESET) - LINKEDIN STYLE */
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    /* LinkedIn Orijinal Sistem Font Ailesi */
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    background: var(--bg-body); 
    color: var(--text-main); 
    overscroll-behavior: none; 
    -webkit-tap-highlight-color: transparent; 
    font-size: 14px; /* LinkedIn standardı 14px'tir (Eski 15px büyüktü) */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Yazıların daha net/keskin görünmesini sağlar */
}

#wpadminbar { display: none !important; }

/* LinkedIn hızlı hissettirir. Her şeye animasyon koyarsak site ağırlaşır.
   Bu yüzden global transition kodunu kaldırdım, sadece box-sizing bıraktım. */
*, *::before, *::after { 
    box-sizing: border-box; 
}

kbd { 
    background: #f1f5f9; 
    border: 1px solid #cbd5e1; 
    border-bottom: 2px solid #cbd5e1; 
    border-radius: 4px; 
    padding: 2px 6px; 
    font-size: 0.8em; 
    font-family: monospace; 
    color: #475569; 
}

/* 3. ANA İSKELET (LAYOUT - GÜÇLENDİRİLMİŞ) */
.mf-app { 
    display: flex; 
    height: 100vh; 
    width: 100%; 
    position: fixed; 
    top: 0; left: 0; 
    overflow: hidden; 
    background: var(--bg-body); 
}

/* ============================================================
   SOL - ORTA - SAĞ DÜZENİ (LINKEDIN TARZI FINAL)
   Masaüstü: Ayrı Duran Paneller / Mobil: Tam Ekran Kayar Menüler
   ============================================================ */

/* 1. SOL MENÜ (KULLANICI KARTI / NAVİGASYON) */
.mf-nav {
    width: 240px !important;      /* LinkedIn Sol Sütun Genişliği */
    min-width: 240px !important;
    background: #ffffff !important; /* Kart Beyazı */
    
    /* Masaüstü: Kutu Görünümü */
    border: 1px solid #e0dfdc !important;
    border-radius: 8px !important; 
    margin: 20px 0 0 20px !important; /* Sayfanın kenarından ayır */
    padding: 12px 0 !important;       /* İç boşluk */
    
    display: flex;
    flex-direction: column;
    gap: 4px !important;
    flex-shrink: 0 !important;
    
    /* Yükseklik: İçerik kadar olsun, sonsuza uzamasın */
    height: fit-content !important; 
    max-height: calc(100vh - 40px) !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 300 !important;
    
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04) !important;
    overflow-y: auto !important;
    transition: all 0.3s ease-in-out;
}

/* 2. ORTA AKIŞ (FEED) */
.mf-list {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    
    /* Arka plan şeffaf olsun ki gövde rengi (gri) görünsün */
    background: transparent !important; 
    border-right: none !important; /* Çizgiyi kaldırdık */
    
    display: flex;
    flex-direction: column;
    z-index: 200 !important;
    position: relative !important;
    height: 100% !important;
    
    /* Kartlar arası boşluk için padding */
    padding: 20px !important; 
}

#tList {
    flex: 1;
    overflow-y: auto;
    /* Mobilde kaydırma hissi */
    -webkit-overflow-scrolling: touch; 
    /* Scrollbar'ı gizle ama kaydırmaya izin ver (Temiz görünüm) */
    scrollbar-width: none; 
}
#tList::-webkit-scrollbar { display: none; }

/* 3. SAĞ PANEL (İÇERİK / WIDGET ALANI) */
.mf-main {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    
    /* Masaüstü: Şeffaf zemin (İçindeki kartlar beyaz olacak) */
    background: transparent !important; 
    border-left: none !important; /* Çizgiyi kaldırdık */
    margin-top: 20px !important; /* Üstten hizala */
    padding-right: 20px !important; /* Sağdan boşluk */
    
    position: relative !important;
    z-index: 100 !important;
    height: calc(100vh - 20px) !important;
    overflow: hidden;
}

#contentView, #emptyView {
    height: 100%;
    overflow-y: auto;
    width: 100%;
    border-radius: 8px; /* İçerik alanı da köşeli olsun */
}

/* İçerik görüntüleyici açıldığında arka plan beyaz olsun */
#contentView {
    background: #ffffff;
    border: 1px solid #e0dfdc;
}

/* ============================================================
   📱 MOBİL (TELEFON) AYARLARI (Max 900px)
   Mobilde "Kutu" yapısını iptal edip "Tam Ekran" moduna geçer
   ============================================================ */
@media (max-width: 900px) {
    
    /* Sol Menü: Tam Ekran Drawer (Çekmece) */
    .mf-nav {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 9999 !important;
        box-shadow: none !important;
        
        /* Masaüstü ayarlarını sıfırla */
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-right: 1px solid #e2e8f0 !important;
    }
    
    /* Menü açılınca geri getir */
    .mf-nav.open {
        left: 0 !important;
        box-shadow: 10 0 50px rgba(0,0,0,0.2) !important;
    }

    /* Orta Alan: Tam Ekran */
    .mf-list {
        padding: 0 !important; /* Boşlukları sıfırla */
        border-right: none !important;
    }
    
    /* Orta alandaki kartların kenar boşlukları */
    #tList {
        padding: 10px !important;
    }

    /* Sağ Panel: Tam Ekran Sayfa */
    .mf-main {
        position: fixed !important;
        top: 0; 
        left: 0; 
        width: 100% !important; 
        height: 100% !important;
        z-index: 500 !important;
        
        /* Masaüstü ayarlarını sıfırla */
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important; /* Mobilde zemin beyaz olsun */
        
        transform: translateX(100%); /* Sağda gizli */
        transition: transform 0.3s ease-in-out;
    }

    .mf-main.open {
        transform: translateX(0) !important; /* Ekrana getir */
    }
    
    #contentView {
        border: none !important;
        border-radius: 0 !important;
    }
}

/* 4. ANİMASYONLAR (KEYFRAMES) */
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes heartPop { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
@keyframes badgeShine { 0%{left:-100%} 20%{left:200%} 100%{left:200%} }
@keyframes ripple { to { transform:scale(4); opacity:0; } }
@keyframes mPop { 0%{transform:scale(.9);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes lbPop { 0%{transform:scale(.5);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes toastSlide { from { transform: translateY(-50px) scale(0.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes pageFade { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} }
@keyframes skShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes zoomIn { from{transform:scale(0.9); opacity:0;} to{transform:scale(1); opacity:1;} }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
@keyframes pulseMic { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes xLightBreath { 0% { text-shadow: 0 0 2px rgba(255,255,255,0.8); opacity: 0.9; } 100% { text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 25px #f0abfc; opacity: 1; } }
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes aiPulse { 0% { box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4); } 100% { box-shadow: 0 4px 20px rgba(217, 70, 239, 0.8); } }
@keyframes mfFadeIn { 0% { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); } 100% { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); } }
@keyframes mfZoomIn { 0% { opacity: 0; transform: scale(0.95) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* 5. UI BİLEŞENLERİ (Button, Input, Badge, Toast) */
.mf-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 6px 24px; 
    background: var(--primary); 
    color: #fff; 
    border: none; 
    border-radius: 24px; /* Tam yuvarlak köşeler (Hap) */
    cursor: pointer; 
    font-weight: 600; 
    font-size: 14px; /* Standart okunabilir font */
    font-family: inherit;
    transition: background-color 0.2s; 
    box-shadow: none !important; /* Gölge yok, düz tasarım */
    min-height: 32px;
}

.mf-btn:hover { 
    background-color: #004182; /* Üzerine gelince koyu lacivert */
    transform: none; /* Zıplama efektini iptal et */
}

.mf-btn i { margin-right: 6px; }

/* Input ve Select: Gri Arka Plan, İnce Kenarlık */
.mf-inp, .mf-sel { 
    width: 100%; 
    padding: 0 12px; 
    height: 40px; /* Yükseklik biraz kısıldı */
    border: 1px solid transparent; 
    border-radius: 4px; /* Hafif yuvarlak köşe */
    margin-bottom: 12px; 
    background: #eef3f8; /* LinkedIn input grisi */
    color: var(--text-main); 
    box-sizing: border-box; 
    font-size: 14px; 
    transition: all 0.2s ease; 
    font-weight: 400; 
}

/* Tıklayınca Beyaz Olup Çerçeve Yaksın */
.mf-inp:focus, .mf-sel:focus { 
    background: #ffffff; 
    border-color: var(--text-main); 
    box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.2); /* İnce mavi hale */
    outline: none; 
    transform: none; 
}

/* Eski Ripple efektini iptal ediyoruz, sade olsun */
.ripple { display: none; }

/* Kategori Chip'leri */
.cat-scroll-area { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; width: 100% !important; max-width: 100vw !important; padding: 10px 5px !important; gap: 6px !important; pointer-events: auto !important; z-index: 1000 !important; cursor: grab; }
.cat-scroll-area::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.cat-chip { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; font-size: 0.75rem; font-weight: 600; color: #64748b; cursor: pointer; user-select: none; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; height: 30px; }
.cat-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cat-chip:hover:not(.active) { background: #f1f5f9; }

/* Toast (Bildirim) */
#mfToastBox { position: fixed; top: 20px; right: 20px; z-index: 9999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.mf-toast { background: rgba(15, 23, 42, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important; border-radius: 12px !important; font-weight: 600; color: #fff; padding: 12px 20px; display: flex; align-items: center; gap: 10px; transform: translateZ(0); will-change: transform, opacity; animation: toastSlide 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.mf-toast.success { border-left: 4px solid var(--success); }
.mf-toast.error { border-left: 4px solid var(--danger); }

/* ============================================================
   MODERN MODAL & LIGHTBOX (IPHONE STYLE ANIMATIONS)
   Hem PC hem Mobil için optimize edilmiş akıcı geçişler.
   ============================================================ */

/* ============================================================
   MODAL & PENCERE SİSTEMİ (GÜVENLİ MOD - DONMA YOK)
   ============================================================ */

/* 1. ANA PERDE (Arka Plan) */
.mf-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 3000000 !important; /* En üstte */
    display: none; /* JS ile flex olacak */
    align-items: center;
    justify-content: center;
    
    /* GÜVENLİK AYARI: Asla görünmez başlama! */
    opacity: 1 !important; 
    transform: none !important;
    
    background: rgba(15, 23, 42, 0.85); /* Koyu arka plan */
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
}

/* JS 'open' sınıfı eklemeyi unutursa bile açılsın */
.mf-modal.open {
    display: flex !important;
}

/* 2. İÇERİK KUTUSU */
.mf-box {
    background: #ffffff;
    width: 95%;
    max-width: 550px;
    max-height: 90vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;

    /* Animasyonları kapattık, donma riskini sıfırladık */
    opacity: 1 !important;
    transform: none !important;
}

/* 3. BAŞLIK VE GÖVDE */
.mf-box-head {
    padding: 20px 25px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: #0f172a;
    background: #ffffff;
    flex-shrink: 0;
}

.mf-box-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
    color: #334155;
    line-height: 1.6;
}

/* 4. LIGHTBOX (Resim Büyütme) ÖZEL AYARI */
#mfLightbox {
    background: rgba(0, 0, 0, 0.9) !important; /* Tam karanlık mod */
    backdrop-filter: none; /* Resim net görünsün diye blur kapalı */
}

#mfLbImg {
    max-height: 90vh;
    max-width: 95vw;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    
    /* Resim açılma efekti */
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Lightbox açılınca resim büyüsün */
.mf-modal.open #mfLbImg {
    transform: scale(1);
}

/* --- MOBİL ÖZEL AYARLAR (SHEET MODAL) --- */
/* Mobilde pencereler alttan kayarak gelir */
@media (max-width: 600px) {
    .mf-modal {
        align-items: flex-end; /* Pencereyi en alta yapıştır */
        padding-bottom: 0;
    }

    .mf-box {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0; /* Sadece üst köşeler yuvarlak */
        margin: 0;
        max-height: 85vh; /* Ekranı tam kaplamasın, arkası görünsün */
        
        /* Mobilde Alttan Yukarı Kayma Efekti */
        transform: translateY(100%); 
    }

    .mf-modal.open .mf-box {
        transform: translateY(0);
    }
}

/* ============================================================
   6. MENÜ LİNKLERİ VE İŞ İLANI KARTLARI (LINKEDIN STYLE)
   ============================================================ */

/* Menü Linkleri (Aynı kalmalı, bozmuyoruz) */
.mf-link { display:flex; align-items:center; gap:12px; padding:10px 12px; color:#666; cursor:pointer; border-radius:4px; transition:0.2s; font-size:14px; text-decoration:none; font-weight:600; margin-bottom:2px }
.mf-link:hover, .mf-link.active { background:#f3f2ef; color:#191919 }
.mf-sep { font-size:11px; color:rgba(0,0,0,0.5); font-weight:700; margin:15px 0 5px; letter-spacing:0.5px; padding-left:12px; text-transform:uppercase }

/* İŞ İLANI KARTLARI (LINKEDIN STYLE - SADE & BEYAZ) */
.mf-feed-card { 
    background:#ffffff; 
    border:1px solid #e0dfdc; 
    border-radius:8px; 
    margin-bottom:8px; 
    box-shadow:0 0 0 1px rgba(0,0,0,0.04); 
    display:flex; 
    flex-direction:column; 
    position:relative; 
    transition:box-shadow 0.2s 
}
.mf-feed-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1)!important; border-color:#e0dfdc; transform:none!important }

/* Kart Başlığı */
.mf-card-header { padding:12px 16px; display:flex; align-items:flex-start; gap:12px; position:relative }
.mf-card-avt { width:48px; height:48px; border-radius:4px; object-fit:cover; border:1px solid #f3f2ef }
.mf-card-meta { display:flex; flex-direction:column; line-height:1.4 }
.mf-card-name { font-weight:600; font-size:14px; color:#191919; display:flex; align-items:center; gap:6px }
.mf-card-prof { font-size:12px; color:rgba(0,0,0,0.6); margin-top:2px }

/* Medya Alanı */
.mf-card-media { width:100%; background:#f3f2ef; display:flex; align-items:center; justify-content:center; max-height:400px; overflow:hidden; cursor:pointer }
.mf-card-media img { width:100%; height:auto; object-fit:cover }

/* İçerik */
.mf-card-body { padding:8px 16px 12px 16px; cursor:pointer }
.mf-card-title { font-weight:600; font-size:14px; margin-bottom:4px; color:#191919; line-height:1.4 }
.mf-card-text { font-size:14px; color:#191919; line-height:1.5 }

/* Alt Aksiyonlar (Beğen/Yorum) */
.mf-card-actions { padding:4px 8px; border-top:1px solid #e0dfdc; display:flex; justify-content:space-between; background:#fff; border-radius:0 0 8px 8px }
.mf-act-btn { background:transparent; border:none; font-size:14px; font-weight:600; color:#666; cursor:pointer; display:flex; align-items:center; gap:8px; padding:10px 8px; flex:1; justify-content:center; border-radius:4px; transition:background 0.2s }
.mf-act-btn:hover { background:#f3f2ef; color:#191919 }
.mf-act-btn.liked { color:#0a66c2 }
.mf-act-btn.liked i { color:#0a66c2; font-weight:900 }

/* Açılır Menü (...) */
.mf-card-menu { position:absolute; right:10px; top:35px; background:#fff; border:1px solid #e0dfdc; border-radius:0 0 8px 8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:50; display:none; flex-direction:column; min-width:160px }
.mf-card-menu div { padding:12px 16px; font-size:14px; color:#191919; cursor:pointer; border-bottom:1px solid #f3f2ef }
.mf-card-menu div:hover { background:#f3f2ef }
.mf-card-menu.active { display:flex }

/* Rozetler (Eskisi Gibi Kalsın ama Sadeleşsin) */
.role-badge { font-size:10px; padding:2px 6px; border-radius:4px; color:#fff; font-weight:700; text-transform:uppercase; display:inline-block; transform:translateY(-1px) }
.badge-gray { background:#666 } .badge-purple { background:#7c3aed } .badge-red { background:#e11d48 } .badge-blue { background:#0a66c2 }

/* Skeleton Loading */
.sk-card { background: var(--bg-card); margin: 20px; border-radius: 16px; padding: 15px; border: 1px solid var(--border); }
.sk-head { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; }
.sk-avt { width: 44px; height: 44px; border-radius: 50%; background: #e2e8f0; animation: pulse 1.5s infinite; }
.sk-meta { flex: 1; }
.sk-line { height: 10px; background: #e2e8f0; border-radius: 4px; margin-bottom: 6px; animation: pulse 1.5s infinite; }
.sk-img { width: 100%; height: 200px; background: #e2e8f0; border-radius: 8px; margin-bottom: 15px; animation: pulse 1.5s infinite; }

/* 7. MESAJLAR VE SOHBET (CHAT) */
.mf-msg { margin-bottom: 15px; display: flex; flex-direction: column; align-items: flex-start; animation: fadeIn 0.3s ease; }
.mf-msg.me { align-items: flex-end; }
.mf-msg-body { background:var(--bg-card); color:var(--text-main); padding:15px 20px; border-radius:0 12px 12px 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); max-width:98%; border:1px solid var(--border); word-wrap:break-word; position: relative; font-size: 1rem; line-height: 1.6; }
.mf-msg.me .mf-msg-body { background: rgba(37, 99, 235, 0.08) !important; color: #334155 !important; border: 1px solid rgba(37, 99, 235, 0.2); border-left: 5px solid #2563eb !important; border-radius: 8px !important; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.05); }
.mf-msg.me .mf-msg-body strong, .mf-msg.me .mf-msg-body b { color: #1e40af !important; }
.mf-msg-body img { max-width:100%; height:auto; max-height:300px; border-radius:8px; cursor:zoom-in; object-fit:cover; display:block; margin:10px 0; border:1px solid var(--border); }
.mf-msg-body ul, .mf-msg-body ol { margin: 10px 0; padding-left: 25px; }
.mf-msg-body li { margin-bottom: 5px; padding-left:5px; }
.mf-msg-body li::marker { color:var(--primary); font-weight:900; font-size:1.2em; }
.mf-msg-body a { position:relative; text-decoration:none; color:var(--primary); font-weight:600; transition:color .3s; }
.mf-msg-body a::after { content:''; position:absolute; width:0; height:2px; bottom:-2px; left:0; background:var(--primary); transition:width .3s; }
.mf-msg-body a:hover::after { width:100%; }
.del-rep { display:none; position:absolute; top:-8px; right:-8px; background:var(--danger); color:#fff; width:20px; height:20px; border-radius:50%; font-size:12px; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.mf-msg.me:hover .del-rep { display:flex; }

/* Cevap Alanı & Etiketler */
#replyContainer { padding: 15px; background: var(--bg-card); border-top: 1px solid var(--border); flex-shrink: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); max-height: 500px; opacity: 1; overflow: hidden; transform-origin: bottom; }
#replyContainer.closed { max-height: 0 !important; opacity: 0 !important; padding: 0 !important; border: none !important; margin: 0 !important; }
#toggleReplyBtn { width: 100%; background: var(--bg-body); color: var(--text-light); border: 1px solid var(--border); padding: 8px; text-align: center; cursor: pointer; font-size: 0.8rem; font-weight: 700; border-radius: 8px 8px 0 0; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
#toggleReplyBtn:hover { color: var(--primary); background: #fff; }
.solution-msg .mf-msg-body { border: 2px solid #10b981 !important; background: #ecfdf5 !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }
.sol-badge { background: #10b981; color: #fff; font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; font-weight: bold; display: inline-block; margin-bottom: -10px; margin-left: 10px; z-index: 5; position: relative; }
.sol-btn { border-top: 1px dashed #cbd5e1; margin-top: 8px; padding-top: 8px; font-size: 0.8rem; color: #64748b; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.sol-btn:hover { color: #10b981; font-weight: bold; }
.mention { color: #2563eb; font-weight: 800; background: rgba(37, 99, 235, 0.1); padding: 2px 6px; border-radius: 6px; cursor: pointer; text-decoration: none; transition: 0.2s; }
.mention:hover { background: #2563eb; color: #fff; }

/* 8. HİKAYELER (STORIES) */
.mf-stories { display:flex; gap:15px; padding:15px; overflow-x:auto; background:var(--bg-card); border-bottom:1px solid var(--border); min-height:100px; flex-shrink:0; scrollbar-width:none; }
.mf-story-item { text-align:center; cursor:pointer; flex-shrink:0; width:65px; position:relative; }
.mf-story-ring { width:60px; height:60px; border-radius:50%; padding:2px; border:2px solid var(--primary); display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.mf-story-item:hover .mf-story-ring { transform:scale(1.05); }
.mf-story-ring img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--bg-card); }
.mf-story-add { border:2px dashed #cbd5e1!important; background:#f8fafc; color:#2563eb; font-size:1.5rem; }
.mf-story-name { font-size:.75rem; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story-progress-wrap { position: absolute; top: 10px; left: 10px; right: 10px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; z-index: 50; }
.story-progress-bar { height: 100%; width: 0; background: #fff; }
.story-delete-btn { position: absolute; top: 25px; right: 15px; color: #fff; background: rgba(239, 68, 68, 0.8); padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; cursor: pointer; z-index: 50; display: none; }

/* 9. ÖZEL MODÜLLER (PDF, AUTH, JOB, VIP) */

/* PDF Okuyucu */
#mPdfReader .mf-box { max-width: 1200px; width: 95%; height: 90vh; background: #525659; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
#mPdfReader .mf-box-head { background: #323639; color: #fff; border-bottom: 1px solid #000; padding: 15px 20px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; }
#mPdfReader .mf-box-body { padding: 0; flex: 1; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#pdfFrame { width: 100%; height: 100%; border: none; display: block; background: #fff; touch-action: manipulation; }

/* Giriş Ekranı (Split Screen) */
.auth-container { display: flex; width: 900px; max-width: 95%; height: 600px; max-height: 90vh; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); animation: zoomIn 0.3s ease; }
.auth-visual { flex: 1; background: url('https://imarx.com.tr/wp-content/uploads/2026/02/Whisk_54f32b120c15f0299c64d9ddd2d2c2e5dr.jpeg') no-repeat center center; background-size: cover; position: relative; display: flex; align-items: flex-end; padding: 40px; }
.auth-visual::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.95) 100%); z-index: 1; }
.auth-overlay { position: relative; z-index: 2; color: #ffffff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.8); padding-bottom: 20px; }
.auth-overlay h2 { margin: 0 0 10px 0; font-size: 2.2rem; font-weight: 900; line-height: 1.1; color: #fff; }
.auth-overlay p { margin: 0; font-size: 1.1rem; font-weight: 500; opacity: 1; color: #e2e8f0; }
.auth-form-area { flex: 1; padding: 50px; position: relative; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
.auth-close { position: absolute; top: 20px; right: 20px; font-size: 2rem; cursor: pointer; color: #cbd5e1; line-height: 20px; transition: 0.2s; }
.auth-close:hover { color: var(--danger); }
.auth-label { display: block; font-size: 0.85rem; font-weight: 700; color: #64748b; margin-bottom: 8px; }
.auth-inp-group { position: relative; margin-bottom: 20px; }
.auth-inp-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.auth-inp { width: 100%; height: 50px; padding: 0 45px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 1rem; color: #334155; box-sizing: border-box; transition: 0.3s; }
.auth-inp:focus { border-color: var(--primary); outline: none; background: #f8fafc; }
.auth-inp-simple { width: 100%; height: 45px; padding: 0 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 0.95rem; box-sizing: border-box; color: #334155; background: #fff; display: flex; align-items: center; }
.auth-inp-simple:focus { border-color: var(--primary); outline: none; }
.auth-btn { width: 100%; padding: 15px; background: var(--primary); color: #fff; font-weight: 800; border: none; border-radius: 12px; cursor: pointer; font-size: 1rem; box-shadow: 0 10px 20px -5px rgba(37,99,235,0.4); transition: 0.2s; }
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px -5px rgba(37,99,235,0.5); }
.auth-switch { text-align: center; margin-top: 25px; font-size: 0.9rem; color: #64748b; }
.auth-switch span { color: var(--primary); font-weight: 700; cursor: pointer; }
.show-pass { left: auto !important; right: 15px; cursor: pointer; }

/* ============================================================
   5. SAĞ PANEL (LINKEDIN KOMPAKT WIDGET)
   ============================================================ */
/* Panel Düzeni */
.mf-empty-dashboard { width:100%; display:flex; flex-direction:column; gap:12px; padding:0!important; background:transparent!important; align-items:stretch!important }
.mf-empty-dashboard > div { background:#ffffff; border:1px solid #e0dfdc; border-radius:8px; padding:12px; box-shadow:0 0 0 1px rgba(0,0,0,0.04); margin:0!important }

/* Başlıklar (LinkedIn Tarzı) */
.mf-empty-dashboard > div > div:first-child { font-size:14px!important; color:#191919!important; font-weight:600!important; margin-bottom:8px!important; display:flex; justify-content:space-between; align-items:center }
.mf-empty-dashboard > div > div:first-child::after { content:'i'; font-family:serif; font-weight:bold; font-size:10px; width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid #191919; opacity:0.6 }

/* Araçlar Listesi */
.tools-grid { display:flex!important; flex-direction:column!important; gap:0!important }
.tool-card { display:flex!important; flex-direction:column!important; padding:4px 8px 4px 20px!important; cursor:pointer; border-radius:4px; margin-bottom:2px; position:relative; background:transparent!important; border:none!important; box-shadow:none!important; align-items:flex-start!important }
.tool-card:hover { background:#eef3f8!important }
/* Madde İşareti (Nokta) */
.tool-card::before { content:'•'; position:absolute; left:6px; top:4px; color:#191919; font-size:12px; font-weight:bold }
.tool-name { font-size:13px!important; font-weight:600!important; color:#191919!important; margin-bottom:2px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100% }
.tool-desc { display:block!important; font-size:11px!important; color:rgba(0,0,0,0.6)!important; margin:0!important; line-height:1.2 }
.tool-icon, .tool-card::after { display:none!important }

/* Liderlik Listesi */
.leader-grid { display:flex!important; flex-direction:column!important; gap:0!important }
.leader-card { display:flex!important; align-items:center!important; padding:6px 4px!important; background:transparent!important; border:none!important; border-radius:4px!important; margin:0!important; box-shadow:none!important }
.leader-card:hover { background:#eef3f8!important }
.leader-medal { font-size:13px!important; margin-right:8px!important; width:16px; text-align:center; color:#c37d16 }
.leader-img { width:28px!important; height:28px!important; margin-right:8px!important; border-radius:50%; border:none!important }
.leader-info { flex:1; overflow:hidden }
.leader-name { font-size:13px!important; font-weight:600; color:#191919; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.leader-prof { font-size:11px!important; color:rgba(0,0,0,0.6); line-height:1 }
.leader-score { font-size:12px!important; color:rgba(0,0,0,0.6); font-weight:400 }

/* İş İlanı Kartı */
.job-card { border-left: 5px solid #059669 !important; padding: 20px !important; }
.job-header { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 15px; }
.job-comp-logo { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.job-meta-top { flex: 1; }
.job-title { font-weight: 800; font-size: 1.1rem; color: var(--text-main); line-height: 1.3; margin-bottom: 4px; }
.job-company { font-size: 0.85rem; color: var(--text-light); }
.job-apply-btn { background: #059669; color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.job-apply-btn:hover { background: #047857; transform: translateY(-2px); }
.job-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.job-tag { font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; background: var(--bg-body); border: 1px solid var(--border); color: var(--text-light); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.job-desc { font-size: 0.9rem; color: var(--text-main); opacity: 0.8; line-height: 1.5; }
/* ============================================================
   KURUMSAL PROFİL KARTI (VIP KİMLİK TARZI)
   Mobile: Ekranın %90'ını kaplar / PC: 400px sabit durur
   ============================================================ */

/* Kartın Dış Çerçevesi */
.uc-card-box {
    background: #ffffff !important;
    border-radius: 16px !important; /* Modern yuvarlak köşeler */
    overflow: hidden !important;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1) !important;
    width: 100% !important;
    max-width: 420px !important; /* PC'de çok genişlemesin */
    margin: 0 auto !important; /* Ortala */
    border: 1px solid #e2e8f0 !important;
}

/* 1. Üst Alan (Gradient Arka Plan) */
.uc-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
    padding: 30px 20px 15px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
}

/* 2. Profil Resmi (Ortada, Parlak) */
.uc-avatar {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 4px solid #ffffff !important; /* Beyaz çerçeve */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    margin-bottom: 10px !important;
}

/* 3. İsim ve Ünvan */
.uc-name {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1e293b !important; /* Koyu Lacivert */
    margin: 5px 0 2px 0 !important;
    letter-spacing: -0.5px !important;
}

.uc-title {
    font-size: 0.85rem !important;
    color: #64748b !important; /* Gri */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 4. İstatistikler (Yan Yana Izgara) */
.uc-stats-grid {
    display: flex !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.uc-stat-item {
    flex: 1 !important;
    text-align: center !important;
    padding: 15px 5px !important;
    border-right: 1px solid #f1f5f9 !important;
}
.uc-stat-item:last-child { border-right: none !important; }

.uc-stat-num {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important; /* Senin ana rengin */
}
.uc-stat-label {
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
}

/* 5. Alt Bilgi (Bio ve Butonlar) */
.uc-body {
    padding: 20px !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* MOBİL ÖZEL AYAR (Telefonda kenarlardan taşmasın) */
@media (max-width: 600px) {
    .uc-card-box {
        max-width: 92% !important; /* Ekranın %92'si */
        margin-top: 10% !important; /* Biraz aşağıdan başlasın */
    }
}
/* Mevzuat Konseyi & Protokol Odası */
.protocol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.protocol-card, .whisper-card { background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid var(--primary); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 16px; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.03); cursor: pointer; position: relative; }
.protocol-card:hover, .whisper-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.08); border-color: #cbd5e1; }
.pc-avatar, .whisper-avatar { width: 60px !important; height: 60px !important; min-width: 60px !important; border-radius: 12px; object-fit: cover; border: 2px solid #e2e8f0; flex-shrink: 0; }
.whisper-avatar { border-radius: 50%; } 
.pc-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.pc-name, .whisper-author { color: #0f172a; font-weight: 800; font-size: 1.1rem; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.pc-corp { color: var(--primary); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.pc-role { color: #475569; font-size: 0.85rem; margin-bottom: 8px; font-weight: 500; }
.pc-city-badge { background: #f1f5f9; color: #475569; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cbd5e1; font-weight: 600; }
.pc-search-wrap { display: flex; gap: 10px; margin-bottom: 20px; background: #ffffff; padding: 12px 20px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.pc-search-inp { flex: 1; background: transparent; border: none; color: #1e293b; font-size: 1rem; outline: none; padding: 5px; }
.pc-search-inp::placeholder { color: #94a3b8; }
.pc-msg-btn { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; border-radius: 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; margin-left: auto; }
.pc-msg-btn:hover { background: var(--primary); color: #ffffff; border-color: var(--primary); transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.whisper-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); position: relative; overflow: visible; }
.whisper-inp { width: 100%; background: #f8fafc; border: 1px solid #cbd5e1; color: #1e293b; padding: 12px; border-radius: 8px; font-size: 0.95rem; resize: none; margin-bottom: 10px; outline: none; transition: 0.3s; }
.whisper-inp:focus { border-color: var(--primary); background: #ffffff; box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.whisper-content { flex: 1; }
.whisper-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.whisper-time { color: #64748b; font-size: 0.75rem; }
.whisper-text { color: #334155; font-size: 0.95rem; line-height: 1.5; }
.whisper-actions { display: flex; gap: 15px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.w-act-btn { font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.w-act-btn.edit { color: var(--primary) !important; } .w-act-btn.edit:hover { color: #1d4ed8 !important; transform: translateY(-1px); }
.w-act-btn.delete { color: #ef4444 !important; } .w-act-btn.delete:hover { color: #dc2626 !important; transform: translateY(-1px); }
.vip-tab-btn { flex: 1; background: #ffffff; color: #475569; border: 1px solid #cbd5e1; padding: 12px 0; font-size: 0.85rem; font-weight: 700; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.vip-tab-btn:hover { background: #f8fafc; color: #0f172a; border-color: #94a3b8; }
.vip-tab-btn.active-tab { background: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important; }
.vip-ai-btn { background: rgba(139, 92, 246, 0.05) !important; color: #8b5cf6 !important; border: 1px solid rgba(139, 92, 246, 0.4) !important; }
.vip-ai-btn i { color: #d946ef !important; }
.vip-ai-btn.active-tab { background: linear-gradient(45deg, #6366f1, #8b5cf6, #d946ef) !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important; animation: aiPulse 2s infinite alternate !important; }
.vip-ai-btn.active-tab i { color: #fef08a !important; text-shadow: 0 0 8px rgba(254, 240, 138, 0.8) !important; }

/* Makale Görünümü (Reader Mode) */
.mf-article-view { font-family: 'Merriweather', serif; font-size: 1.15rem; line-height: 1.9; color: #334155; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-bottom: 30px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.mf-article-view p { margin-bottom: 25px; text-align: justify; }
.mf-article-view > p:first-of-type::first-letter { color: var(--primary); float: left; font-family: 'Inter', sans-serif; font-size: 4rem; line-height: 0.8; font-weight: 800; padding-right: 12px; padding-top: 4px; }
.mf-article-view h1, .mf-article-view h2, .mf-article-view h3 { font-family: 'Inter', sans-serif; color: #0f172a; margin-top: 30px; margin-bottom: 15px; font-weight: 800; }
.mf-article-view blockquote { border-left: 5px solid var(--gold); background: #fffbeb; margin: 30px 0; padding: 15px 25px; font-style: italic; color: #4b5563; border-radius: 0 8px 8px 0; }
.mf-article-view ul, .mf-article-view ol { margin-bottom: 25px; padding-left: 20px; }
.mf-article-view li { margin-bottom: 10px; }

/* Sesli Arama İkonu */
.search-wrapper { position: relative; display: flex; align-items: center; }
.voice-btn { position: absolute; right: 15px; color: var(--primary); cursor: pointer; font-size: 1.2rem; transition: 0.2s; background: none; border: none; }
.voice-btn:hover { transform: scale(1.2); color: var(--danger); }
.voice-btn.listening { color: var(--danger); animation: pulseMic 1s infinite; }

/* AI Asistan Float Butonu */
.ai-float-wrapper { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 999999 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.ai-float-wrapper:hover { transform: translateY(-5px); }
.ai-float-btn { width: 60px !important; height: 60px !important; background: linear-gradient(135deg, #6366f1, #d946ef) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 10px 25px rgba(99, 102, 241, 0.6) !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; position: relative !important; z-index: 2 !important; }
.ai-float-pulse { position: absolute !important; width: 100% !important; height: 100% !important; background: rgba(99, 102, 241, 0.4) !important; border-radius: 50% !important; z-index: 1 !important; animation: pulse-ring 3s infinite ease-out !important; }
.ai-float-tooltip { position: absolute; right: 75px; background: #1e1b4b; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; opacity: 0; transition: 0.3s; pointer-events: none; white-space: nowrap; }
.ai-float-wrapper:hover .ai-float-tooltip { opacity: 1; }
.ai-logo-x { font-family: 'Verdana', sans-serif !important; font-weight: 900 !important; font-size: 2.2rem !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; line-height: 1 !important; padding-bottom: 4px !important; display: block !important; animation: xLightBreath 4s ease-in-out infinite alternate !important; }
.ai-badge-mini { position: absolute; top: 0px; right: 0px; background: #ffffff; color: #7c3aed; font-size: 0.65rem; font-weight: 900; padding: 2px 5px; border-radius: 6px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); z-index: 10; pointer-events: none; animation: badgeFloat 3s ease-in-out infinite !important; }

/* 10. MOBİL GÖRÜNÜM (MEDIA QUERIES) */
@media(max-width:900px){ 
    .mf-app { flex-direction:column; padding-top:60px; padding-bottom: calc(60px + env(safe-area-inset-bottom)); } 
    .mob-head { display:flex; padding:10px 15px; align-items:center; justify-content:space-between; position:absolute; top:0; left:0; width:100%; height:60px; z-index:2000000; box-sizing: border-box; background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid #cbd5e1 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
    .mob-head i { color: #0f172a !important; }
    .mob-head span { font-size: 1.4rem !important; font-weight: 900 !important; letter-spacing: -0.5px !important; background: linear-gradient(135deg, #0f172a 30%, var(--primary) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 2px 3px rgba(37, 99, 235, 0.15)) !important; }
    
    .mob-nav-bar { display:flex; position:fixed; bottom:0; left:0; width:100%; height:60px; z-index:99999; justify-content:space-around; align-items:center; background: rgba(255, 255, 255, 0.95) !important; border-top: 1px solid #cbd5e1 !important; box-shadow: 0 -8px 25px rgba(15, 23, 42, 0.08) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; padding-bottom: env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); }
    .mob-nav-item { display:flex; flex-direction:column; align-items:center; color:#64748b !important; font-size:0.65rem; gap:4px; cursor: pointer; font-weight: 600; }
    .mob-nav-item i { font-size:1.4rem; transition: 0.2s; }
    .mob-nav-item.active { color: var(--primary) !important; position: relative; }
    .mob-nav-item.active i { transform: translateY(-6px); filter: drop-shadow(0 0 5px rgba(37, 99, 235, 0.6)); }
    .mob-nav-item.active::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 4px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 10px var(--primary); animation: fadeIn 0.3s ease; }
    .mob-nav-item:nth-child(2) { margin-right: 35px !important; }
    .mob-nav-item:nth-child(4) { margin-left: 35px !important; }
    .mob-nav-item:nth-child(3) { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background: var(--primary) !important; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); border: 5px solid #ffffff !important; color: #fff !important; z-index: 10; }
    .mob-nav-item:nth-child(3) i { font-size: 1.8rem; color: #fff !important; transform: none !important; }
    .mob-nav-item:nth-child(3) span { display: none; }

    .mf-nav { display: block; position: fixed; top: 0; left: -100%; width: 280px; height: 100%; z-index: 999999; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 100px 0 0 100vw rgba(0,0,0,0); }
    .mf-nav.open { left: 0; box-shadow: 0 0 0 100vw rgba(0,0,0,0.6); }
    .mf-list { width: 100vw !important; height: calc(100dvh - 60px) !important; flex: none !important; display: flex !important; overflow-y: auto !important; padding-top: 0; background: var(--bg-body); }
    .mf-main { position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100dvh !important; background: var(--bg-body); transform: translateX(100%) !important; z-index: 99999; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding-top: 0 !important; }
    .mf-main.open { transform:translateX(0) !important; }
    
    .mf-stories { background: var(--bg-card); padding: 10px; height: auto; border-bottom: 1px solid var(--border); }
    .mf-ticker { display:none; }
    .mf-feed-card { margin: 10px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; }
    .mf-card-media { max-height: 250px; } 
    .article-title { font-size: 1.5rem; }
    .article-header { padding: 20px; }
    #contentView { padding-bottom: 80px !important; }
    
    .stats-grid, #emptyView.mf-empty-dashboard { display: none !important; }
    .leader-grid { grid-template-columns: 1fr; }
    .leader-card { flex-direction: row; text-align: left; align-items: center; padding: 15px; }
    .leader-medal { font-size: 1.5rem; margin-bottom: 0; margin-right: 10px; }
    .leader-img { width: 40px; height: 40px; margin-bottom: 0; margin-right: 15px; }
    .leader-info { flex: 1; }
    .leader-prof { margin-bottom: 0; }
    
    .ai-float-wrapper { bottom: 85px !important; right: 20px !important; }
    .ai-float-tooltip { display: none !important; }
    .ai-badge-mini { background: #fef08a !important; color: #000 !important; top: -2px !important; right: -2px !important; }
    .ai-logo-x { color: #ffffff !important; text-shadow: 0 0 5px rgba(255,255,255,0.9) !important; }
    
    #mPdfReader .mf-box { width: 100% !important; height: 100% !important; max-height: 100dvh; border-radius: 0; margin: 0; }
    #mPdfReader .mf-box-head { padding: 10px 15px; font-size: 0.9rem; }
    .mf-article-view { padding: 20px; font-size: 1.05rem; }
    
    .auth-container { flex-direction: column; height: auto; min-height: 80vh; background-color: #ffffff !important; opacity: 1 !important; box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important; }
    .auth-visual { display: none; }
    .auth-form-area { padding: 30px; }
    .auth-label { color: #1e293b !important; font-weight: 700 !important; }
    .auth-inp-group { width: 100% !important; position: relative !important; }
    .auth-inp { height: 50px !important; min-height: 50px !important; width: 100% !important; box-sizing: border-box !important; padding: 0 45px !important; margin: 0 !important; border: 2px solid #e2e8f0 !important; background-color: #f8fafc !important; color: #0f172a !important; -webkit-appearance: none; }
    .auth-btn { margin-top: 15px !important; }
    
    /* Mobil Kaydırma Animasyonları */
    .mf-stories, .mf-ticker, .mf-search-cont, .cat-scroll-area { transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-out, margin 0.3s ease; transform-origin: top; overflow: hidden; will-change: max-height, opacity, margin; transform: translateZ(0); backface-visibility: hidden; }
    .mf-list.scroll-down .mf-stories, .mf-list.scroll-down .mf-ticker, .mf-list.scroll-down .mf-search-cont { max-height: 0 !important; min-height: 0 !important; opacity: 0; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: none !important; pointer-events: none; }
    .mf-list.scroll-down .cat-scroll-area { max-height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
}

/* 11. DESKTOP GÖRÜNÜM (ZORUNLU AYARLAR) */
@media (min-width: 901px) {
    
    /* --- EKLENEN KISIM: Mobil Butonları Masaüstünde GİZLE --- */
    .mob-head, .mob-nav-bar, #menuToggleBtn, .menu-trigger { 
        display: none !important; 
    }

    /* --- MEVCUT AYARLAR (AYNEN KORUNDU) --- */
    .mf-nav { background: #ffffff !important; border-right: 1px solid #e2e8f0 !important; box-shadow: 4px 0 25px rgba(15, 23, 42, 0.03) !important; position: relative !important; z-index: 300 !important; }
    .mf-list { background: #f8fafc !important; border-right: none !important; z-index: 200 !important; }
    .mf-main { background: #ffffff !important; border-left: 1px solid #e2e8f0 !important; box-shadow: -4px 0 25px rgba(15, 23, 42, 0.03) !important; position: relative !important; z-index: 250 !important; }
    #contentView { background: #ffffff !important; }
    
    /* Sağ Panel Slide */
    .right-panel { position: fixed; top: 0; right: -300px; width: 280px; height: 100%; background: var(--bg-card); z-index: 3000000; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -5px 0 25px rgba(0,0,0,0.1); display: flex; flex-direction: column; border-left: 1px solid var(--border); background-color: #ffffff !important; }
    .right-panel.open { right: 0; }
    .rp-head { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.1rem; background: #f1f5f9 !important; color: #1e293b !important; }
    .rp-body { flex: 1; overflow-y: auto; padding: 20px; color: #334155 !important; }
    .mini-leader-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-body); border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
    .mini-leader-img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
    .mini-leader-info { flex: 1; }
    .mini-leader-name { font-weight: 700; font-size: 0.9rem; }
    .mini-leader-score { font-weight: 800; color: var(--primary); font-size: 0.9rem; }
    #rightPanelBackdrop { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2999999; }
}
@media(max-width:900px){ 
    /* Mobil ise genişlik kısıtlamalarını kaldır ve tam ekran yap */
    .mf-list { width: 100vw !important; min-width: 0 !important; } 
    .mf-nav { width: 280px !important; min-width: 0 !important; }
}
/* ==========================================================================
   SAĞ PANEL (MENÜ) & DİĞER DÜZELTMELER - TEK VE TEMİZ PAKET
   ========================================================================== */

/* 1. SAĞ PANEL (MENÜ) - HEM MOBİL HEM MASAÜSTÜ UYUMLU */
.right-panel {
    position: fixed;
    top: 0;
    right: -320px; /* Başlangıçta ekran dışında */
    width: 280px !important;
    height: 100vh;
    background: #ffffff !important;
    z-index: 9999999 !important; /* En üst katman */
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 30px rgba(0,0,0,0.2);
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    max-width: 80vw !important; /* Mobilde taşmayı önle */
}

/* Panel Açıkken */
.right-panel.open { right: 0 !important; }

/* Panel Başlığı */
.rp-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 1rem;
    background: #f8fafc;
    color: #1e293b;
    flex-shrink: 0;
}

/* Panel Gövdesi */
.rp-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    color: #334155;
    overflow-x: hidden;
}

/* Panel İçi Kart Düzenlemeleri (Resim Büyümesini Önler) */
.right-panel .mini-leader-card {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    background: var(--bg-body); border-radius: 8px; border: 1px solid var(--border);
    cursor: pointer; margin-bottom: 8px;
}
.right-panel .mini-leader-img {
    width: 35px !important; height: 35px !important; min-width: 35px !important;
    border-radius: 50%; object-fit: cover !important; display: block; background: #fff;
}
.right-panel .mini-leader-info { flex: 1; overflow: hidden; }
.right-panel .mini-leader-name { font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.right-panel .mini-leader-score { font-weight: 800; color: var(--primary); font-size: 0.8rem; }

/* Hesaplama Araçları */
.right-panel .tool-card {
    padding: 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 8px;
    display: flex; flex-direction: column; width: 100%;
}
.right-panel .tool-icon { width: 30px; height: 30px; font-size: 1rem; margin-bottom: 5px; }
.right-panel .tool-name { font-size: 0.9rem; }
.right-panel .tool-desc { font-size: 0.75rem; line-height: 1.2; }

/* Izgaraları Tek Sütun Yap */
.right-panel .tools-grid, .right-panel .leader-grid {
    display: flex !important; flex-direction: column !important; gap: 0 !important;
}

/* Arka Plan Gölgesi */
#rightPanelBackdrop {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.5) !important; z-index: 9999990; backdrop-filter: blur(3px);
}

/* 2. KAYAR BANT (TICKER) GÜZELLEŞTİRME */
.mf-ticker { 
    background: #ffffff; border-bottom: 1px solid var(--border); height: 45px; 
    display: flex; align-items: center; overflow: hidden; white-space: nowrap; 
    position: relative; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.mf-ticker-wrap { display: inline-block; padding-left: 100%; animation: ticker 35s linear infinite; }
.mf-ticker-item { display: inline-block; padding: 0 25px; font-size: 0.9rem; font-weight: 600; color: var(--text-main); }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

/* 3. MENÜ LİNKLERİ (SOL PANEL) */
.mf-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-light); cursor: pointer; border-radius: 10px; transition: all 0.2s ease; font-size: 0.95rem; text-decoration: none; font-weight: 600; margin-bottom: 2px; }
.mf-link:hover, .mf-link.active { background: #f1f5f9; color: var(--primary); transform: translateX(3px); }
.mf-link i { width: 20px; text-align: center; font-size: 1.1rem; }
/* ============================================================
   SOL MENÜ PERDESİ (GÜNCELLENMİŞ - MENÜNÜN ARKASINDA)
   ============================================================ */
#navBackdrop {
    display: none; /* Varsayılan gizli */
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah */
    
    /* ÖNEMLİ AYAR: Menü (99999) olduğu için bu ondan düşük olmalı */
    z-index: 9900 !important; 
    
    backdrop-filter: blur(3px); /* Arkadaki siteyi hafif bulanıklaştır */
    cursor: pointer;
}

/* Javascript 'active' sınıfı eklediğinde görünür */
#navBackdrop.active, #navBackdrop[style*="display: block"] {
    display: block !important;
}
/* ============================================================
   MOBİL MENÜ ALT BOŞLUK TAMİRİ (GİRİŞ BUTONU KURTARMA)
   ============================================================ */
@media (max-width: 900px) {
    .mf-nav {
        /* Menünün altına 100px boşluk ekle ki butonlar yukarı çıkabilsin */
        padding-bottom: 120px !important; 
        
        /* Modern telefonlarda ekran boyunu tam hesapla */
        height: 100dvh !important; 
    }
}
/* ============================================================
   AI ASİSTAN - HEADER MODU (ÜST BAND ORTASI)
   ============================================================ */

/* --- 1. MASAÜSTÜ (PC) - SAĞ ALT KÖŞE --- */
.ai-float-wrapper { 
    position: fixed !important; 
    bottom: 30px !important; 
    right: 30px !important; 
    z-index: 999999 !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    transition: all 0.3s ease !important;
}

.ai-float-wrapper:hover { transform: translateY(-5px) !important; }

.ai-float-btn { 
    width: 60px !important; 
    height: 60px !important; 
    background: linear-gradient(135deg, #6366f1, #d946ef) !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.5) !important; 
    border: 2px solid rgba(255, 255, 255, 0.3) !important; 
    position: relative !important; 
    backdrop-filter: blur(5px) !important;
}

.ai-logo-x { 
    font-size: 1.8rem !important; 
    color: #fff !important; 
    font-weight: 900 !important;
}

/* --- 2. MOBİL (TELEFON) - ÜST HEADER ORTASI --- */
@media (max-width: 900px) {
    .ai-float-wrapper {
        /* KONUM: ÜST ORTA */
        bottom: auto !important; /* Alttan kurtar */
        right: auto !important;  /* Sağdan kurtar */
        top: 12px !important;    /* Header hizasına getir (Logolarla aynı hiza) */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Tam ortala */
        
        /* ŞEKİL: YATAY KAPSÜL */
        width: auto !important;
        height: auto !important;
        z-index: 9999999 !important; /* Header'ın üstüne bas */
    }
    
    .ai-float-btn {
        width: auto !important;
        height: 36px !important;     /* Header'a sığacak kadar ince */
        padding: 0 16px !important;  /* Yanlardan pay */
        border-radius: 20px !important; /* Kapsül şekli */
        background: linear-gradient(90deg, #4f46e5, #9333ea) !important; /* Yatay degrade */
        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4) !important; /* Hafif gölge */
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        gap: 8px !important; /* İkon ve yazı arası */
    }

    /* İKON KÜÇÜLTME */
    .ai-logo-x {
        font-size: 1.1rem !important;
    }

    /* YANINA YAZI EKLEME (Mobil Kullanıcı Anlasın) */
    .ai-float-btn::after {
        content: "Asistan"; /* Kısa ve net */
        color: #fff;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
    }

    /* HOVER EFEKTİNİ KAPAT (Mobilde gerek yok) */
    .ai-float-wrapper:hover { transform: translateX(-50%) !important; }
}
/* ============================================================
   ÖZEL KAYDIRMA ÇUBUĞU (PREMIUM SCROLLBAR)
   Sadece Webkit (Chrome, Edge, Safari) içindir
   ============================================================ */

/* Çubuğun kendisi (Arka plan) */
::-webkit-scrollbar {
    width: 8px !important;  /* Çok ince ve kibar */
    height: 8px !important;
    background-color: transparent !important; /* Şeffaf zemin */
}

/* Kaydıran parça (Thumb) */
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important; /* Açık gri (Sakin ton) */
    border-radius: 10px !important;       /* Yuvarlak köşeler */
    border: 2px solid #ffffff !important; /* Etrafında beyaz boşluk (Temiz görünüm) */
}

/* Üzerine gelince koyulaşsın */
::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8 !important; /* Daha belirgin gri */
}
/* ============================================================
   KONU KARTI - PROFESYONEL TASARIM (GÜNCEL FİNAL)
   (Avatar, İsim, Tarih, Etiketler ve Butonlar)
   ============================================================ */

/* Kartın Kendisi: Beyaz, Kenarlıklı, Keskin Hatlar */
.topic-card {
    background: #ffffff;
    border: 1px solid #e0dfdc; /* LinkedIn'in ince gri çerçevesi */
    border-radius: 8px;        /* Keskin dönüşler */
    padding: 0;                /* İç boşluğu sıfırladık */
    margin-bottom: 8px;        /* Kartlar arası boşluk */
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04); /* Çok hafif derinlik */
    transition: box-shadow 0.2s;
}

/* Üst Kısım (Header): Padding eklendi */
.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 16px 0 16px; /* LinkedIn standardı */
    margin-bottom: 8px;
    border: none;
}

/* Kullanıcı Alanı */
.tc-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Avatar: Kare değil, hafif büyük */
.tc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

/* İsim ve Unvan */
.tc-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.tc-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tc-date {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 400;
}

/* Sağ Üst Menü (...) Butonu */
.tc-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s;
}

.tc-share-btn:hover {
    background: #f3f2ef; 
    color: var(--text-main);
}

/* Başlık */
.tc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 16px 4px 16px;
    line-height: 1.4;
}

/* Açıklama Metni ve "...Devamı" Özelliği */
.tc-desc {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.5;
    margin: 0 16px 8px 16px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    
    /* Varsayılan: 3 Satırda Kes */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}

/* Tıklanınca Açılan Hali */
.tc-desc.expanded {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* Kapalıyken Altta Çıkan '... Devamı' Efekti */
.tc-desc:not(.expanded)::after {
    content: '... Devamı';
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 20px;
    /* LinkedIn beyazına uyumlu gradient */
    background: linear-gradient(to right, rgba(255,255,255,0), #ffffff 40%);
    color: var(--primary); /* Mavi renk */
    font-weight: 600;
    font-size: 13px;
}

/* Etiketler (Tags) */
.tc-badge {
    background: #f3f2ef;
    color: var(--text-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 16px;
    display: inline-block;
    margin-bottom: 8px;
}

/* ============================================================
   KART ALTI AKSİYONLAR (BEĞEN / YORUM YAP / PAYLAŞ)
   ============================================================ */

.mf-card-actions {
    display: flex;
    justify-content: space-between; /* Butonları eşit yay */
    align-items: center;
    border-top: 1px solid #e0dfdc; /* İnce çizgi */
    padding: 4px 8px;
    margin-top: 8px;
    background: #ffffff;
}

.mf-act-btn {
    background: transparent;
    border: none;
    
    /* LinkedIn Buton Yapısı */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* İkon ve yazı arası boşluk */
    
    padding: 12px 8px; /* Tıklama alanı */
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    
    /* Yazı Stili */
    font-size: 14px;
    font-weight: 600;
    color: #666666; /* LinkedIn Grisi */
    font-family: inherit;
    flex: 1; /* Hepsi eşit genişlikte olsun */
}

/* Hover Efekti */
.mf-act-btn:hover {
    background: #f3f2ef; /* Koyu gri zemin */
    color: #191919;
}

/* İkon Boyutu */
.mf-act-btn i {
    font-size: 1.2rem;
    font-weight: normal; /* İkonlar ince dursun */
}

/* Beğenilince (Aktif) */
.mf-act-btn.liked {
    color: #0a66c2 !important; /* Mavi olsun (veya kalp için kırmızı) */
}
.mf-act-btn.liked i {
    color: #0a66c2 !important; /* LinkedIn'de beğenince ikon mavi olur */
    font-weight: 900; /* İkon dolgulu olur */
}
/* ============================================================
   SKELETON LOADING (YENİ NESİL YÜKLEME EFEKTİ)
   "Yükleniyor..." yazısı yerine çıkan modern animasyon
   ============================================================ */

/* Yanıp Sönme Animasyonu */
@keyframes sk-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Kartın İskelet Hali */
.topic-card.skeleton-mode {
    pointer-events: none; /* Tıklanamaz */
    border-color: #f1f5f9;
}

/* Gri Kutular (Metin ve Resim Yerine) */
.sk-bg {
    background: #e2e8f0; /* Gri renk */
    border-radius: 6px;
    animation: sk-pulse 1.5s infinite ease-in-out; /* Nefes alma efekti */
}

/* Yuvarlak (Avatar İçin) */
.sk-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Satır (Yazı İçin) */
.sk-line { height: 14px; margin-bottom: 8px; }
.sk-w-30 { width: 30%; }
.sk-w-50 { width: 50%; }
.sk-w-80 { width: 80%; }
.sk-w-100 { width: 100%; }

/* Blok (Paragraf İçin) */
.sk-block {
    width: 100%;
    height: 80px;
    margin-top: 15px;
}
/* ============================================================
   ODAK MODU (ZEN MODE) - OKUMA DENEYİMİ
   ============================================================ */

/* Odak modu açılınca gizlenecekler */
body.focus-active .mf-nav,      /* Sol Menü */
body.focus-active .mf-list,     /* Orta Liste */
body.focus-active .right-panel, /* Sağ Panel */
body.focus-active .mob-nav-bar, /* Mobil Alt Menü */
body.focus-active .mf-stories,  /* Hikayeler */
body.focus-active .mf-ticker,   /* Kayan Yazı */
body.focus-active .tc-header,   /* Kartın Üstü (Profil vb) */
body.focus-active .mf-card-actions /* Alt Butonlar */
{
    display: none !important;
}

/* Odak modunda ana içerik alanı */
body.focus-active .mf-main {
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999;
    background: #fdfbf7; /* Göz yormayan kitap kağıdı rengi */
    padding: 0 !important;
}

/* Okuma Alanı */
body.focus-active #contentView {
    max-width: 800px; /* İdeal okuma genişliği */
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    height: 100%;
}

/* Yazı Tipi İyileştirmesi */
body.focus-active .tc-desc {
    font-size: 1.2rem !important; /* Yazıyı büyüt */
    line-height: 1.8 !important;  /* Satır arasını aç */
    color: #1e293b !important;
    font-family: 'Georgia', serif !important; /* Kitap fontu */
}

/* Odak Modundan Çıkış Butonu */
#exitFocusBtn {
    display: none;
    position: fixed;
    top: 20px; right: 20px;
    background: #1e293b;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    z-index: 1000000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-weight: bold;
}

body.focus-active #exitFocusBtn { display: flex; align-items: center; gap: 10px; }
/* ============================================================
   AKILLI HIZLI CEVAPLAR (SMART CHIPS)
   ============================================================ */
.quick-chips-area {
    display: flex;
    gap: 8px;
    overflow-x: auto; /* Mobilde yana kaydırılabilir */
    padding: 10px 0;
    margin-bottom: 5px;
    scrollbar-width: none; /* Scrollbar'ı gizle */
    -webkit-overflow-scrolling: touch; /* Mobilde akıcı kaydırma */
}
.quick-chips-area::-webkit-scrollbar { display: none; }

.q-chip {
    background: #f1f5f9;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.q-chip:hover {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
    transform: translateY(-2px);
}
/* ============================================================
   AKILLI SEÇİM MENÜSÜ (MEDIUM STYLE POPUP)
   ============================================================ */
#selectionMenu {
    position: fixed;
    background: #1e293b;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    display: none; /* JS ile açılacak */
    gap: 10px;
    z-index: 9999999;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    font-size: 0.85rem;
    font-weight: 600;
    transform: translateX(-50%); /* Ortalamak için */
    animation: popUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#selectionMenu::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 50%;
    margin-left: -6px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

@keyframes popUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sel-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}
.sel-btn:hover { color: var(--primary); }
.sel-sep { width: 1px; background: rgba(255,255,255,0.2); }
/* --- SEKTÖREL KULİS (YENİ TASARIM) --- */
.gossip-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.gossip-header {
    background: #f8fafc;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}
.gs-city { color: var(--primary); font-weight: 800; text-transform: uppercase; }
.gossip-body {
    padding: 15px;
    font-size: 1rem;
    color: #334155;
    line-height: 1.6;
    white-space: pre-wrap;
}
.gossip-media {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gossip-media img { width: 100%; height: auto; object-fit: cover; }
.gossip-footer {
    padding: 10px 15px;
    display: flex;
    gap: 15px;
    background: #ffffff;
    border-top: 1px dashed #e2e8f0;
}
.gs-react {
    cursor: pointer;
    font-size: 0.9rem;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 20px;
    transition: all 0.2s;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: #475569;
}
.gs-react:hover { transform: scale(1.1); background: #e2e8f0; }
.gs-react.active-react { background: #dbeafe; color: var(--primary); border: 1px solid #bfdbfe; }