/* ==========================================================================
   MOZAİK PLATFORM - ANA STİL DOSYASI (STYLE.CSS)
   ========================================================================== */

/* 1. PROFESYONEL VE CİDDİ TASARIM SIFIRLAMASI */
body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    /* YENİ: Arka planı düz griden, çok hafif ve modern bir pastel geçişe çevirdik */
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%) !important;
    background-attachment: scroll !important;
    margin: 0; padding: 0; color: #1e293b; overflow-x: hidden; 
}
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }

/* 2. ANA IZGARA (GRID) */
.app-container { display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; min-height: 100vh; }

/* ==========================================================================
   SOL MENÜ (SIDEBAR LEFT)
   ========================================================================== */
/* YÜZER SIDEBAR (FLOATING PANEL) */
.sidebar-left {
    width: 260px;
    padding: 24px 20px;
    position: sticky;
    top: 24px;
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    
    /* Yüzer Görünüm */
    border-right: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 28px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.06);
    margin: 24px 0 24px 24px;
    
    /* Animasyonlar */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                padding 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

body.dark-mode .sidebar-left {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(51, 65, 85, 0.6);
    box-shadow: 0 10px 35px rgba(0,0,0,0.3);
}

/* YÜZER SIDEBAR COMPACT (SCROLL) DURUMU */
body.sidebar-compact .sidebar-left {
    width: 90px;
    padding: 24px 15px;
}

body.sidebar-compact .logo-desktop {
    font-size: 0; /* Metni gizle */
    text-align: center;
    padding: 10px 0;
}
body.sidebar-compact .logo-desktop::first-letter {
    font-size: 28px;
    visibility: visible;
}

body.sidebar-compact .desktop-nav-item {
    font-size: 0; /* Metni gizle */
    justify-content: center;
    padding: 14px;
    border-left: none; /* Active state border iptal */
    border-radius: 14px; /* Yuvarlak ikon arka planı */
}
body.sidebar-compact .desktop-nav-item span {
    font-size: 20px;
    margin: 0;
    width: auto !important;
}

/* Aktif ikon stili */
body.sidebar-compact .desktop-nav-item.active {
    background-color: #2c3e50;
}
body.sidebar-compact .desktop-nav-item.active span {
    filter: brightness(0) invert(1);
}

body.dark-mode.sidebar-compact .desktop-nav-item.active {
    background-color: rgba(56, 189, 248, 0.2);
}
body.dark-mode.sidebar-compact .desktop-nav-item.active span {
    filter: none;
    color: #38bdf8;
}

body.sidebar-compact .desktop-post-btn {
    font-size: 0;
    padding: 16px 0;
    border-radius: 20px !important;
}
body.sidebar-compact .desktop-post-btn::after {
    content: "➕";
    font-size: 18px;
    visibility: visible;
}

body.sidebar-compact .sidebar-user-menu {
    padding: 10px;
    justify-content: center;
}
body.sidebar-compact .sidebar-user-info,
body.sidebar-compact .sidebar-user-menu > div:last-child {
    display: none;
}

.logo-desktop { font-size: 26px; font-weight: 900; padding: 10px; margin-bottom: 20px; display: inline-block; color: #2c3e50; letter-spacing: -0.5px; }
.desktop-nav { display: flex; flex-direction: column; gap: 8px; }
.desktop-nav-item { display: flex; align-items: center; gap: 15px; font-size: 18px; padding: 12px 16px; border-radius: 8px; transition: 0.2s; cursor: pointer; font-weight: 500; color: #475569; }
.desktop-nav-item:hover { background-color: rgba(226, 232, 240, 0.8); color: #0f172a; }
.desktop-nav-item.active { font-weight: 700; color: #2c3e50; background-color: rgba(232, 236, 241, 0.8); border-left: 4px solid #2c3e50; border-radius: 4px 8px 8px 4px; }

/* YENİ: Yuvarlatılmış ve Gölgeli Ana Butonlar */
.desktop-post-btn { 
    background: #2c3e50; color: white; border: none; font-size: 16px; font-weight: 600; padding: 14px; margin-top: 20px; cursor: pointer; width: 100%; 
    border-radius: 100px !important; /* Tam yuvarlak (Pill) butonlar */
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(41, 128, 185, 0.3) !important;
    transition: all 0.3s ease !important;
}
.desktop-post-btn:hover { 
    background: #1a252f; 
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(41, 128, 185, 0.4) !important;
}

button {
    border-radius: 100px;
    transition: all 0.3s ease;
}

/* Masaüstü Sol Alt Kullanıcı Menüsü */
.sidebar-user-menu { margin-top: auto; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; cursor: pointer; transition: 0.2s; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.sidebar-user-menu:hover { background-color: rgba(248, 250, 252, 0.9); border-color: #cbd5e1; transform: translateY(-2px); }
.sidebar-user-avatar { width: 40px; height: 40px; border-radius: 8px; background: #e2e8f0; overflow: hidden; flex-shrink: 0; display: flex; justify-content: center; align-items: center; border: 1px solid #cbd5e1; }
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.sidebar-user-name { font-weight: 700; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-handle { font-size: 13px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   ORTA AKIŞ (FEED MAIN) & SEKMELER & ORTAK BAŞLIK
   ========================================================================== */
.feed-main { width: 620px; min-width: 0; min-height: 100vh; padding: 0 15px; padding-bottom: 80px; flex-shrink:0; background: transparent; border-right: 1px solid rgba(226, 232, 240, 0.6);}
.header-sticky { position: sticky; top: 0; background: rgba(244, 246, 248, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; padding: 10px 0; display: flex; align-items: center; gap: 20px; min-height: 53px; border-bottom: 1px solid transparent; flex-wrap: wrap;}
.mobile-header-top { display: none; padding: 10px 0; align-items: center; justify-content: space-between; width: 100%; }
.mobile-logo-text { font-size: 20px; font-weight: 800; color: #2c3e50; }

.feed-tabs { display: flex; width: 100%; height: 48px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 8px; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 4px 10px rgba(0,0,0,0.02); overflow: hidden; margin-bottom: 15px;}
.feed-tab { flex: 1; display: flex; justify-content: center; align-items: center; cursor: pointer; font-weight: 600; color: #64748b; transition: 0.2s; position: relative; font-size: 15px;}
.feed-tab:hover { background-color: rgba(248, 250, 252, 0.8); color: #334155; }
.feed-tab.active { color: #2c3e50; background: rgba(241, 245, 249, 0.8); border-bottom: 3px solid #2c3e50;}

/* ==========================================================================
   İÇERİK OLUŞTURMA KUTUSU (POST INPUT)
   ========================================================================== */
.post-input-box { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; border: 1px solid rgba(226, 232, 240, 0.8); margin-bottom: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.03); display: flex; gap: 15px; margin-top: 10px; transition: all 0.3s ease;}
.post-input-box:focus-within { box-shadow: 0 12px 30px rgba(0,0,0,0.06); transform: translateY(-2px); }
.input-avatar { width: 44px; height: 44px; border-radius: 8px; background: #e2e8f0; flex-shrink: 0; overflow: hidden; cursor: pointer; border: 1px solid #cbd5e1; }
.input-avatar img { width: 100%; height: 100%; object-fit: cover; }
.input-form { flex: 1; display: flex; flex-direction: column; }
.input-form textarea { width: 100%; border: 1px solid transparent; background: transparent; font-size: 16px; outline: none; resize: none; padding: 8px 0; font-family: inherit; min-height: 60px; color: #0f172a; transition: 0.2s;}
.input-form textarea:focus { border-bottom-color: #cbd5e1; }
.input-form textarea::placeholder { color: #94a3b8; }
.input-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(241, 245, 249, 0.8); }
.action-icons { display: flex; gap: 10px; color: #64748b; }
.icon-btn { cursor: pointer; padding: 6px; border-radius: 100px; transition: 0.2s; display: flex; justify-content: center; align-items: center; background: rgba(248, 250, 252, 0.8); border: 1px solid #e2e8f0; font-size: 14px; width: 36px; height: 36px;}
.icon-btn:hover { background: #e2e8f0; color: #2c3e50; transform: scale(1.1); }
.share-btn { background: #2c3e50; color: white; border: none; padding: 8px 24px; border-radius: 100px; cursor: pointer; font-weight: 600; font-size: 14px; opacity: 0.5; transition: 0.2s; box-shadow: 0 4px 10px rgba(44, 62, 80, 0.2); }
.share-btn.active { opacity: 1; }
.share-btn.active:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(44, 62, 80, 0.3); }
.char-counter { font-size: 13px; color: #94a3b8; font-weight: 600; transition: 0.2s; }
.char-counter.limit { color: #ef4444; }

/* ==========================================================================
   GÖNDERİ KARTLARI (POSTS) - YENİ YUMUŞAK TASARIM
   ========================================================================== */
.post { 
    display: flex; gap: 15px; padding: 20px; margin-bottom: 20px; cursor: pointer; position: relative; 
    border: none !important;
    border-radius: 24px !important; /* Daha yumuşak hatlar */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.post * { cursor: pointer !important; }
.post:hover { 
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07) !important; 
}
.post-left { flex-shrink: 0; }
.post-avatar-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(203, 213, 225, 0.5); background: #e2e8f0; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.post-avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.post-right { flex: 1; min-width: 0; }
.repost-indicator { font-size: 12px; color: #64748b; font-weight: 600; display: flex; align-items: center; gap: 5px; margin-bottom: 8px; user-select: none; }
.post-header-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; position:relative;}
.author-group { display: flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.author-name { font-weight: 700; color: #0f172a; }
.author-username { color: #64748b; font-size: 14px; }
.verified-badge { color: #2c3e50; font-size: 14px; }
.post-time { color: #94a3b8; font-size: 13px; margin-left: 4px; }
.post-content { font-size: 15px; color: #334155; line-height: 1.6; word-wrap: break-word; margin-bottom: 12px; user-select: none; }
.hashtag { color: #3b82f6; text-decoration: none; font-weight: 500;}
.hashtag:hover { text-decoration: underline; }
.post-image-container { border-radius: 16px; overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.5); margin-top: 10px; }
.post-image { width: 100%; max-height: 400px; object-fit: cover; display: block; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.post-footer-actions { display: flex; justify-content: flex-start; gap: 30px; margin-top: 15px; color: #64748b; border-top: 1px solid rgba(241, 245, 249, 0.8); padding-top: 12px;}
.action-item { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.2s; user-select: none;}
.action-item:hover { color: #2c3e50; }
.action-item.like-box:hover { color: #e11d48; }
.action-item.liked { color: #e11d48; }
.action-item.repost-box:hover { color: #059669; }
.action-item.reposted { color: #059669; }
.action-icon { padding: 6px; border-radius: 100px; transition: 0.2s; background: rgba(248, 250, 252, 0.8); border: 1px solid rgba(226, 232, 240, 0.5); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;}
.action-item:hover .action-icon { background: #f1f5f9; border-color: #cbd5e1; transform: scale(1.1);}

/* Açılır Menü (Dropdown) */
.post-options-btn { background: none; border: none; color: #94a3b8; cursor: pointer; border-radius: 100px; padding: 5px; transition: 0.2s; width:30px; height:30px; display:flex; justify-content:center; align-items:center;}
.post-options-btn:hover { background: #f1f5f9; color: #334155; transform: rotate(90deg);}
.dropdown-menu { display: none; position: absolute; right: 0; top: 30px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); z-index: 200; overflow: hidden; width: 180px; flex-direction: column;}
.dropdown-item { padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.2s; color: #334155;}
.dropdown-item:hover { background: #f8fafc; color: #0f172a; padding-left: 20px;}
.dropdown-item.danger { color: #ef4444; }

/* ==========================================================================
   YORUMLAR (COMMENTS)
   ========================================================================== */
.comments-wrapper { padding-top: 20px; border-top: 1px solid rgba(226, 232, 240, 0.8); margin-top: 20px; }
.comment-node { position: relative; margin-top: 15px; background: rgba(248, 250, 252, 0.7); backdrop-filter: blur(5px); padding: 15px; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.8);}
.comment-header { display: flex; gap: 12px; align-items: flex-start; }
.comment-avatar { width: 36px; height: 36px; border-radius: 10px; background: #e2e8f0; flex-shrink: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(203, 213, 225, 0.5);}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-body { flex: 1; }
.comment-author-name { font-weight: 700; font-size: 14px; color: #0f172a; }
.comment-text { font-size: 14px; color: #334155; margin-top: 4px; line-height: 1.5; }
.comment-actions { display: flex; gap: 15px; margin-top: 8px; color: #64748b; font-size: 12px; font-weight: 600; }
.comment-action-btn { cursor: pointer; transition: 0.2s; }
.comment-action-btn:hover { color: #2c3e50; }
.comment-replies { margin-left: 15px; border-left: 2px solid #e2e8f0; padding-left: 15px; margin-top: 10px;}

/* ==========================================================================
   SAĞ SÜTUN (SİDEBAR RIGHT) & ÖNERİLER
   ========================================================================== */
.sidebar-right { width: 320px; padding: 20px 20px; position: sticky; top: 0; height: 100vh; }
.search-box-right { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 100px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 25px; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: all 0.3s ease;}
.search-box-right:focus-within { box-shadow: 0 8px 25px rgba(0,0,0,0.06); transform: translateY(-2px); background: rgba(255, 255, 255, 0.95); }
.search-box-right input { border: none; background: none; outline: none; width: 100%; font-size: 14px; color: #0f172a;}
.who-to-follow { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.8); padding: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.03); margin-top: 10px;}
.wtf-title { font-weight: 800; font-size: 16px; color: #0f172a; margin-bottom: 15px; border-bottom: 1px solid rgba(241, 245, 249, 0.8); padding-bottom: 10px;}

/* ==========================================================================
   MODALLAR (KART PENCERELERİ)
   ========================================================================== */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(15, 23, 42, 0.4); z-index: 2000; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overscroll-behavior: none;}
body.modal-open { overflow: hidden; overscroll-behavior: none; touch-action: none; }
.modal-content { background: rgba(255, 255, 255, 0.95); padding: 25px; border-radius: 24px; width: 100%; max-width: 600px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0,0,0,0.2); border: 1px solid rgba(255, 255, 255, 0.5); overscroll-behavior: contain;}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; position: sticky; top: -25px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 10; padding-bottom: 15px; padding-top: 25px; border-bottom: 1px solid #f1f5f9;}
.close-btn { background: #f8fafc; border: 1px solid #e2e8f0; font-size: 20px; cursor: pointer; color: #334155; display:flex; justify-content:center; align-items:center; width:36px; height:36px; border-radius:100px; transition:0.2s;}
.close-btn:hover { background:#e2e8f0; color:#0f172a; transform: rotate(90deg);}
.modal-input { width: 100%; box-sizing: border-box; padding: 14px 20px; margin-bottom: 15px; border: 1px solid #cbd5e1; border-radius: 12px; font-family: inherit; font-size: 15px; outline:none; background: rgba(255, 255, 255, 0.8); transition: 0.2s; color:#0f172a;}
.modal-input:focus { border-color: #2c3e50; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transform: translateY(-2px);}
.modal-btn-save { background: #2c3e50; border: none; padding: 12px 24px; border-radius: 100px; cursor: pointer; font-weight: 600; color: white; font-size:15px; transition:0.2s; box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);}
.modal-btn-save:hover { background: #1a252f; transform: scale(1.05); box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);}

/* Kullanıcı Satırları (Listeler) */
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 16px; text-decoration: none; color: #334155; transition: 0.2s; border: 1px solid transparent; cursor: pointer;}
.user-row:hover { background: rgba(248, 250, 252, 0.8); border-color: #e2e8f0; transform: translateX(5px); }
.row-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: #e2e8f0; display: flex; justify-content: center; align-items: center; font-size: 20px; overflow: hidden; border: 1px solid rgba(203, 213, 225, 0.5);}
.row-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   HİKAYELER (STORIES) & EDİTÖR
   ========================================================================== */
.stories-container, #stories-container { display: flex; gap: 15px; padding: 20px 15px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.8); margin-bottom: 20px; margin-top: 10px; overflow-x: auto; box-shadow: 0 8px 25px rgba(0,0,0,0.03); }
.stories-container::-webkit-scrollbar, #stories-container::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; width: 72px; transition: transform 0.2s;}
.story-item:hover { transform: scale(1.05); }
.story-avatar-wrapper { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); position: relative; box-shadow: 0 4px 10px rgba(220, 39, 67, 0.3);}
.story-avatar-wrapper.read { background: #cbd5e1; box-shadow: none; } 
.story-avatar-wrapper.add-story { background: transparent; border: 2px dashed #94a3b8; padding: 2px; box-shadow: none;} 
.story-avatar { width: 100%; height: 100%; border-radius: 50%; border: 3px solid white; background: #e2e8f0; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative;}
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-add-badge { position: absolute; bottom: 0; right: 0; background: #2c3e50; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; border: 3px solid white; z-index: 5;}
.story-username { font-size: 12px; color: #475569; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center;}

/* Hikaye İzleyici Overlay */
.story-viewer-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0;
    bottom: 0;
    width: 100vw; 
    width: 100dvw;
    height: 100vh; 
    height: 100dvh; 
    background: #000; 
    z-index: 9000; 
    flex-direction: column; 
    backdrop-filter: blur(20px);
    touch-action: none;
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
}
.story-progress-container { display: flex; gap: 5px; padding: 15px; position: absolute; top: 0; left: 0; width: 100%; z-index: 9010; pointer-events: none;}
.story-progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; overflow: hidden;}
.story-progress-fill { height: 100%; background: white; width: 0%; transition: width 0.1s linear;}
.story-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 15px 15px 15px; position: absolute; top: 15px; left: 0; width: 100%; z-index: 9010; color: white;}
.story-user-info { display: flex; align-items: center; gap: 10px; }
.story-content-area { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    padding-bottom: 0; 
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.story-image { position: absolute; z-index: 9001; pointer-events: none; border-radius: 16px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}
.story-text { position: absolute; z-index: 9006; font-size: 26px; font-weight: 800; color: white; text-align: center; padding: 10px 20px; border-radius: 12px; word-wrap: break-word; text-shadow: 0 2px 10px rgba(0,0,0,0.8); pointer-events: none; user-select: none; -webkit-user-select: none;}
.story-nav-left { position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: 9005; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}
.story-nav-right { position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: 9005; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}

/* Hikaye Footer & Emojiler */
.story-footer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 15px; display: flex; flex-direction: column; gap: 12px; z-index: 9010; background: linear-gradient(transparent, rgba(0,0,0,0.9));}
.story-footer-row { display: flex; gap: 15px; align-items: center; width: 100%; }
.quick-reaction-btn { font-size: 32px; cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.quick-reaction-btn:hover { transform: scale(1.4) translateY(-5px); }
.story-reply-input { flex: 1; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; padding: 14px 20px; color: white; font-size: 15px; outline: none; transition: 0.3s;}
.story-reply-input:focus { background: rgba(255,255,255,0.2); border-color: white;}
.story-action-btn { background: none; border: none; color: white; font-size: 28px; cursor: pointer; transition: 0.2s; padding: 0; display: flex; align-items: center; justify-content: center;}
.story-action-btn:hover { transform: scale(1.2); }
.story-footer-owner { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 15px; display: flex; align-items: center; justify-content: flex-start; z-index: 9010; background: linear-gradient(transparent, rgba(0,0,0,0.9));}
.story-view-count-btn { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); color: white; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; padding: 8px 16px; border-radius: 100px;}
.story-view-count-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px);}

/* Hikaye Oluşturma Editörü */
.story-editor-board { width: 100%; aspect-ratio: 9/16; background: #111; border-radius: 24px; overflow: hidden; position: relative; margin-bottom: 15px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
.draggable-img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); max-width: 100%; max-height: 100%; display: none; cursor: grab; user-select: none; border-radius: 16px;}
.draggable-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); color: white; font-size: 24px; font-weight: bold; text-align: center; text-shadow: 0 4px 15px rgba(0,0,0,0.8); cursor: grab; white-space: pre-wrap; user-select: none; padding: 10px; border-radius: 8px; pointer-events: none;}
.slider-group { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #64748b; margin-top:15px; }
.slider-group input[type="range"] { width: 100%; accent-color: #2c3e50; }

/* ==========================================================================
   SOHBET (CHAT) ARAYÜZÜ (chat.html)
   ========================================================================== */
#inbox-column { width: 380px; height: 100vh; border-right: 1px solid rgba(226, 232, 240, 0.6); display: flex; flex-direction: column; flex-shrink: 0; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); z-index: 10; padding:0;}
.chat-header-main { background: transparent; padding: 20px 20px 10px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(241, 245, 249, 0.8);}
.mobile-header-avatar { display: none; width: 40px; height: 40px; border-radius: 12px; background: #e2e8f0; overflow: hidden; cursor: pointer; flex-shrink: 0; border: 1px solid rgba(203, 213, 225, 0.5);}
.mobile-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-title { font-size: 24px; font-weight: 800; margin: 0; color: #0f172a; letter-spacing: -0.5px;}
.header-icons { display: flex; gap: 8px; font-size: 20px; color: #334155; }
.inbox-search-container { padding: 10px 20px; border-bottom: 1px solid rgba(241, 245, 249, 0.8);}
.search-box-inbox { background: rgba(255, 255, 255, 0.7); border-radius: 100px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(226, 232, 240, 0.8); transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.search-box-inbox:focus-within { border-color: #2c3e50; background: white; box-shadow: 0 8px 25px rgba(0,0,0,0.05); transform: translateY(-2px);}
.search-box-inbox input { border: none; background: none; outline: none; width: 100%; font-size: 14px; color: #0f172a;}
.search-box-inbox input::placeholder { color: #94a3b8; }

#inbox-tabs { border-bottom: 1px solid rgba(226, 232, 240, 0.8); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; background: transparent; margin-bottom:0;}
.inbox-list { flex: 1; overflow-y: auto; padding: 15px 0; background: transparent;}

.dm-user-card { display: flex; align-items: center; gap: 15px; padding: 15px; text-decoration: none; color: #0f172a; transition: all 0.3s ease; position: relative; cursor: pointer; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px); border: 1px solid rgba(226, 232, 240, 0.5); border-radius: 20px; margin: 0 15px 12px 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.dm-user-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: #cbd5e1;}
.dm-user-card.active { border-color: #2c3e50; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px #2c3e50, 0 10px 30px rgba(44, 62, 80, 0.1);}
.dm-avatar { width: 56px; height: 56px; border-radius: 16px; background: #e2e8f0; display: flex; justify-content: center; align-items: center; font-size: 24px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(203, 213, 225, 0.5);}
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-info { flex: 1; overflow: hidden; }
.dm-username { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.dm-subtitle { font-size: 14px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.unread-text { color: #0f172a; font-weight: 700; }
.read-text { color: #64748b; }
.unread-dot { width: 10px; height: 10px; background-color: #3b82f6; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);}
.time-badge { position: absolute; top: 18px; right: 18px; font-size: 12px; color: #94a3b8; font-weight: 600;}

/* Sağ Taraf - Aktif Sohbet */
#chat-column { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); overflow: hidden; padding:0;}
.chat-empty-state { display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; text-align:center; padding:20px; background:transparent; }
.chat-empty-icon { font-size:80px; margin-bottom:20px; color:#cbd5e1; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));}
.chat-empty-title { font-size:28px; margin:0 0 10px 0; font-weight:800; color:#0f172a; letter-spacing: -0.5px;}
.chat-empty-desc { color:#64748b; font-size:16px; margin:0 0 30px 0; max-width: 300px; line-height: 1.5;}

.new-chat-state { display:none; flex-direction:column; height:100%; background:transparent; }
.open-group-btn { width:100%; background:rgba(255, 255, 255, 0.8); color:#2c3e50; border:1px solid #cbd5e1; margin:0 0 20px 0; padding:15px; border-radius:100px; font-weight:600; cursor:pointer; transition:0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.open-group-btn:hover { background:white; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.05);}
.new-chat-results { border-top:1px solid rgba(226, 232, 240, 0.5); padding-top:15px; }

.chat-header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 15px 30px; display: flex; align-items: center; border-bottom: 1px solid rgba(226, 232, 240, 0.8); position: sticky; top: 0; z-index: 100; justify-content: space-between; min-height: 80px; box-shadow: 0 4px 20px rgba(0,0,0,0.02);}
.header-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.back-btn { background: rgba(248, 250, 252, 0.8); border: 1px solid #e2e8f0; font-size: 20px; cursor: pointer; color: #334155; font-weight: bold; transition: 0.3s; border-radius: 100px; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; }
.back-btn:hover { background: #e2e8f0; color: #0f172a; transform: translateX(-3px);}
.chat-avatar-header { width: 50px; height: 50px; border-radius: 16px; background: #e2e8f0; display: flex; justify-content: center; align-items: center; overflow: hidden; flex-shrink: 0; cursor: pointer; border: 1px solid rgba(203, 213, 225, 0.5); box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
.chat-avatar-header img { width: 100%; height: 100%; object-fit: cover; }
.chat-header-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; cursor: pointer;}
.chat-username-text { font-size: 18px; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; letter-spacing: -0.5px;}
.chat-subtitle { font-size: 14px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.call-btn { background: rgba(255, 255, 255, 0.8); border: 1px solid #cbd5e1; font-size: 18px; cursor: pointer; color: #334155; width: 44px; height: 44px; border-radius: 100px; display: flex; justify-content: center; align-items: center; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.02);}
.call-btn:hover { background: white; color: #2c3e50; border-color: #94a3b8; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.05);}
.call-btn.danger:hover { background: #fef2f2; color: #ef4444; border-color: #ef4444; box-shadow: 0 8px 15px rgba(239, 68, 68, 0.15);}
.typing-indicator { font-size: 13px; color: #3b82f6; font-weight: 600; display: none; margin-top: 2px; font-style: italic;}

.chat-messages { flex: 1; padding: 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; background: transparent; min-width: 0;}
.message-wrapper { display: flex; flex-direction: column; max-width: 75%; min-width: 0; }
.wrapper-me { align-self: flex-end; align-items: flex-end; }
.wrapper-them { align-self: flex-start; align-items: flex-start; }
.message-bubble { padding: 14px 20px; font-size: 16px; line-height: 1.5; position: relative; word-wrap: break-word; max-width: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.05);}
.msg-them { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); color: #334155; border-radius: 4px 24px 24px 24px; border: 1px solid rgba(226, 232, 240, 0.8); }
.msg-me { background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); color: white; border-radius: 24px 4px 24px 24px; box-shadow: 0 8px 20px rgba(44, 62, 80, 0.2);}
.msg-image { max-width: 100%; max-height: 350px; border-radius: 12px; margin-bottom: 10px; object-fit: cover; display: block; border: 1px solid rgba(0,0,0,0.1); }
.msg-sender-name { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 6px; margin-left: 12px;}
.quoted-msg { background: rgba(0,0,0,0.04); padding: 12px 16px; border-radius: 12px; border-left: 4px solid #cbd5e1; font-size: 14px; margin-bottom: 12px; color: #475569;}
.msg-me .quoted-msg { background: rgba(255,255,255,0.15); border-left-color: rgba(255,255,255,0.6); color: #f8fafc;}
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.msg-time { font-size: 12px; opacity: 0.8; font-weight: 600;}
.msg-edited { font-size: 12px; opacity: 0.8; font-style: italic; margin-right: 4px; }
.msg-tick { font-size: 12px; font-weight: 800; margin-left: 4px; letter-spacing: -0.5px;}

.msg-actions { display: flex; gap: 15px; font-size: 13px; margin-top: 8px; opacity: 0; transition: 0.3s; color: #64748b; font-weight: 700;}
.message-wrapper:hover .msg-actions { opacity: 1; transform: translateY(2px); }
.action-link { cursor: pointer; transition: 0.2s; background: rgba(255, 255, 255, 0.6); padding: 4px 10px; border-radius: 100px; backdrop-filter: blur(5px);}
.action-link:hover { color: #2c3e50; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.action-link.danger:hover { color: #ef4444; }
.system-message { text-align: center; margin: 20px 0; display: flex; justify-content: center; }
.system-message span { background: rgba(226, 232, 240, 0.8); backdrop-filter: blur(5px); color: #475569; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 700; border: 1px solid rgba(203, 213, 225, 0.5); box-shadow: 0 4px 10px rgba(0,0,0,0.02);}

.reply-preview-box { display: none; background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(10px); padding: 15px 25px; border-left: 5px solid #2c3e50; font-size: 14px; position: relative; justify-content: space-between; align-items: center; border-top: 1px solid rgba(226, 232, 240, 0.8); }
.reply-preview-text { color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
.cancel-reply-btn { background: none; border: none; font-weight: bold; font-size: 24px; cursor: pointer; color: #ef4444; transition: 0.2s;}
.cancel-reply-btn:hover { transform: scale(1.2) rotate(90deg); }

/* Mesaj Giriş Alanı */
.chat-input-area { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 20px 30px; display: flex; align-items: center; border-top: 1px solid rgba(226, 232, 240, 0.8); min-height: 85px; gap: 15px; position: relative;}
.chat-input-icons { display: flex; gap: 8px; align-items: center;}
.chat-input-icons label, .chat-input-icons button { font-size: 22px; cursor: pointer; color: #64748b; transition: 0.3s; width: 44px; height: 44px; border-radius: 100px; display: flex; justify-content: center; align-items: center; border: 1px solid transparent; background: rgba(248, 250, 252, 0.6); padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.02);}
.chat-input-icons label:hover, .chat-input-icons button:hover { background: white; color: #2c3e50; border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.05);}
.emoji-picker { display: none; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 24px; padding: 20px; gap: 12px; flex-wrap: wrap; box-shadow: 0 15px 40px rgba(0,0,0,0.1); position: absolute; z-index: 500; width: 320px; bottom: 95px; left: 30px;}
.emoji-item { cursor: pointer; font-size: 26px; transition: 0.2s; }
.emoji-item:hover { transform: scale(1.4); }

.chat-input-wrapper { flex: 1; background: rgba(248, 250, 252, 0.8); border-radius: 100px; display: flex; align-items: center; padding: 0 20px; border: 1px solid rgba(226, 232, 240, 0.8); transition: 0.3s; box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);}
.chat-input-wrapper:focus-within { border-color: #2c3e50; background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transform: translateY(-2px);}
.chat-input { flex: 1; padding: 16px 8px; border: none; background: transparent; font-size: 16px; outline: none; font-family: inherit; color: #0f172a; }
.chat-input::placeholder { color: #94a3b8; }
.send-btn { background: #2c3e50; color: white; border: none; cursor: pointer; font-size: 18px; width: 40px; height: 40px; border-radius: 100px; transition: 0.3s; opacity: 0.5; display: flex; align-items: center; justify-content: center; margin-left: 10px; box-shadow: 0 4px 10px rgba(44, 62, 80, 0.2);}
.send-btn:not(:disabled) { opacity: 1; transform: scale(1.1); box-shadow: 0 6px 15px rgba(44, 62, 80, 0.4);}

/* Gruplar */
.group-users-list { max-height:250px; overflow-y:auto; border:1px solid rgba(226, 232, 240, 0.8); border-radius:16px; padding:15px; background:rgba(248, 250, 252, 0.8); }
.group-user-label { display:flex; align-items:center; justify-content:space-between; padding:15px; border-bottom:1px solid rgba(226, 232, 240, 0.5); cursor:pointer; color:#0f172a; font-weight:600; transition: 0.2s;}
.group-user-label:hover { background: rgba(255, 255, 255, 0.8); border-radius: 12px; transform: translateX(5px);}

/* ==========================================================================
   KULLANICI PROFİLİ (PROFILE.HTML) EKLENTİLERİ
   ========================================================================== */
.back-arrow { font-size: 22px; cursor: pointer; padding: 10px 15px; border-radius: 100px; transition: 0.3s; display: flex; justify-content: center; align-items: center; font-weight: bold; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(226, 232, 240, 0.8); color: #334155; box-shadow: 0 2px 8px rgba(0,0,0,0.02);}
.back-arrow:hover { background: white; color: #0f172a; transform: translateX(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.05);}
.header-info { display: flex; flex-direction: column; }
.header-name { font-weight: 800; font-size: 20px; color: #0f172a; line-height: 1.2; letter-spacing: -0.5px;}
.header-post-count { font-size: 14px; color: #64748b; font-weight: 500;}
.profile-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 24px; margin-bottom: 25px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.03); margin-top: 10px;}
.profile-banner { height: 220px; background-color: #cbd5e1; width: 100%; position: relative; border-bottom: 1px solid rgba(226, 232, 240, 0.5);}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-header-box { padding: 25px; position: relative; }
.profile-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: -90px; margin-bottom: 20px; }
.profile-avatar { width: 140px; height: 140px; border-radius: 24px; border: 5px solid white; background: #e2e8f0; overflow: hidden; display: flex; justify-content: center; align-items: center; font-size: 55px; z-index: 2; position: relative; box-shadow: 0 8px 25px rgba(0,0,0,0.15);}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-top-actions { display: flex; gap: 12px; margin-top: 90px; align-items: center; }
.edit-profile-btn { background: white; color: #0f172a; border: 1px solid #cbd5e1; padding: 10px 24px; border-radius: 100px; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.03);}
.edit-profile-btn:hover { background: #f8fafc; border-color:#94a3b8; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.06);}
.follow-btn { background: #2c3e50; color: white; border: none; padding: 10px 24px; border-radius: 100px; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);}
.follow-btn:hover { background: #1a252f; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);}
.unfollow-btn { background: white; color: #0f172a; border: 1px solid #cbd5e1; padding: 10px 24px; border-radius: 100px; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.03);}
.unfollow-btn:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; transform: translateY(-2px);}
.icon-action-btn { background: white; border: 1px solid #cbd5e1; width: 42px; height: 42px; border-radius: 100px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 18px; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.03);}
.icon-action-btn:hover { background: #f8fafc; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.06);}
.profile-name { font-size: 26px; font-weight: 900; margin-top: 5px; display: flex; align-items: center; gap: 8px; color:#0f172a; letter-spacing: -0.5px;}
.profile-handle { font-size: 16px; color: #64748b; margin-bottom: 15px; font-weight: 500;}
.profile-bio { font-size: 16px; line-height: 1.6; margin-bottom: 20px; word-wrap: break-word; color: #334155;}
.profile-details { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; color: #64748b; margin-bottom: 20px; font-weight: 500;}
.profile-stats { display: flex; gap: 25px; font-size: 16px; padding-top: 20px; border-top: 1px solid rgba(241, 245, 249, 0.8);}
.stat-item { cursor: pointer; color: #64748b; transition: 0.2s;}
.stat-item:hover { color:#0f172a; transform: translateY(-2px);}
.stat-number { font-weight: 800; color: #0f172a; font-size: 18px;}
.private-badge { background: rgba(241, 245, 249, 0.8); backdrop-filter: blur(5px); color: #334155; font-size: 13px; padding: 6px 14px; border-radius: 100px; font-weight: 700; display: inline-block; margin-bottom: 12px; border: 1px solid rgba(226, 232, 240, 0.8);}
#post-detail-modal { align-items: center; padding: 20px; box-sizing: border-box; }
#post-detail-modal .modal-content { max-width: 700px; width: 100%; max-height: 100%; min-height: 50vh; padding: 0; border-radius: 24px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;}
#post-detail-modal .modal-header { top: 0; padding: 20px; margin: 0; border-bottom: 1px solid #f1f5f9; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 10; position: sticky;}

/* ==========================================================================
   KEŞFET / ARAMA (SEARCH.HTML) EKLENTİLERİ
   ========================================================================== */
.search-header-box { padding: 15px 0; }
.search-input { width: 100%; box-sizing: border-box; padding: 16px 24px; font-size: 16px; border: 1px solid rgba(226, 232, 240, 0.8); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: 100px; outline: none; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.02); color:#0f172a;}
.search-input:focus { border-color: #2c3e50; box-shadow: 0 8px 25px rgba(0,0,0,0.06); transform: translateY(-2px); background: rgba(255, 255, 255, 0.95);}

.search-results-container { text-align: left; padding-top: 10px;}
.trending-item { padding: 20px 24px; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(226, 232, 240, 0.5); border-radius: 20px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px); margin-bottom: 12px; display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.trending-item:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: #cbd5e1; background: rgba(255, 255, 255, 0.95);}
.trend-category { font-size: 14px; color: #64748b; margin-bottom: 6px; font-weight: 600;}
.trend-name { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 6px; letter-spacing: -0.5px;}
.trend-count { font-size: 14px; color: #64748b; font-weight: 600;}

.search-user-item { display: flex; align-items: center; gap: 15px; padding: 15px 20px; text-decoration: none; color: #0f172a; border: 1px solid rgba(226, 232, 240, 0.5); border-radius: 20px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px); transition: all 0.3s ease; margin-bottom: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.search-user-item:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: #cbd5e1; background: rgba(255, 255, 255, 0.95);}
.search-avatar { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; background: #e2e8f0; flex-shrink: 0; border: 1px solid rgba(203, 213, 225, 0.5); box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
.search-avatar img { width: 100%; height: 100%; object-fit: cover; }
.search-user-info { display: flex; flex-direction: column; }
.search-username { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; margin-bottom: 2px;}
.search-handle { color: #64748b; font-size: 14px; font-weight: 500;}

/* ==========================================================================
   BİLDİRİMLER (NOTIFICATIONS.HTML) EKLENTİLERİ
   ========================================================================== */
.notif-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 20px; padding: 20px; margin-bottom: 15px; display: flex; gap: 15px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.02); cursor: pointer; position: relative;}
.notif-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: #cbd5e1;}
.notif-icon { font-size: 26px; flex-shrink: 0; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 16px; background: rgba(241, 245, 249, 0.8); border: 1px solid rgba(226, 232, 240, 0.5); box-shadow: 0 4px 10px rgba(0,0,0,0.02);}
.notif-body { flex: 1; }
.notif-sender { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.notif-avatar { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: #e2e8f0; border: 1px solid rgba(203, 213, 225, 0.5); box-shadow: 0 2px 6px rgba(0,0,0,0.05);}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notif-text { font-size: 16px; color: #334155; line-height: 1.5; }
.notif-text b { color: #0f172a; font-weight: 800;}
.notif-time { font-size: 13px; color: #94a3b8; margin-top: 10px; font-weight: 600;}
.delete-notif-btn { position: absolute; top: 15px; right: 15px; background: rgba(248, 250, 252, 0.8); border: 1px solid rgba(226, 232, 240, 0.5); font-size: 20px; color: #94a3b8; cursor: pointer; opacity: 0; transition: 0.3s; padding: 8px; border-radius: 100px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;}
.notif-card:hover .delete-notif-btn { opacity: 1; }
.delete-notif-btn:hover { background: #fef2f2; color: #ef4444; border-color: #ef4444; transform: rotate(90deg);}
.btn-group { display: flex; gap: 12px; margin-top: 15px; }
.req-btn { padding: 10px 20px; border: none; border-radius: 100px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
.btn-accept { background: #2c3e50; color: white; box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);}
.btn-accept:hover { background: #1a252f; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);}
.btn-reject { background: rgba(248, 250, 252, 0.8); color: #0f172a; border: 1px solid #cbd5e1; }
.btn-reject:hover { background: #fef2f2; color: #ef4444; border-color: #ef4444; transform: translateY(-2px);}
.empty-text { text-align: center; color: #64748b; padding: 60px 20px; font-size: 16px; font-weight: 600; }
.empty-text span { font-size: 50px; display: block; margin-bottom: 20px; color: #cbd5e1; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));}

/* ==========================================================================
   ÇAĞRI (WEBRTC) EKRANI
   ========================================================================== */
.call-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 4000; flex-direction: column; align-items: center; justify-content: center; color: white; }
.call-status-text { font-size: 24px; font-weight: 800; margin-bottom: 30px; z-index: 4010; position: absolute; top: 80px; text-shadow: 0 4px 15px rgba(0,0,0,0.8); letter-spacing: -0.5px;}
.video-container { position: relative; width: 100%; height: 100%; max-width: 1000px; display: flex; justify-content: center; align-items: center; background: #020617; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); margin: 20px;}
.remote-video { width: 100%; height: 100%; object-fit: cover; }
.local-video { position: absolute; bottom: 30px; right: 30px; width: 120px; height: 180px; background: #334155; border-radius: 16px; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.8); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 4010; transform: scaleX(-1); transition: 0.3s;}
.local-video:hover { transform: scaleX(-1) scale(1.05); border-color: white;}
.call-controls { position: absolute; bottom: 50px; display: flex; gap: 40px; z-index: 4010; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); padding: 20px 40px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.1);}
.call-action-btn { width: 70px; height: 70px; border-radius: 100px; border: none; font-size: 28px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 8px 25px rgba(0,0,0,0.4); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: white;}
.call-action-btn:hover { transform: translateY(-5px) scale(1.1); }
.btn-accept { background: linear-gradient(135deg, #10b981 0%, #059669 100%); display: none; }
.btn-end { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

/* ==========================================================================
   MOBİL (RESPONSIVE) TASARIM (MAX 1000PX)
   ========================================================================== */
.mobile-sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.4); z-index: 4000; cursor: pointer; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.mobile-sidebar { position: fixed; top: 0; left: -340px; width: 320px; height: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 4001; transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 10px 0 30px rgba(0,0,0,0.1); overflow-y: auto; display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, 0.5);}
.mobile-sidebar.open { left: 0; }
.sidebar-header-mobile { padding: 30px 25px; background: rgba(248, 250, 252, 0.5); border-bottom: 1px solid rgba(226, 232, 240, 0.8); display: flex; flex-direction: column; }
.sidebar-top-icons { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.sidebar-avatar-mobile { width: 64px; height: 64px; border-radius: 16px; background: #e2e8f0; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; border: 3px solid white; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: 0.3s;}
.sidebar-avatar-mobile:hover { transform: scale(1.05); }
.sidebar-avatar-mobile img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-name-mobile { font-weight: 900; font-size: 20px; color: #0f172a; margin-top: 5px; line-height: 1.2; letter-spacing: -0.5px;}
.sidebar-handle-mobile { color: #64748b; font-size: 15px; margin-bottom: 20px; font-weight: 500;}
.sidebar-stats-mobile { display: flex; gap: 20px; font-size: 15px; color: #64748b; font-weight: 500;}
.sidebar-stats-mobile b { color: #0f172a; font-weight: 800;}
.sidebar-menu-mobile { display: flex; flex-direction: column; padding: 20px 0; }
.sidebar-menu-item { padding: 14px 30px; font-size: 17px; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 15px; text-decoration: none; transition: 0.2s; border-left: 4px solid transparent;}
.sidebar-menu-item:hover { background: rgba(241, 245, 249, 0.8); color: #0f172a; border-left-color: #2c3e50;}
.sidebar-divider { height: 1px; background: rgba(226, 232, 240, 0.8); margin: 15px 0; }

.fab-button { display: none; position: fixed; bottom: 100px; right: 25px; width: 64px; height: 64px; background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); color: white; border-radius: 20px; font-size: 32px; font-weight: 300; box-shadow: 0 10px 25px rgba(44, 62, 80, 0.4); border: none; cursor: pointer; z-index: 1000; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.fab-button:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 15px 35px rgba(44, 62, 80, 0.5);}
.fab-button:active { transform: scale(0.95); }

/* YENİ: Havada Süzülen, Cam Görünümlü Modern Alt Menü (Dock) */
.bottom-nav { 
    display: none; position: fixed; 
    width: 86% !important;
    left: 7% !important;
    bottom: 25px !important;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 15px 20px !important;
    z-index: 1000; justify-content: space-around; align-items: center;
}
.nav-item { color: #64748b; font-size: 24px; text-decoration: none; padding: 10px; border-radius: 100px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px;}
.nav-item span:last-child { font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; position: absolute; bottom: -5px;}
.nav-item.active { color: #2c3e50; background: rgba(241, 245, 249, 0.8); transform: translateY(-5px);}
.nav-item:hover { color: #2c3e50; transform: translateY(-5px) scale(1.1); }
.nav-item.active span:last-child, .nav-item:hover span:last-child { opacity: 1; transform: translateY(0); position: relative; bottom: auto;}

@media (max-width: 1000px) {
    .sidebar-left, .sidebar-right { display: none; }
    .feed-main { width: 100%; padding: 0 15px; padding-bottom: 120px; border-right: none;}
    .mobile-header-top { display: flex; padding: 15px 0;}
    .post-input-box { display: none; } 
    .bottom-nav { display: flex; }
    .fab-button { display: flex; }
    
    /* Chat.html mobilde tam ekran yapılandırması */
    #inbox-column { width: 100%; padding-bottom: 100px; }
    #chat-column { display: none; width: 100%; padding-bottom: 0 !important; height: 100vh; }
    .back-btn { display: flex !important; }
    .mobile-header-avatar { display: flex; align-items: center; justify-content: center; }
    
    body.chat-active #inbox-column { display: none !important; }
    body.chat-active #chat-column { display: flex !important; }
    body.chat-active .bottom-nav { display: none !important; } 
    body.chat-active { overflow: hidden; } 
    .msg-actions { opacity: 1; }
}

/* ==========================================================================
   KARANLIK MOD (EXECUTIVE DARK) - TÜM PLATFORM
   ========================================================================== */
body.dark-mode { background: linear-gradient(135deg, #0f172a 0%, #020617 100%) !important; color: #f8fafc; }
body.dark-mode .sidebar-left, 
body.dark-mode .sidebar-right, 
body.dark-mode .header-sticky,
body.dark-mode #inbox-column,
body.dark-mode #chat-column,
body.dark-mode .chat-header-main, 
body.dark-mode .chat-header, 
body.dark-mode .chat-input-area, 
body.dark-mode .mobile-sidebar, 
body.dark-mode .modal-content, 
body.dark-mode .emoji-picker, 
body.dark-mode .chat-messages, 
body.dark-mode .inbox-list, 
body.dark-mode .chat-empty-state, 
body.dark-mode .new-chat-state { background: transparent !important; border-color: rgba(51, 65, 85, 0.5); color: #f8fafc; }

body.dark-mode .header-sticky { background: rgba(15, 23, 42, 0.8) !important; backdrop-filter: blur(10px); }
body.dark-mode .chat-header, body.dark-mode .chat-input-area { background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(15px); }
body.dark-mode #inbox-column { background: rgba(15, 23, 42, 0.5) !important; }

body.dark-mode .post, 
body.dark-mode .post-input-box, 
body.dark-mode .feed-tabs, 
body.dark-mode .who-to-follow, 
body.dark-mode .search-box-right, 
body.dark-mode .sidebar-user-menu, 
body.dark-mode .comment-node, 
body.dark-mode .stories-container, 
body.dark-mode #stories-container, 
body.dark-mode .story-editor-board,
body.dark-mode .profile-card,
body.dark-mode .trending-item, 
body.dark-mode .search-user-item,
body.dark-mode .notif-card { background: rgba(30, 41, 59, 0.7) !important; backdrop-filter: blur(10px) !important; border-color: rgba(71, 85, 105, 0.5) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important; }

body.dark-mode .desktop-nav-item, 
body.dark-mode .feed-tab, 
body.dark-mode .post-time, 
body.dark-mode .author-username, 
body.dark-mode .story-username,
body.dark-mode .profile-handle, 
body.dark-mode .profile-details, 
body.dark-mode .stat-item,
body.dark-mode .search-handle, 
body.dark-mode .trend-category, 
body.dark-mode .trend-count,
body.dark-mode .notif-time { color: #94a3b8; }

body.dark-mode .desktop-nav-item:hover, 
body.dark-mode .sidebar-menu-item:hover, 
body.dark-mode .user-row:hover, 
body.dark-mode .icon-btn:hover,
body.dark-mode .icon-action-btn:hover, 
body.dark-mode .edit-profile-btn:hover, 
body.dark-mode .back-arrow:hover,
body.dark-mode .dm-user-card:hover, 
body.dark-mode .call-btn:hover, 
body.dark-mode .back-btn:hover, 
body.dark-mode .chat-input-icons label:hover, 
body.dark-mode .chat-input-icons button:hover,
body.dark-mode .search-user-item:hover, 
body.dark-mode .trending-item:hover { background-color: rgba(51, 65, 85, 0.8) !important; color: #f8fafc !important; border-color: rgba(71, 85, 105, 0.8) !important; }

body.dark-mode .desktop-nav-item.active { background-color: rgba(51, 65, 85, 0.9) !important; color: #f8fafc !important; border-left-color: #cbd5e1 !important; }

body.dark-mode .post-content, 
body.dark-mode .author-name, 
body.dark-mode .sidebar-user-name, 
body.dark-mode .sidebar-name-mobile, 
body.dark-mode .wtf-title, 
body.dark-mode .comment-text,
body.dark-mode .profile-name, 
body.dark-mode .stat-number, 
body.dark-mode .header-name,
body.dark-mode .dm-username, 
body.dark-mode .header-title, 
body.dark-mode .chat-username-text, 
body.dark-mode .unread-text, 
body.dark-mode .settings-text, 
body.dark-mode .reply-preview-text, 
body.dark-mode .chat-empty-title,
body.dark-mode .search-username, 
body.dark-mode .trend-name,
body.dark-mode .notif-text, 
body.dark-mode .notif-text b, 
body.dark-mode .empty-text { color: #f8fafc !important; }

body.dark-mode .dm-subtitle, 
body.dark-mode .time-badge, 
body.dark-mode .chat-subtitle, 
body.dark-mode .sidebar-user-handle, 
body.dark-mode .sidebar-stats-mobile, 
body.dark-mode .system-message span, 
body.dark-mode .chat-empty-desc, 
body.dark-mode .read-text, 
body.dark-mode .msg-sender-name,
body.dark-mode .empty-text span { color: #94a3b8; }

body.dark-mode .modal-header, 
body.dark-mode .sidebar-header-mobile { background: rgba(30, 41, 59, 0.9) !important; backdrop-filter: blur(10px) !important; border-color: rgba(51, 65, 85, 0.5) !important; }
body.dark-mode .modal-content { background: rgba(15, 23, 42, 0.95) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(51, 65, 85, 0.8) !important; box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important;}

body.dark-mode .close-btn, 
body.dark-mode .cancel-reply-btn { background: rgba(15, 23, 42, 0.8) !important; border-color: rgba(51, 65, 85, 0.5) !important; color: #f8fafc !important; }
body.dark-mode .close-btn:hover { background: rgba(51, 65, 85, 0.9) !important; }

body.dark-mode .dropdown-menu { background: rgba(30, 41, 59, 0.95) !important; backdrop-filter: blur(15px) !important; border-color: rgba(71, 85, 105, 0.5) !important; }
body.dark-mode .dropdown-item { color: #f8fafc !important; }
body.dark-mode .dropdown-item:hover { background-color: rgba(51, 65, 85, 0.9) !important; }

body.dark-mode .bottom-nav { background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(51, 65, 85, 0.6) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;}
body.dark-mode .nav-item { color: #64748b !important; }
body.dark-mode .nav-item.active { color: #f8fafc !important; background: rgba(51, 65, 85, 0.8) !important; }

body.dark-mode .action-icon { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(51, 65, 85, 0.5) !important; }
body.dark-mode .action-item:hover .action-icon { background: rgba(51, 65, 85, 0.8) !important; border-color: rgba(71, 85, 105, 0.6) !important; }

body.dark-mode .feed-tab.active { background: rgba(15, 23, 42, 0.6) !important; color: #f8fafc !important; border-bottom-color: #cbd5e1 !important;}
body.dark-mode .desktop-post-btn, body.dark-mode .btn-accept { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; }

body.dark-mode .story-avatar-wrapper.read { background: #475569 !important; }
body.dark-mode .story-avatar-wrapper.add-story { background: rgba(30, 41, 59, 0.5) !important; border-color: #475569 !important;}
body.dark-mode .story-avatar { background: #1e293b !important; border-color: #1e293b !important;}

body.dark-mode .profile-avatar { background-color: #0f172a !important; border-color: #1e293b !important; }
body.dark-mode .edit-profile-btn, body.dark-mode .unfollow-btn, body.dark-mode .icon-action-btn, body.dark-mode .back-arrow { background: rgba(15, 23, 42, 0.8) !important; color: #f8fafc !important; border-color: rgba(51, 65, 85, 0.6) !important; }
body.dark-mode .follow-btn { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: white !important; }
body.dark-mode .private-badge { background: rgba(15, 23, 42, 0.6) !important; color: #f8fafc !important; border-color: rgba(51, 65, 85, 0.5) !important;}
body.dark-mode .modal-input, body.dark-mode .search-input { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(51, 65, 85, 0.5) !important; color: #f8fafc !important;}
body.dark-mode .search-input:focus { border-color: #64748b !important; background: rgba(15, 23, 42, 0.9) !important;}

body.dark-mode .dm-user-card { background: rgba(30, 41, 59, 0.6) !important; border-color: rgba(51, 65, 85, 0.5) !important; color: #f8fafc !important; }
body.dark-mode .dm-user-card.active { border-color: #cbd5e1 !important; background: rgba(51, 65, 85, 0.8) !important; box-shadow: 0 0 0 1px #cbd5e1, 0 10px 25px rgba(0,0,0,0.3) !important;}
body.dark-mode .search-box-inbox, body.dark-mode .chat-input-wrapper { background: rgba(30, 41, 59, 0.6) !important; color: #f8fafc !important; border-color: rgba(51, 65, 85, 0.5) !important;}
body.dark-mode .search-box-inbox:focus-within, body.dark-mode .chat-input-wrapper:focus-within { border-color: #64748b !important; background: rgba(15, 23, 42, 0.8) !important; }
body.dark-mode .chat-input { color: #f8fafc !important; }
body.dark-mode .msg-them { background: rgba(30, 41, 59, 0.85) !important; color: #f8fafc !important; border-color: rgba(51, 65, 85, 0.5) !important; }
body.dark-mode .msg-me { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; }
body.dark-mode .reply-preview-box { background: rgba(30, 41, 59, 0.8) !important; border-top-color: rgba(51, 65, 85, 0.5) !important; border-left-color: #3b82f6 !important;}
body.dark-mode .system-message span { background: rgba(30, 41, 59, 0.8) !important; border-color: rgba(51, 65, 85, 0.5) !important; color: #94a3b8 !important;}
body.dark-mode .chat-empty-icon { color: #334155 !important; }
body.dark-mode .open-group-btn { background: rgba(30, 41, 59, 0.7) !important; color: #f8fafc !important; border-color: rgba(51, 65, 85, 0.5) !important; }
body.dark-mode .inbox-search-container { border-bottom-color: rgba(51, 65, 85, 0.5) !important; }
body.dark-mode .group-users-list { background: rgba(30, 41, 59, 0.5) !important; border-color: rgba(51, 65, 85, 0.5) !important; }
body.dark-mode .new-chat-results { border-top-color: rgba(51, 65, 85, 0.5) !important; }
body.dark-mode .group-user-label { border-bottom-color: rgba(51, 65, 85, 0.5) !important; color: #f8fafc !important; }

body.dark-mode .notif-icon { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(51, 65, 85, 0.5) !important;}
body.dark-mode .btn-reject { background: rgba(15, 23, 42, 0.6) !important; color: #f8fafc !important; border-color: rgba(51, 65, 85, 0.5) !important;}
body.dark-mode .btn-reject:hover { background: rgba(51, 65, 85, 0.8) !important; color: #ef4444 !important; border-color: #ef4444 !important;}
body.dark-mode .delete-notif-btn { color: #475569 !important; background: transparent !important; border-color: transparent !important;}
body.dark-mode .notif-card:hover .delete-notif-btn:hover { background: rgba(51, 65, 85, 0.8) !important; color: #ef4444 !important; }
body.dark-mode .mobile-sidebar { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(51, 65, 85, 0.5) !important; }

/* ==========================================================================
   DİĞER BİLEŞENLER (TOGGLE SWITCH)
   ========================================================================== */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 24px;}
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
input:checked + .slider { background-color: #2c3e50; }
input:checked + .slider:before { transform: translateX(20px); }
.post-image-container img, .post-image-container video { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* ==========================================================================
   YENİ KEŞFET (EXPLORE) SAYFASI TASARIMI
   ========================================================================== */
.explore-results-container {
    column-count: 2;
    column-gap: 15px;
}
@media (min-width: 768px) {
    .explore-results-container {
        column-count: 3;
    }
}
.explore-card {
    break-inside: avoid;
    margin-bottom: 15px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.explore-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}
.explore-card-media {
    width: 100%;
    position: relative;
    max-height: 250px;
    overflow: hidden;
}
.explore-card-media img, .explore-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.explore-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: #000;
}
.explore-card-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(15,23,42,0.6);
    color: white;
    backdrop-filter: blur(4px);
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
}
.explore-card-body {
    padding: 12px;
}
.explore-card-text {
    font-size: 13px;
    color: #334155;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    line-height: 1.5;
}
.explore-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.explore-card-author {
    display: flex;
    align-items: center;
    gap: 6px;
}
.explore-card-author img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
.explore-card-stats {
    font-size: 12px;
    color: #64748b;
    display: flex;
    gap: 8px;
}
.category-pill { flex-shrink: 0;
    padding: 8px 16px;
    background: rgba(255,255,255,0.8);
    border: 1px solid #cbd5e1;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
    backdrop-filter: blur(5px);
}
.category-pill.active {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
}
.suggestion-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: 0.2s;
}
.suggestion-item:hover {
    background: #f1f5f9;
}
.suggestion-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.suggestion-content {
    flex: 1;
    overflow: hidden;
}
.suggestion-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggestion-subtitle {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ==========================================================================
   KATEGORİ ETİKETLERİ VE KAYDIRMA (SCROLL) SİSTEMİ
   ========================================================================== */
.category-pills-wrapper {
    display: flex;
    align-items: center;
}
.category-pills-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 5px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    flex-grow: 1;
    cursor: grab;
    width: 100%;
}
.category-pills-container::-webkit-scrollbar {
    display: none;
}
.category-pills-container.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.category-pills-container.dragging .category-pill { flex-shrink: 0;
    pointer-events: none; /* Sürükleme sırasında tıklamayı engeller */
}
.pill-scroll-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    color: #334155;
    position: absolute;
    top: calc(50% - 10px);
    transform: translateY(-50%);
    opacity: 0.9;
    transition: 0.2s;
}
.pill-scroll-btn:hover {
    opacity: 1;
    background: white;
    transform: translateY(-50%) scale(1.1);
}
#pill-scroll-left {
    left: -10px;
}
#pill-scroll-right {
    right: -10px;
}
@media (max-width: 768px) {
    .pill-scroll-btn {
        display: none !important;
    }
    .category-pills-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}
.bottom-nav {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.bottom-nav.compact {
    padding: 8px 15px !important;
    bottom: 15px !important;
    width: 70% !important;
    left: 15% !important;
}
.bottom-nav.compact .nav-item {
    font-size: 20px;
    padding: 6px;
    width: 45px;
}

body.dark-mode .header-sticky.compact #mobile-avatar-header,
body.dark-mode .chat-header-main.compact #mobile-avatar-header,
body.dark-mode .header-sticky.compact .back-arrow {
    background: rgba(30, 41, 59, 0.9) !important;
}

/* ==========================================================================
   HEADER SCROLL-HIDE ARCHITECTURE (TRANSFORM CHILDREN PATTERN) - GLOBAL (DESKTOP & MOBILE)
   ========================================================================== */
/* Ana Container'lar: Sticky kalır, yükseklikleri ASLA değişmez (Layout kaymasını/zıplamasını önler) */
.header-sticky, .chat-header-main {
    transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Tüm iç öğeler transform ile donanım hızlandırmalı kaydırılır (iOS Safari bug'ını atlatır) */
.mobile-logo-text, .feed-tabs:not(#inbox-tabs), .search-header-box, .category-pills-wrapper, .header-title, .header-icons, .header-info {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease !important;
}

#mobile-avatar-header, .back-arrow {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}

/* ----------------------------------------------------
   DURUM B: HIDDEN (Aşağı Scroll - Tamamen Gizli) 
   ---------------------------------------------------- */


/* ----------------------------------------------------
   DURUM C: COMPACT (Yukarı Scroll - Sadece Avatar) 
   ---------------------------------------------------- */

body.dark-mode.header-compact #mobile-avatar-header,
body.dark-mode.header-compact .back-arrow {
    background: rgba(30, 41, 59, 0.95) !important;
}

/* ----------------------------------------------------
   INBOX EKLENTİLERİ (Arama ve Sekmeler)
   Bunlar sticky değildir, kaydırma sırasında içeriği yukarı 
   çekmek için max-height: 0 ile ezilmeleri (collapse) gerekir.
   ---------------------------------------------------- */
.inbox-search-container, #inbox-tabs {
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, margin 0.4s ease, padding 0.4s ease;
    max-height: 120px;
    overflow: hidden;
    opacity: 1;
}

/* ==========================================================================
   MOBIL MODAL FIX (BOTTOM SHEET)
   ========================================================================== */
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end !important; /* Modali ekranin altina hizala */
        padding: 0 !important;
    }
    .modal-content {
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        max-height: 85dvh !important; /* Klavye ve safe-area icin esneklik */
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        border-bottom: none !important;
        animation: slideUpModal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    #post-detail-modal .modal-content {
        max-height: 90dvh !important;
        min-height: 50vh !important;
    }
}
@keyframes slideUpModal {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* MOZAIK CUSTOM VIDEO PLAYER */
.mz-video-player {
    position: relative;
    width: 100%;
    max-height: 400px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}
.mz-video-player.fullscreen {
    max-height: 100vh;
    border-radius: 0;
}
.mz-video {
    width: 100%;
    height: 100%;
    max-height: inherit;
    object-fit: contain;
    cursor: pointer;
}
.mz-video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    pointer-events: none;
    transition: opacity 0.3s;
}
.mz-big-play {
    width: 60px; height: 60px;
    background: rgba(0,0,0,0.6);
    color: white; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 24px; padding-left: 4px;
    backdrop-filter: blur(4px);
    pointer-events: auto; cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.mz-big-play:active { transform: scale(0.9); }
.mz-video-player.playing .mz-big-play { display: none; }

.mz-video-controls {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px 15px 10px 15px;
    display: flex; align-items: center; gap: 10px;
    opacity: 0; transition: opacity 0.3s;
    pointer-events: none;
}
.mz-video-player.playing:hover .mz-video-controls,
.mz-video-player.paused .mz-video-controls,
.mz-video-player.controls-visible .mz-video-controls {
    opacity: 1; pointer-events: auto;
}
.mz-control-btn {
    background: none; border: none; color: white;
    font-size: 18px; cursor: pointer; padding: 0;
    display: flex; justify-content: center; align-items: center;
    width: 30px; height: 30px;
}
.mz-progress-container {
    flex: 1; height: 20px;
    display: flex; align-items: center; cursor: pointer;
}
.mz-progress-bar {
    width: 100%; height: 4px; background: rgba(255,255,255,0.3);
    border-radius: 2px; position: relative; overflow: hidden;
}
.mz-progress-filled {
    height: 100%; background: #2c3e50; width: 0%;
    transition: width 0.1s linear;
}
.mz-time {
    color: white; font-size: 12px; font-weight: 500; font-family: monospace;
}
@media (max-width: 430px) {
    .mz-time { display: none; }
    .mz-video-controls { padding: 15px 10px 8px 10px; gap: 8px; }
    .mz-big-play { width: 50px; height: 50px; font-size: 20px; padding-left:3px; }
}

/* ========================================= */
/* REELS VIEWER */
/* ========================================= */
.reels-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #000;
    z-index: 10000;
    display: none;
    flex-direction: column;
}
.reels-close-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #fff;
    font-size: 24px;
    z-index: 10001;
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.reels-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    height: 100dvh;
}
/* Hide scrollbar for reels container */
.reels-container::-webkit-scrollbar {
    display: none;
}
.reels-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.reels-item {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.reels-item video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.reels-info {
    position: absolute;
    bottom: 20px;
    left: 15px;
    right: 70px;
    color: #fff;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 20px 15px;
    bottom: 0;
    left: 0;
}
.reels-author {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.reels-author img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #fff;
}
.reels-desc {
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.reels-actions {
    position: absolute;
    bottom: 20px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    z-index: 2;
}
.reels-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    transition: transform 0.1s;
}
.reels-action-btn:active {
    transform: scale(0.9);
}
.reels-action-btn span {
    font-size: 13px;
    margin-top: 5px;
    font-weight: bold;
}
.reels-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 70px;
    color: rgba(255,255,255,0.7);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.reels-mute-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: white;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
    backdrop-filter: blur(4px);
}
.reels-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.3);
    z-index: 4;
}
.reels-progress-filled {
    height: 100%;
    background: #fff;
    width: 0%;
}

/* ==========================================
   YÜZER ALT NAVİGASYON (SÜREKLİ YÜZER PANEL)
   ========================================== */
/* NORMAL DURUM (Yüzer) */
div.fixed.bottom-0.lg\:hidden,
.bottom-nav {
    bottom: 20px !important;
    width: 90% !important;
    left: 5% !important;
    border-radius: 24px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
}

body.dark-mode div.fixed.bottom-0.lg\:hidden,
body.dark-mode .bottom-nav {
    border-color: rgba(51, 65, 85, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
}

/* COMPACT (SCROLL) DURUMU */
body.sidebar-compact div.fixed.bottom-0.lg\:hidden,
body.sidebar-compact .bottom-nav {
    width: 70% !important;
    left: 15% !important;
    bottom: 15px !important;
    border-radius: 30px !important;
    padding: 0 5px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
}

body.sidebar-compact div.fixed.bottom-0.lg\:hidden .h-16,
body.sidebar-compact .bottom-nav .h-16 {
    height: 3rem !important; /* 4rem'den 3rem'e */
}

body.sidebar-compact div.fixed.bottom-0.lg\:hidden .text-lg,
body.sidebar-compact .bottom-nav .text-lg {
    font-size: 1rem !important; 
}

body.sidebar-compact div.fixed.bottom-0.lg\:hidden .w-14,
body.sidebar-compact .bottom-nav .w-14 {
    width: 2.75rem !important;
    height: 2.75rem !important;
}

body.sidebar-compact div.fixed.bottom-0.lg\:hidden .-top-5,
body.sidebar-compact .bottom-nav .-top-5 {
    top: -0.5rem !important;
}

body.sidebar-compact div.fixed.bottom-0.lg\:hidden .text-2xl,
body.sidebar-compact .bottom-nav .text-2xl {
    font-size: 1.2rem !important;
}

/* İç elemanların animasyonu */
div.fixed.bottom-0.lg\:hidden .h-16,
div.fixed.bottom-0.lg\:hidden .text-lg,
div.fixed.bottom-0.lg\:hidden .w-14,
div.fixed.bottom-0.lg\:hidden .-top-5,
div.fixed.bottom-0.lg\:hidden .text-2xl,
.bottom-nav .h-16,
.bottom-nav .text-lg,
.bottom-nav .w-14,
.bottom-nav .-top-5,
.bottom-nav .text-2xl {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* === UNIFIED HEADER SCROLL HIDING === */
header {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
}

@media (max-width: 1024px) {
    body.header-hidden header {
        transform: translateY(-100%);
    }

    /* Kayan (sticky) alt filtre çubuklarının da birlikte kaymasını sağlamak için */
    body.header-hidden .sticky.top-0:not(header):not(.modal-header) {
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.header-hidden .sticky.top-16 {
        transform: translateY(calc(-100% - 4rem));
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sticky.top-0:not(header):not(.modal-header), .sticky.top-16 {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Mesajlar Sayfası Özel Scroll Hiding Layout Düzeltmesi */
    body.header-hidden main.chat-main-container {
        transform: translateY(-64px);
        height: 100vh !important;
    }
    main.chat-main-container {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Mobil Panel İçin Responsive Sağ Sütun - SIKIŞMA VE KAYDIRMA ÇÖZÜLDÜ */
@media (max-width: 1024px) {
    #right-sidebar > div {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .responsive-right-sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 85% !important;
        max-width: 400px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background-color: #ffffff !important;
        z-index: 7000 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-direction: column !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
        /* YENİ: Dış sarmalayıcı kaydırılamaz, iç sarmalayıcı kaydırılır */
        overflow: hidden !important; 
        padding: 0 !important; 
    }
    body.dark-mode .responsive-right-sidebar {
        background-color: #0b1121 !important;
    }
    body.mobile-panel-open .responsive-right-sidebar {
        transform: translateX(0) !important;
    }
    
    /* YENİ: Mobilde kapatma butonu her zaman sabit üstte kalsın */
    #mobile-panel-close-btn {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        margin-bottom: 0 !important;
        padding: 20px !important;
    }
    body.dark-mode #mobile-panel-close-btn {
        background: rgba(11, 17, 33, 0.95);
    }
    
    /* YENİ: Kartların bulunduğu asıl kaydırılabilir alan */
    .mobile-scroll-wrapper {
        flex: 1;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px !important;
        padding-bottom: 120px !important;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .mobile-scroll-wrapper > div {
        flex-shrink: 0 !important; /* KARTLARIN SIKIŞMASINI ENGELLER */
        height: auto !important;
    }
}

/* ==================================================
   MOZAIK JIT ARBITRARY CLASSES (STATIC TAILWIND COMPATIBILITY)
   ================================================== */

.bg-\[\#f8fafc\] { background-color: #f8fafc; }
.bg-\[\#f8fafc\]\/50 { background-color: rgba(248, 250, 252, 0.5); }
.h-\[320px\] { height: 320px; }
.h-\[400px\] { height: 400px; }
.h-\[60vh\] { height: 60vh; }
.h-\[85vh\] { height: 85vh; }
.h-\[92vh\] { height: 92vh; }
.h-\[calc\(100vh-64px\)\] { height: calc(100vh - 64px); }
.max-h-\[250px\] { max-height: 250px; }
.max-h-\[300px\] { max-height: 300px; }
.max-h-\[500px\] { max-height: 500px; }
.max-h-\[60vh\] { max-height: 60vh; }
.max-h-\[65vh\] { max-height: 65vh; }
.max-h-\[85vh\] { max-height: 85vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[92vh\] { max-height: 92vh; }
.max-w-\[400px\] { max-width: 400px; }
.max-w-\[440px\] { max-width: 440px; }
.max-w-\[480px\] { max-width: 480px; }
.max-w-\[500px\] { max-width: 500px; }
.max-w-\[550px\] { max-width: 550px; }
.max-w-\[600px\] { max-width: 600px; }
.max-w-\[620px\] { max-width: 620px; }
.max-w-\[650px\] { max-width: 650px; }
.max-w-\[680px\] { max-width: 680px; }
.max-w-\[760px\] { max-width: 760px; }
.max-w-\[82\%\] { max-width: 82%; }
.max-w-\[85\%\] { max-width: 85%; }
.max-w-\[90\%\] { max-width: 90%; }
.min-h-\[120px\] { min-height: 120px; }
.min-h-\[260px\] { min-height: 260px; }
.min-h-\[60px\] { min-height: 60px; }
.min-w-\[240px\] { min-width: 240px; }
.min-w-\[70px\] { min-width: 70px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }
.text-\[15px\] { font-size: 15px; }
.text-\[8px\] { font-size: 8px; }
.text-\[9px\] { font-size: 9px; }
.top-\[110\%\] { top: 110%; }
.w-\[90\%\] { width: 90%; }
.w-\[94\%\] { width: 94%; }
.w-\[95\%\] { width: 95%; }
.w-\[96\%\] { width: 96%; }
.z-\[6000\] { z-index: 6000; }
.z-\[8000\] { z-index: 8000; }

/* Dark Mode Utilities */
.dark-mode .dark\:bg-\[\#0b1121\], html.dark .dark\:bg-\[\#0b1121\] { background-color: #0b1121; }
.dark-mode .dark\:bg-\[\#0b1121\]\/30, html.dark .dark\:bg-\[\#0b1121\]\/30 { background-color: rgba(11, 17, 33, 0.3); }
.dark-mode .dark\:bg-\[\#0b1121\]\/50, html.dark .dark\:bg-\[\#0b1121\]\/50 { background-color: rgba(11, 17, 33, 0.5); }
.dark-mode .dark\:bg-\[\#0b1121\]\/90, html.dark .dark\:bg-\[\#0b1121\]\/90 { background-color: rgba(11, 17, 33, 0.9); }
.dark-mode .dark\:bg-\[\#0b1121\]\/95, html.dark .dark\:bg-\[\#0b1121\]\/95 { background-color: rgba(11, 17, 33, 0.95); }
.dark-mode .dark\:bg-\[\#0e1628\], html.dark .dark\:bg-\[\#0e1628\] { background-color: #0e1628; }
.dark-mode .dark\:bg-\[\#0e1628\]\/40, html.dark .dark\:bg-\[\#0e1628\]\/40 { background-color: rgba(14, 22, 40, 0.4); }
.dark-mode .dark\:bg-\[\#151e32\], html.dark .dark\:bg-\[\#151e32\] { background-color: #151e32; }
.dark-mode .dark\:bg-\[\#151e32\]\/95, html.dark .dark\:bg-\[\#151e32\]\/95 { background-color: rgba(21, 30, 50, 0.95); }
.dark-mode .dark\:bg-\[\#1e293b\], html.dark .dark\:bg-\[\#1e293b\] { background-color: #1e293b; }
.dark-mode .dark\:border-\[\#0b1121\], html.dark .dark\:border-\[\#0b1121\] { border-color: #0b1121; }
.dark-mode .dark\:hover\:bg-\[\#151e32\]:hover, html.dark .dark\:hover\:bg-\[\#151e32\]:hover { background-color: #151e32; }
.dark-mode .dark\:hover\:bg-\[\#1e293b\]:hover, html.dark .dark\:hover\:bg-\[\#1e293b\]:hover { background-color: #1e293b; }
.dark-mode .dark\:text-\[\#06b6d4\], html.dark .dark\:text-\[\#06b6d4\] { color: #06b6d4; }

@media (min-width: 640px) {
  .sm\:max-w-\[70\%\] { max-width: 70%; }
}

@media (min-width: 768px) {
  .md\:max-w-\[70\%\] { max-width: 70%; }
  .md\:min-w-\[280px\] { min-width: 280px; }
}

@media (min-width: 1024px) {
  .lg\:h-\[calc\(100vh-64px\)\] { height: calc(100vh - 64px); }
  .lg\:max-h-\[calc\(100vh-6rem\)\] { max-height: calc(100vh - 6rem); }
}