/* SosyalKafe — Modern İndigo Paleti */ :root { --bf-brand: #6366f1; --bf-brand-hover: #4f46e5; --bf-brand-pressed: #4338ca; --bf-brand-light: #eef2ff; --bf-brand-soft: #e0e7ff; --bf-brand-rgb: 99, 102, 241; --bf-brand-gradient: linear-gradient(135deg, #818cf8 0%, #6366f1 45%, #4f46e5 100%); --bf-orange: var(--bf-brand); --bf-orange-dark: var(--bf-brand-hover); --bf-orange-light: var(--bf-brand); --bf-link: #6366f1; --bf-bg: #f8fafc; --bf-bg-mesh: radial-gradient(ellipse 80% 60% at 0% -10%, rgba(99,102,241,0.11) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 100% 0%, rgba(129,140,248,0.09) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(99,102,241,0.05) 0%, transparent 60%), var(--bf-bg); --bf-card: rgba(255, 255, 255, 0.92); --bf-border: #e8ecf4; --bf-text: #0f172a; --bf-muted: #64748b; --bf-subtle: #94a3b8; --bf-hover: #f1f5f9; --bf-input: #f1f5f9; --bf-surface-muted: #f8fafc; --bf-like: #5b5fc7; --bf-danger: #e05252; --bf-radius-sm: 8px; --bf-radius-md: 10px; --bf-radius-lg: 12px; --bf-radius-xl: 14px; --bf-radius-2xl: 18px; --bf-radius-full: 9999px; --bf-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.03); --bf-shadow-md: 0 4px 16px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.03); --bf-shadow-lg: 0 16px 40px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.04); --bf-shadow-brand: 0 4px 18px rgba(99,102,241,0.28); --bf-shadow-float: 0 12px 40px rgba(15,23,42,0.1), 0 4px 12px rgba(15,23,42,0.04); --bf-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); --bf-transition-spring: 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); --bf-glass: rgba(255,255,255,0.82); --bf-glass-border: rgba(255,255,255,0.6); --bf-nav-pill: rgba(255,255,255,0.65); --bf-card-ring: rgba(99,102,241,0.06); --bf-pad-xs: 4px; --bf-pad-sm: 6px; --bf-pad-md: 10px; --bf-pad-lg: 12px; --bf-pad-xl: 14px; --bf-pad-2xl: 16px; --bf-pad-3xl: 18px; --bf-topbar-h: 58px; --bf-gap-sm: 10px; --bf-gap-md: 12px; --bf-gap-lg: 14px; --fb-blue: var(--bf-brand); --fb-blue-dark: var(--bf-brand-hover); --fb-blue-light: var(--bf-brand); --fb-link: var(--bf-link); --fb-bg: var(--bf-bg); --fb-card: var(--bf-card); --fb-border: var(--bf-border); --fb-text: var(--bf-text); --fb-muted: var(--bf-muted); --fb-hover: var(--bf-hover); --fb-like: var(--bf-like); --fb-repost: #00ba7c; --fb-input: var(--bf-input); --bf-msg-sent-bg: #e8edf4; --bf-msg-sent-border: #d6dee9; --bf-msg-sent-text: #334155; --bf-msg-recv-bg: #ffffff; --bf-msg-recv-border: #e4e9f2; --bf-msg-radius: 8px; --bf-msg-tail: 5px; --bf-comment-bubble: rgba(241, 245, 249, 0.9); --bf-comment-text: #1e293b; --bf-comment-name: #0f172a; --bf-comment-meta: #64748b; --bf-comment-input: rgba(241, 245, 249, 0.65); --bf-comment-line: rgba(148, 163, 184, 0.22); } html.dark { --bf-brand: #818cf8; --bf-brand-hover: #6366f1; --bf-brand-pressed: #4f46e5; --bf-brand-light: #1e1b4b; --bf-brand-soft: #312e81; --bf-brand-rgb: 129, 140, 248; --bf-brand-gradient: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #6366f1 100%); --bf-link: #a5b4fc; --bf-bg: #0f1117; --bf-bg-mesh: radial-gradient(ellipse 80% 60% at 10% -10%, rgba(139,143,245,0.12) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 90% 0%, rgba(91,95,199,0.08) 0%, transparent 50%), var(--bf-bg); --bf-card: rgba(28, 29, 40, 0.92); --bf-border: #2a2d3d; --bf-text: #f1f5f9; --bf-card-ring: rgba(129, 140, 248, 0.08); --bf-muted: #9498a8; --bf-subtle: #6e7284; --bf-hover: #252736; --bf-input: #252736; --bf-surface-muted: #161720; --bf-like: #8b8ff5; --bf-danger: #f07070; --bf-shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15); --bf-shadow-md: 0 4px 12px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15); --bf-shadow-lg: 0 12px 32px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.2); --bf-shadow-brand: 0 4px 14px rgba(139,143,245,0.22); --bf-shadow-float: 0 8px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2); --bf-glass: rgba(18,19,26,0.85); --bf-glass-border: rgba(255,255,255,0.06); --bf-nav-pill: rgba(255,255,255,0.05); --fb-blue: var(--bf-brand); --fb-blue-dark: var(--bf-brand-hover); --fb-blue-light: var(--bf-brand); --fb-link: var(--bf-link); --fb-bg: var(--bf-bg); --fb-card: var(--bf-card); --fb-border: var(--bf-border); --fb-text: var(--bf-text); --fb-muted: var(--bf-muted); --fb-hover: var(--bf-hover); --fb-like: var(--bf-like); --fb-repost: #00ba7c; --fb-input: var(--bf-input); --bf-msg-sent-bg: #2a3142; --bf-msg-sent-border: #3a4358; --bf-msg-sent-text: #e2e8f0; --bf-msg-recv-bg: #1c2130; --bf-msg-recv-border: #2d3548; --bf-msg-radius: 8px; --bf-msg-tail: 5px; --bf-comment-bubble: rgba(255, 255, 255, 0.04); --bf-comment-text: #cbd5e1; --bf-comment-name: #f1f5f9; --bf-comment-meta: #7c8394; --bf-comment-input: rgba(255, 255, 255, 0.035); --bf-comment-line: rgba(255, 255, 255, 0.07); } html.dark { color-scheme: dark; } html:not(.dark) { color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } .theme-body { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bf-bg-mesh); background-attachment: fixed; color: var(--bf-text); margin: 0; padding: 0; max-width: 100%; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Üst bar — cam efektli, modern */ .fb-topbar { background: var(--bf-glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--bf-border); position: sticky; top: 0; z-index: 100; box-shadow: var(--bf-shadow-sm); } .fb-topbar-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--bf-gap-md); padding: 0 var(--bf-pad-2xl); height: 58px; } .fb-brand-link { display: flex; align-items: center; gap: 3px; text-decoration: none; flex-shrink: 0; transition: transform var(--bf-transition); } .fb-brand-link:hover { transform: translateY(-1px); } .fb-logo { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; color: #fff; font-size: 1.2rem; border-radius: var(--bf-radius-md); flex-shrink: 0; box-shadow: none; overflow: hidden; padding: 4px; } .site-logo-img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; } .fb-brand-link:hover .fb-logo { box-shadow: none; } .fb-wordmark { font-size: 18px; font-weight: 800; letter-spacing: -0.04em; background: var(--bf-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; display: none; } @media (min-width: 768px) { .fb-wordmark { display: block; } } .fb-search { width: 100%; min-width: 0; max-width: none; display: none; } @media (min-width: 640px) { .fb-search { display: block; } } .fb-search-wrap { position: relative; display: flex; align-items: center; } .fb-search-icon { position: absolute; left: 14px; color: var(--bf-muted); font-size: 0.85rem; pointer-events: none; } .fb-search input { width: 100%; background: var(--bf-input); border: 1px solid transparent; border-radius: var(--bf-radius-full); padding: 8px 14px 8px 36px; color: var(--bf-text); font-size: 14px; font-family: inherit; outline: none; transition: background var(--bf-transition), border-color var(--bf-transition), box-shadow var(--bf-transition); } .fb-search input::placeholder { color: var(--bf-muted); } .fb-search input:focus { background: var(--bf-card); border-color: rgba(var(--bf-brand-rgb), 0.35); box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.12); } .fb-topnav { display: flex; align-items: center; gap: 2px; justify-self: end; padding: 4px; background: var(--bf-nav-pill); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-full); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .fb-topnav-item { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--bf-muted); border-radius: var(--bf-radius-full); text-decoration: none; font-size: 1.1rem; position: relative; transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition-spring); } .fb-topnav-item:hover { background: var(--bf-hover); color: var(--bf-brand); transform: scale(1.06); } .fb-topnav-item.active { color: #fff; background: var(--bf-brand-gradient); box-shadow: var(--bf-shadow-brand); } .fb-topnav-item.active::after { display: none; } .fb-topnav-avatar.active { color: var(--bf-brand); background: var(--bf-brand-light); box-shadow: inset 0 0 0 2px rgba(var(--bf-brand-rgb), 0.35); } .fb-topnav-avatar.active::after { display: none; } .fb-topnav-badge { position: absolute; top: 2px; right: 2px; background: var(--bf-danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .fb-topnav-avatar img, .fb-topnav-avatar .avatar-blogger { width: 26px; height: 26px; border-radius: var(--bf-radius-full); } .theme-toggle-top, .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; } .theme-toggle-top .theme-icon-sun, .theme-toggle-top .theme-icon-moon, .theme-toggle-btn .theme-icon-sun, .theme-toggle-btn .theme-icon-moon { display: none; line-height: 1; } html:not(.dark) .theme-toggle-top .theme-icon-moon, html:not(.dark) .theme-toggle-btn .theme-icon-moon { display: block; } html.dark .theme-toggle-top .theme-icon-sun, html.dark .theme-toggle-btn .theme-icon-sun { display: block; } .theme-toggle-top { background: none; border: none; color: var(--bf-muted); width: 40px; height: 40px; border-radius: var(--bf-radius-full); cursor: pointer; font-size: 1.05rem; transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition-spring); } .theme-toggle-top:hover { background: var(--bf-hover); color: var(--bf-brand); transform: rotate(-12deg) scale(1.05); } /* 3 kolon layout */ .app-shell { display: flex; align-items: flex-start; justify-content: center; gap: var(--bf-gap-lg); max-width: 1200px; margin: 0 auto; padding: var(--bf-pad-2xl) var(--bf-pad-2xl) calc(var(--bf-pad-2xl) + env(safe-area-inset-bottom)); min-height: calc(100vh - 58px); } @media (min-width: 1024px) { .app-shell { padding-bottom: var(--bf-pad-lg); } } @media (min-width: 900px) { .app-shell:not(.ig-dm-shell) { --shell-max: 1200px; --shell-gutter: max(var(--bf-pad-2xl), calc((100vw - var(--shell-max)) / 2 + var(--bf-pad-2xl))); display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; justify-content: center; padding-top: 12px; } .app-shell:not(.ig-dm-shell) .main-column { max-width: 680px; justify-self: center; width: 100%; } } @media (min-width: 1024px) { .app-shell:not(.ig-dm-shell) { grid-template-columns: 220px minmax(0, 680px) 300px; } .app-shell:not(.ig-dm-shell) .main-column { max-width: none; justify-self: stretch; } } .left-sidebar { display: none; flex: 0 0 220px; width: 220px; align-self: stretch; z-index: 20; } .left-sidebar-mobile-head, .mob-sheet-handle, .mobile-menu-backdrop, .mob-tabbar { display: none; } @media (max-width: 899px) { .fb-topbar-inner { grid-template-columns: 1fr auto; gap: 12px; padding: 0 14px; } .fb-brand-link { min-width: 0; } .fb-brand-link .fb-wordmark { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fb-search { display: none !important; } .fb-topnav { margin-left: auto; flex-shrink: 0; padding: 0; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 0; } .fb-topnav .fb-topnav-item, .fb-topnav .fb-topnav-login, .fb-topnav .fb-topnav-join { display: none !important; } .fb-topnav .theme-toggle-top { width: 42px; height: 42px; border: 1px solid var(--bf-border); background: var(--fb-card); box-shadow: var(--bf-shadow-sm); } .mobile-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 180; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .mobile-menu-backdrop:not([hidden]) { opacity: 1; pointer-events: auto; } .left-sidebar.mob-sheet { display: flex; flex-direction: column; gap: 12px; position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: min(86vh, 720px); z-index: 190; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(var(--bf-brand-rgb), 0.16), transparent 60%), var(--fb-card); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); border-bottom: none; border-radius: 28px 28px 0 0; box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.18); transform: translateY(105%); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; overscroll-behavior: contain; } .left-sidebar.mob-sheet.is-open { transform: translateY(0); } .mob-sheet-handle { display: flex; justify-content: center; padding: 4px 0 8px; flex-shrink: 0; } .mob-sheet-handle span { width: 42px; height: 5px; border-radius: var(--bf-radius-full); background: rgba(var(--bf-brand-rgb), 0.22); } .left-sidebar-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; padding: 0 2px 4px; } .left-sidebar-mobile-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .left-sidebar-mobile-logo { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #fff; color: #fff; font-size: 1.2rem; box-shadow: none; flex-shrink: 0; overflow: hidden; padding: 5px; } .left-sidebar-mobile-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .left-sidebar-mobile-title { font-size: 17px; font-weight: 800; color: var(--fb-text); letter-spacing: -0.03em; line-height: 1.1; } .left-sidebar-mobile-subtitle { font-size: 11px; font-weight: 600; color: var(--fb-muted); line-height: 1.3; } .mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-full); background: var(--fb-card); color: var(--fb-muted); cursor: pointer; box-shadow: var(--bf-shadow-sm); transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition-spring); } .mobile-menu-close:hover, .mobile-menu-close:focus-visible { background: var(--bf-brand-light); color: var(--bf-brand); transform: rotate(90deg); } .left-sidebar .left-menu-profile { margin-bottom: 0; padding: 10px; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.12), rgba(var(--bf-brand-rgb), 0.04)); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); } .left-sidebar .left-menu-profile .left-menu-item { padding: 4px 10px; background: transparent; } .left-sidebar .left-menu:not(.left-menu-profile):not(:last-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 0; padding: 0; border: none; background: transparent; box-shadow: none; } .left-sidebar .left-menu:last-child { margin-bottom: 0; padding: 10px; border-radius: 18px; background: var(--fb-input); border: 1px solid var(--bf-border); } .left-sidebar .left-menu:not(.left-menu-profile):not(:last-child) .left-menu-item { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 88px; padding: 14px 10px; border-radius: 16px; font-size: 12px; font-weight: 800; background: var(--fb-card); border: 1px solid var(--bf-border); box-shadow: var(--bf-shadow-sm); } .left-sidebar .left-menu:not(.left-menu-profile):not(:last-child) .left-menu-item i { width: 40px; height: 40px; border-radius: 14px; font-size: 1rem; margin: 0; } .left-sidebar .left-menu:not(.left-menu-profile):not(:last-child) .left-menu-item .left-menu-badge { position: absolute; top: 8px; right: 8px; margin-left: 0; } .left-sidebar .left-menu:not(.left-menu-profile):not(:last-child) .left-menu-item { position: relative; } .left-sidebar .left-menu:last-child .left-menu-item { padding: 10px 12px; border-radius: 12px; font-size: 14px; gap: 10px; } .left-sidebar .left-menu:last-child .left-menu-item i { width: 32px; height: 32px; border-radius: 10px; font-size: 0.9rem; } .left-sidebar .left-menu-title { padding: 2px 4px 8px; font-size: 10px; letter-spacing: 0.12em; } .app-shell { padding: 12px 12px calc(76px + env(safe-area-inset-bottom)); } .mob-tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: 0 0 env(safe-area-inset-bottom); background: linear-gradient(to top, color-mix(in srgb, var(--fb-card) 98%, transparent) 0%, color-mix(in srgb, var(--fb-card) 88%, transparent) 100%); border-top: 1px solid color-mix(in srgb, var(--bf-border) 80%, transparent); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 -1px 0 rgba(var(--bf-brand-rgb), 0.06), 0 -12px 32px rgba(15, 23, 42, 0.1); } .mob-tabbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0; min-height: 64px; max-width: 520px; margin: 0 auto; padding: 6px 10px 8px; } .mob-tabbar-side { display: flex; align-items: flex-end; justify-content: space-evenly; gap: 0; min-width: 0; } .mob-tabbar-side.mob-tabbar-side--triple .mob-tabbar-item { max-width: 62px; padding-inline: 4px; } .mob-tabbar-side.mob-tabbar-side--triple .mob-tabbar-label { font-size: 9px; } .mob-tabbar-icon-avatar { width: 24px; height: 24px; } .mob-tabbar-icon-avatar img, .mob-tabbar-icon-avatar .avatar-blogger { width: 24px !important; height: 24px !important; border-radius: var(--bf-radius-full); object-fit: cover; box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-border) 70%, transparent); transition: box-shadow var(--bf-transition), transform var(--bf-transition-spring); } .mob-tabbar-avatar.is-active .mob-tabbar-icon-avatar img, .mob-tabbar-avatar.is-active .mob-tabbar-icon-avatar .avatar-blogger { box-shadow: 0 0 0 2px rgba(var(--bf-brand-rgb), 0.55); transform: scale(1.05); } .mob-tabbar-avatar.is-active .mob-tabbar-pill { width: 46px; height: 34px; } .mob-tabbar-fab-slot { display: flex; align-items: flex-end; justify-content: center; width: 72px; flex-shrink: 0; padding-bottom: 2px; } .mob-tabbar-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; flex: 1 1 0; min-width: 0; max-width: 76px; min-height: 52px; padding: 4px 6px 2px; border: none; background: transparent; color: var(--fb-muted); font-family: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--bf-transition), transform 0.15s ease; } .mob-tabbar-item:active { transform: scale(0.94); } .mob-tabbar-pill { position: absolute; top: 2px; left: 50%; width: 44px; height: 32px; border-radius: var(--bf-radius-full); background: transparent; transform: translateX(-50%); transition: background var(--bf-transition), width var(--bf-transition-spring), height var(--bf-transition-spring); pointer-events: none; } .mob-tabbar-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; } .mob-tabbar-icon i { font-size: 19px; line-height: 1; transition: transform var(--bf-transition-spring), color var(--bf-transition); } .mob-tabbar-label { position: relative; z-index: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; opacity: 0.88; transition: opacity var(--bf-transition), color var(--bf-transition), font-weight var(--bf-transition); } .mob-tabbar-item.is-active { color: var(--bf-brand); } .mob-tabbar-item.is-active .mob-tabbar-pill { width: 52px; height: 36px; background: rgba(var(--bf-brand-rgb), 0.14); } .mob-tabbar-item.is-active .mob-tabbar-icon i { transform: scale(1.08); } .mob-tabbar-item.is-active .mob-tabbar-label { color: var(--bf-brand); font-weight: 800; opacity: 1; } .mob-tabbar-fab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 56px; height: 56px; margin-top: -18px; padding: 0; border: none; border-radius: 18px; background: var(--bf-brand-gradient); color: #fff; font-family: inherit; cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--bf-brand) 55%, #000), 0 10px 24px rgba(var(--bf-brand-rgb), 0.38); -webkit-tap-highlight-color: transparent; transition: transform var(--bf-transition-spring), box-shadow var(--bf-transition), background var(--bf-transition); } .mob-tabbar-fab:active { transform: translateY(2px) scale(0.96); box-shadow: 0 2px 0 color-mix(in srgb, var(--bf-brand) 55%, #000), 0 6px 16px rgba(var(--bf-brand-rgb), 0.32); } .mob-tabbar-fab i { font-size: 20px; line-height: 1; transition: transform var(--bf-transition-spring); } .mob-tabbar-fab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mob-tabbar-fab-ring { position: absolute; inset: -4px; border-radius: 22px; border: 2px solid rgba(var(--bf-brand-rgb), 0.22); opacity: 0; transform: scale(0.92); transition: opacity var(--bf-transition), transform var(--bf-transition-spring); pointer-events: none; } .mob-tabbar-menu.is-open .mob-tabbar-fab { background: linear-gradient(145deg, color-mix(in srgb, var(--bf-brand) 88%, #fff), var(--bf-brand)); } .mob-tabbar-menu.is-open .mob-tabbar-fab i { transform: rotate(90deg); } .mob-tabbar-menu.is-open .mob-tabbar-fab-ring { opacity: 1; transform: scale(1); } .mob-dock-badge { position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--bf-radius-full); background: var(--bf-danger); color: #fff; font-size: 9px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--fb-card); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35); z-index: 2; } body.mobile-menu-open { overflow: hidden; } body.mobile-menu-open .mob-tabbar { opacity: 0.97; } body.mobile-menu-open .mob-tabbar-fab { transform: scale(1.04); } } @media (min-width: 900px) { .left-sidebar { display: block; } .left-sidebar .left-menu:last-child { margin-bottom: 0; } } .left-menu { background: var(--fb-card); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); padding: 3px; margin-bottom: 10px; box-shadow: var(--bf-shadow-sm); } .left-menu-profile { margin-bottom: 10px; } .left-menu-item { display: flex; align-items: center; gap: 8px; padding: 4px 9px; min-width: 0; color: var(--fb-text); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: var(--bf-radius-md); transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition); } .left-menu-item:hover { background: var(--fb-hover); } .left-menu-item.active { color: var(--bf-brand); background: var(--bf-brand-light); box-shadow: inset 0 0 0 1px rgba(var(--bf-brand-rgb), 0.12); } .left-menu-item i { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bf-muted); font-size: 0.95rem; border-radius: var(--bf-radius-md); background: var(--bf-input); flex-shrink: 0; transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition-spring); } .left-menu-item:hover i { background: var(--bf-brand-soft); color: var(--bf-brand); transform: scale(1.05); } .left-menu-badge { margin-left: auto; background: var(--bf-danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: var(--bf-radius-full); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; } .nav-notif-badge.is-pulse, .fb-topnav-badge.is-pulse, .left-menu-badge.is-pulse, .mob-dock-badge.is-pulse, .mobile-bottom-nav-badge.is-pulse, .ig-popup-badge.is-pulse { animation: nav-notif-badge-pulse 0.45s ease; } @keyframes nav-notif-badge-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } .left-menu-item.active i { color: #fff; background: var(--bf-brand-gradient); box-shadow: var(--bf-shadow-brand); transform: scale(1.02); } .left-menu-title { padding: 7px 9px 4px; font-size: 11px; font-weight: 700; color: var(--fb-muted); text-transform: uppercase; letter-spacing: 0.06em; } .left-menu-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-column { flex: 1 1 500px; min-width: 0; max-width: 680px; width: 100%; } .main-column:has(.kesif-hub) { max-width: 680px; } .right-sidebar { display: none; flex: 0 0 300px; width: 300px; align-self: stretch; } @media (min-width: 1024px) { .right-sidebar { display: block; } } @media (min-width: 900px) { .app-shell:not(.ig-dm-shell) .left-sidebar, .app-shell:not(.ig-dm-shell) .right-sidebar { position: relative; align-self: stretch; display: flex; flex-direction: column; min-height: 0; z-index: 2; } .app-shell:not(.ig-dm-shell) .sidebar-sticky-panel { position: relative; flex: 0 0 auto; align-self: flex-start; width: 100%; height: fit-content; overflow: visible; max-height: none; z-index: 1; will-change: transform; } } @media (max-width: 899px) { .app-shell:not(.ig-dm-shell) .left-sidebar, .app-shell:not(.ig-dm-shell) .right-sidebar { margin-top: 0 !important; } .app-shell:not(.ig-dm-shell) .sidebar-sticky-panel { position: static; top: auto; max-height: none; overflow: visible; } } /* Kartlar */ .fb-card { background: var(--fb-card); border: 1px solid var(--bf-card-ring); border-radius: var(--bf-radius-xl); box-shadow: var(--bf-shadow-sm); margin-bottom: var(--bf-gap-md); overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow var(--bf-transition), border-color var(--bf-transition); } .fb-post.fb-card { border-color: transparent; box-shadow: var(--bf-shadow-md); background: var(--bf-card); overflow: visible; } .fb-post.fb-card:has(.comments-section:not(.hidden)) { position: relative; z-index: 25; } .fb-post.fb-card:has(.comments-section:not(.hidden)) .fb-post-actions { padding-bottom: 4px; } .fb-post.fb-card:hover { box-shadow: var(--bf-shadow-float); } .fb-post-media-only .fb-post-header { padding-bottom: 6px; } .compose-card { position: relative; border-color: rgba(var(--bf-brand-rgb), 0.12); box-shadow: var(--bf-shadow-md); overflow: visible; } .left-menu:hover { box-shadow: var(--bf-shadow-md); } .fb-widget-title { font-size: 15px; font-weight: 700; color: var(--fb-text); padding: var(--bf-pad-lg) var(--bf-pad-xl) var(--bf-pad-md); letter-spacing: -0.01em; } .fb-widget-link { display: block; padding: var(--bf-pad-sm) var(--bf-pad-2xl) var(--bf-pad-lg); color: var(--fb-link); font-size: 13px; font-weight: 600; text-decoration: none; } .fb-widget-link:hover { text-decoration: underline; } .sidebar-widget-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px 10px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--bf-border); transition: background var(--bf-transition); } .sidebar-widget-head:hover, .sidebar-widget-head:focus-visible { background: var(--bf-hover); outline: none; } .sidebar-widget-head-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.82rem; } .sidebar-widget-head-icon--stats { background: var(--bf-brand-soft); color: var(--bf-brand); } .sidebar-widget-head-icon--trends { background: #fff7ed; color: #f97316; } html.dark .sidebar-widget-head-icon--trends { background: #3b2514; color: #fb923c; } .sidebar-widget-head-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; letter-spacing: -0.02em; color: var(--fb-text); line-height: 1.2; } .sidebar-widget-head-go { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fb-muted); font-size: 10px; background: transparent; transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition); } .sidebar-widget-head:hover .sidebar-widget-head-go, .sidebar-widget-head:focus-visible .sidebar-widget-head-go { background: var(--bf-brand-light); color: var(--bf-brand); transform: translateX(1px); } .trends-widget--plain { overflow: hidden; } .trends-plain-body { padding: 8px 12px 11px; } .trends-plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .trends-plain-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; text-decoration: none; color: inherit; border-radius: 4px; transition: color var(--bf-transition); } .trends-plain-list a:hover, .trends-plain-list a:focus-visible { outline: none; } .trends-plain-list a:hover .trends-plain-tag, .trends-plain-list a:focus-visible .trends-plain-tag { color: var(--bf-brand); } .trends-plain-tag { min-width: 0; font-size: 13px; font-weight: 500; color: var(--fb-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--bf-transition); } .trends-plain-count { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--fb-muted); font-variant-numeric: tabular-nums; line-height: 1.3; } .trends-plain-empty { margin: 0 0 4px; font-size: 12px; color: var(--fb-muted); } .trends-plain-foot { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--fb-muted); text-decoration: none; transition: color var(--bf-transition); } .trends-plain-foot:hover, .trends-plain-foot:focus-visible { color: var(--bf-brand); outline: none; } .site-stats-widget { overflow: hidden; } .site-stats-tiles { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px 8px; } .site-stat-tile { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm); background: var(--bf-surface-muted); text-decoration: none; color: inherit; transition: border-color var(--bf-transition), background var(--bf-transition); } .site-stat-tile:hover, .site-stat-tile:focus-visible { border-color: rgba(var(--bf-brand-rgb), 0.24); background: var(--bf-brand-light); outline: none; } .site-stat-tile-icon { width: 28px; height: 28px; border-radius: var(--bf-radius-sm); background: var(--bf-brand-soft); color: var(--bf-brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.82rem; } .site-stat-tile-online .site-stat-tile-icon { background: #ecfdf5; color: #10b981; } .site-stat-tile-online .site-stat-tile-icon i { font-size: 0.55rem; animation: site-stat-online-pulse 2s ease infinite; } .site-stat-tile-visitors .site-stat-tile-icon { background: #eff6ff; color: #3b82f6; } .site-stat-tile-members .site-stat-tile-icon { background: #f5f3ff; color: #7c3aed; } .site-stat-tile-blogs .site-stat-tile-icon { background: #fff7ed; color: #ea580c; } html.dark .site-stat-tile-online .site-stat-tile-icon { background: #132a22; color: #34d399; } html.dark .site-stat-tile-visitors .site-stat-tile-icon { background: #152238; color: #60a5fa; } html.dark .site-stat-tile-members .site-stat-tile-icon { background: #221533; color: #c084fc; } html.dark .site-stat-tile-blogs .site-stat-tile-icon { background: #2a1d14; color: #fb923c; } .site-stat-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .site-stat-tile-label { font-size: 12px; font-weight: 700; color: var(--fb-text); line-height: 1.25; } .site-stat-tile-hint { font-size: 10px; color: var(--fb-muted); line-height: 1.25; } .site-stat-tile-breakdown { font-size: 10px; line-height: 1.35; white-space: normal; font-variant-numeric: tabular-nums; } .site-stat-tile-value { font-size: 15px; font-weight: 800; color: var(--fb-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 3ch; text-align: right; transition: color 0.25s ease, transform 0.25s ease; } .site-stat-tile-value.site-stat-updated { color: var(--bf-brand); transform: scale(1.06); } @keyframes site-stat-online-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* —— İstatistikler sayfası (forum kutusu) —— */ .forum-board-stats { display: flex; flex-direction: column; gap: 12px; } .forum-board-box { border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm); background: var(--bf-card); overflow: hidden; } .forum-board-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--bf-brand-gradient); border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); } .forum-board-box-head-alt { background: linear-gradient(135deg, var(--bf-brand-hover) 0%, var(--bf-brand-pressed) 100%); } html.dark .forum-board-box-head { border-bottom-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); } .forum-board-box-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .forum-board-box-title i { font-size: 12px; opacity: 0.92; } .forum-board-title-online { font-size: 8px !important; color: #86efac; filter: drop-shadow(0 0 4px rgba(134, 239, 172, 0.55)); } .forum-board-box-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; opacity: 0.95; font-variant-numeric: tabular-nums; } .forum-board-box-meta i { font-size: 11px; opacity: 0.9; } .forum-board-row-icon { display: inline-block; width: 16px; margin-right: 4px; color: var(--bf-brand); font-size: 11px; text-align: center; vertical-align: middle; } html.dark .forum-board-row-icon { color: var(--bf-brand); } .forum-board-box-body { padding: 10px 12px 12px; font-size: 13px; line-height: 1.55; color: var(--fb-text); } .forum-board-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .forum-board-table thead th { padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--fb-muted); text-align: left; background: var(--bf-surface-muted); border-bottom: 1px solid var(--bf-border); } .forum-board-col-label { width: auto; } .forum-board-col-num { width: 108px; } .forum-board-col-side { width: 38%; } .forum-board-table thead th:first-child, .forum-board-table tbody th[scope="row"] { padding-left: 12px; } .forum-board-table thead th.forum-board-th-num, .forum-board-table thead th.forum-board-th-side { padding-right: 12px; } .forum-board-table thead th.forum-board-th-num { text-align: right; } .forum-board-table thead th.forum-board-th-side { text-align: left; } .forum-board-table tbody th, .forum-board-table tbody td { padding: 8px 12px; vertical-align: middle; border-bottom: 1px solid var(--bf-border); } .forum-board-table tbody tr:last-child th, .forum-board-table tbody tr:last-child td { border-bottom: none; } .forum-board-table tbody tr:nth-child(even) { background: var(--bf-surface-muted); } .forum-board-table tbody th { font-weight: 600; text-align: left; color: var(--fb-text); } .forum-board-th-num, .forum-board-td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .forum-board-td-text { text-align: left; font-weight: 600; white-space: nowrap; } .forum-board-table-records .forum-board-col-num { width: 128px; } .forum-board-table-records .forum-board-col-side { width: 46%; } .forum-board-table-records thead th.forum-board-th-num { text-align: center; } .forum-board-table-records .forum-board-td-value { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forum-board-table-records .forum-board-td-value .forum-board-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .forum-board-td-side, .forum-board-th-side { text-align: left; } .forum-board-td-side { color: var(--fb-muted); font-size: 12px; font-weight: 400; line-height: 1.45; } .forum-board-td-muted { color: var(--fb-muted); font-size: 12px; } .forum-board-statlines { margin: 0; padding: 0; } .forum-board-statline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 5px 0; border-bottom: 1px solid var(--bf-border); font-size: 13px; line-height: 1.5; } .forum-board-statline:last-child { border-bottom: none; padding-bottom: 0; } .forum-board-statline dt { display: flex; align-items: center; margin: 0; min-width: 140px; font-weight: 600; color: var(--fb-text); } .forum-board-statline dd { margin: 0; flex: 1 1 0; min-width: 0; } .forum-board-statline-detail { margin-left: 6px; color: var(--fb-muted); font-size: 12px; font-weight: 400; } .forum-board-link { color: var(--fb-link); font-weight: 700; text-decoration: none; } .forum-board-link:hover, .forum-board-link:focus-visible { text-decoration: underline; } .forum-board-lead { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--bf-border); border-left: 3px solid var(--bf-brand); border-radius: var(--bf-radius-sm); background: var(--bf-brand-light); } .forum-board-lead > i { margin-right: 6px; color: var(--bf-brand); font-size: 12px; } html.dark .forum-board-lead { background: rgba(var(--bf-brand-rgb), 0.1); border-left-color: var(--bf-brand); } .forum-board-block { margin-top: 4px; } .forum-board-block-divider { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bf-border); } .forum-board-subhead { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--fb-muted); letter-spacing: -0.01em; } .forum-board-subhead i { color: var(--bf-brand); font-size: 11px; } .forum-board-muted { margin: 0; color: var(--fb-muted); font-style: italic; } .forum-board-online-list, .forum-board-bot-list { margin: 0; line-height: 1.7; word-break: break-word; } .forum-board-online-link { color: var(--fb-link); font-weight: 600; text-decoration: none; } .forum-board-online-link:hover, .forum-board-online-link:focus-visible { text-decoration: underline; } .forum-board-online-admin { color: #dc2626; font-weight: 700; } .forum-board-online-mod { color: #2563eb; font-weight: 700; } .forum-board-online-user { color: #111827; font-weight: 600; } html.dark .forum-board-online-admin { color: #f87171; } html.dark .forum-board-online-mod { color: #60a5fa; } html.dark .forum-board-online-user { color: #e5e7eb; } .forum-board-online-sep { margin: 0 1px; color: var(--fb-muted); } .forum-board-legend { margin: 8px 0 0; font-size: 11px; color: var(--fb-muted); } .forum-board-legend-admin { color: #dc2626; font-weight: 700; } .forum-board-legend-mod { color: #2563eb; font-weight: 700; } .forum-board-legend-user { color: #111827; font-weight: 600; } html.dark .forum-board-legend-admin { color: #f87171; } html.dark .forum-board-legend-mod { color: #60a5fa; } html.dark .forum-board-legend-user { color: #e5e7eb; } .forum-board-bot { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font-weight: 600; color: var(--fb-text); } .forum-board-bot .istatistikler-bot-avatar { width: 18px; height: 18px; font-size: 0.55rem; vertical-align: middle; } .forum-board-footnote { margin: 0; padding: 2px 0 0; font-size: 11px; color: var(--fb-muted); text-align: center; } .forum-board-footnote i { margin-right: 4px; opacity: 0.7; } @media (max-width: 560px) { .forum-board-box-body { padding: 8px 10px 10px; } .forum-board-table thead th, .forum-board-table tbody th, .forum-board-table tbody td { padding: 6px 8px; font-size: 12px; } .forum-board-col-num { width: 80px; } .forum-board-table-records .forum-board-col-num { width: 104px; } .forum-board-table-records .forum-board-col-side { width: 50%; } .forum-board-col-side { width: 42%; } .forum-board-statline { flex-direction: column; gap: 2px; } .forum-board-statline dt { min-width: 0; } } .istatistikler-bot-row { cursor: default; } .istatistikler-bot-row:hover { background: var(--bf-hover); } .istatistikler-bot-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; border: 1px solid var(--bf-border); background: var(--bf-surface-muted); color: var(--fb-text); } .istatistikler-bot-google { background: #f0f7ff; color: #4285f4; border-color: #d2e3fc; } .istatistikler-bot-yandex { background: #fff5f5; color: #ff0000; border-color: #ffd6d6; } .istatistikler-bot-bing { background: #eff6ff; color: #0078d4; border-color: #cfe4ff; } .istatistikler-bot-duckduckgo { background: #fff7ed; color: #de5833; border-color: #fed7aa; } .istatistikler-bot-facebook { background: #eff6ff; color: #1877f2; border-color: #cfe4ff; } .istatistikler-bot-twitter { background: #f0f9ff; color: #1d9bf0; border-color: #bae6fd; } .istatistikler-bot-apple { background: #f5f5f5; color: #1d1d1f; border-color: #e5e5e5; } .istatistikler-bot-baidu { background: #eff6ff; color: #2932e1; border-color: #c7d2fe; } .istatistikler-bot-yahoo { background: #f5f3ff; color: #6001d2; border-color: #ddd6fe; } .istatistikler-bot-telegram { background: #ecfeff; color: #229ed9; border-color: #a5f3fc; } .istatistikler-bot-other { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; } html.dark .istatistikler-bot-avatar { background: var(--bf-surface-2); border-color: var(--bf-border); } html.dark .istatistikler-bot-google { background: #152238; color: #8ab4f8; border-color: #2a3f5f; } html.dark .istatistikler-bot-yandex { background: #2a1515; color: #ff6b6b; border-color: #4a2020; } html.dark .istatistikler-bot-bing { background: #12243a; color: #60a5fa; border-color: #1e3a5f; } html.dark .istatistikler-bot-duckduckgo { background: #2a1d14; color: #fb923c; border-color: #4a3020; } html.dark .istatistikler-bot-facebook { background: #12243a; color: #60a5fa; border-color: #1e3a5f; } html.dark .istatistikler-bot-twitter { background: #122a3a; color: #7dd3fc; border-color: #1e4a5f; } html.dark .istatistikler-bot-apple { background: #222; color: #f5f5f7; border-color: #444; } html.dark .istatistikler-bot-baidu { background: #15182e; color: #818cf8; border-color: #2a2f4f; } html.dark .istatistikler-bot-yahoo { background: #221533; color: #c084fc; border-color: #3b2a55; } html.dark .istatistikler-bot-telegram { background: #122a33; color: #67e8f9; border-color: #1e4a55; } html.dark .istatistikler-bot-other { background: #1c1f2b; color: #94a3b8; border-color: #2a2f3d; } .user-row-badge-bot { background: #f3f4f6; color: #6b7280; } html.dark .user-row-badge-bot { background: #2a2a2a; color: #9ca3af; } .istatistikler-bot-pulse { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(156, 163, 175, 0.45); animation: istatistikler-bot-pulse 2s ease infinite; } @keyframes istatistikler-bot-pulse { 0% { box-shadow: 0 0 0 0 rgba(156, 163, 175, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(156, 163, 175, 0); } 100% { box-shadow: 0 0 0 0 rgba(156, 163, 175, 0); } } /* Destek — ortak durum renkleri */ :root { --support-open: #3b82f6; --support-open-soft: #eff6ff; --support-open-text: #2563eb; --support-progress: #f59e0b; --support-progress-soft: #fff7ed; --support-progress-text: #c2410c; --support-closed: #22c55e; --support-closed-soft: #ecfdf5; --support-closed-text: #059669; } /* Destek merkezi */ .support-portal { display: flex; flex-direction: column; gap: 16px; } .support-hero { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(var(--bf-brand-rgb), 0.14); background: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(var(--bf-brand-rgb), 0.18), transparent 55%), radial-gradient(ellipse 60% 80% at 0% 100%, rgba(59, 130, 246, 0.12), transparent 50%), linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.08) 0%, var(--bf-surface) 58%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); } .support-hero-content { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 24px; } .support-hero-badge { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; color: var(--bf-brand); background: rgba(var(--bf-brand-rgb), 0.12); border: 1px solid rgba(var(--bf-brand-rgb), 0.16); } .support-hero-text { flex: 1; min-width: 200px; } .support-hero-text h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fb-text); } .support-hero-text p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--fb-muted); } .support-hero-cta { flex-shrink: 0; min-height: 42px; padding-inline: 18px; border-radius: 12px; box-shadow: 0 8px 20px rgba(var(--bf-brand-rgb), 0.22); } .support-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; } .support-hero-lookup { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding-inline: 16px; border-radius: 12px; border: 1px solid var(--bf-border); background: var(--fb-card); color: var(--fb-text); font-weight: 700; cursor: pointer; } .support-hero-lookup:hover { background: rgba(var(--bf-brand-rgb), 0.06); } .support-guest-banner { margin-bottom: 12px; padding: 14px 16px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--fb-muted); } .support-guest-banner p { margin: 0; } .support-guest-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; } .support-guest-banner-actions a { color: var(--bf-brand); text-decoration: none; font-weight: 700; } .support-inline-link { border: 0; padding: 0; background: none; color: var(--bf-brand); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; } .support-guest-fields { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--bf-border); margin-bottom: 4px; } .support-guest-fields-hint, .support-lookup-intro { margin: 0; font-size: 12px; line-height: 1.45; color: var(--fb-muted); } .support-panel-guest-email { display: block; font-size: 12px; color: var(--fb-muted); font-weight: 500; } .support-panel-guest-badge { display: inline-flex; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--fb-muted); background: rgba(var(--bf-brand-rgb), 0.08); } .support-inbox-shell { margin-bottom: 0; overflow: hidden; border-radius: 18px; } .support-inbox-head { padding: 14px 16px 0; } .support-inbox-head-text h2 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--fb-text); } .support-inbox-head-sub { margin: 4px 0 0; font-size: 12px; color: var(--fb-muted); } /* Destek filtre menüsü — portal + admin ortak */ .support-filter-menu { display: grid; gap: 6px; margin: 10px 14px 0; } .support-filter-menu-portal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-filter-menu-admin { grid-template-columns: repeat(4, minmax(0, 1fr)); } .support-filter-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 58px; padding: 8px 11px; border-radius: 11px; border: 1.5px solid var(--bf-border); background: var(--bf-surface); text-align: left; font: inherit; color: var(--fb-text); text-decoration: none; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; appearance: none; -webkit-appearance: none; } button.support-filter-card { width: 100%; } .support-filter-card:hover { border-color: rgba(var(--bf-brand-rgb), 0.28); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04); } .support-filter-card-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: var(--bf-surface-muted); color: var(--fb-muted); transition: background 0.18s ease, color 0.18s ease; } .support-filter-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .support-filter-card-label { font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--fb-text); } .support-filter-card-hint { font-size: 10px; line-height: 1.3; color: var(--fb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-filter-card-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--bf-surface-muted); font-size: 13px; font-weight: 800; line-height: 1; color: var(--fb-text); transition: background 0.18s ease, color 0.18s ease; } /* Renk temaları */ .support-filter-card-active .support-filter-card-icon { background: rgba(59, 130, 246, 0.12); color: var(--support-open); } .support-filter-card-closed .support-filter-card-icon { background: rgba(34, 197, 94, 0.12); color: var(--support-closed); } .support-filter-card-open .support-filter-card-icon { background: rgba(59, 130, 246, 0.12); color: var(--support-open); } .support-filter-card-in_progress .support-filter-card-icon { background: rgba(245, 158, 11, 0.14); color: var(--support-progress); } .support-filter-card-all .support-filter-card-icon { background: rgba(100, 116, 139, 0.12); color: var(--fb-muted); } .support-filter-card-active.is-active { border-color: var(--support-open); background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.03) 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12); } .support-filter-card-closed.is-active { border-color: var(--support-closed); background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.03) 100%); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1); } .support-filter-card-open.is-active { border-color: var(--support-open); background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.03) 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12); } .support-filter-card-in_progress.is-active { border-color: var(--support-progress); background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.03) 100%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1); } .support-filter-card-all.is-active { border-color: var(--fb-muted); background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.03) 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .support-filter-card.is-active .support-filter-card-icon { background: var(--bf-surface); color: inherit; } .support-filter-card-active.is-active .support-filter-card-icon, .support-filter-card-open.is-active .support-filter-card-icon { color: var(--support-open-text); } .support-filter-card-in_progress.is-active .support-filter-card-icon { color: var(--support-progress-text); } .support-filter-card-closed.is-active .support-filter-card-icon { color: var(--support-closed-text); } .support-filter-card-active.is-active .support-filter-card-count, .support-filter-card-open.is-active .support-filter-card-count { background: var(--support-open); color: #fff; } .support-filter-card-in_progress.is-active .support-filter-card-count { background: var(--support-progress); color: #fff; } .support-filter-card-closed.is-active .support-filter-card-count { background: var(--support-closed); color: #fff; } .support-filter-card-all.is-active .support-filter-card-count { background: #64748b; color: #fff; } .support-filter-substats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 14px 0; } .support-filter-substats.hidden { display: none; } .support-filter-substat { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--bf-border); background: var(--bf-surface-muted); } .support-filter-substat-icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .support-filter-substat-open .support-filter-substat-icon { background: rgba(59, 130, 246, 0.12); color: var(--support-open-text); } .support-filter-substat-in_progress .support-filter-substat-icon { background: rgba(245, 158, 11, 0.14); color: var(--support-progress-text); } .support-filter-substat-text { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--fb-muted); } .support-filter-substat-text strong { font-size: 13px; font-weight: 800; color: var(--fb-text); } .support-inbox-body { margin-top: 10px; border-top: 1px solid var(--bf-border); } .support-inbox-list { display: flex; flex-direction: column; } .support-inbox-item + .support-inbox-item { border-top: 1px solid var(--bf-border); } .support-inbox-row { display: grid; grid-template-columns: 4px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 16px 14px 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 0.15s ease; } .support-inbox-row:hover { background: var(--bf-hover); } .support-inbox-row.is-active { background: rgba(var(--bf-brand-rgb), 0.04); } .support-inbox-row-accent { align-self: stretch; width: 4px; border-radius: 0 4px 4px 0; } .support-inbox-accent-open { background: var(--support-open); } .support-inbox-accent-in_progress { background: var(--support-progress); } .support-inbox-accent-closed { background: var(--support-closed); } .support-inbox-row-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: var(--bf-brand); background: rgba(var(--bf-brand-rgb), 0.08); } .support-ticket-item-in_progress .support-inbox-row-icon { color: var(--support-progress-text); background: var(--support-progress-soft); } .support-ticket-item-closed .support-inbox-row-icon { color: var(--support-closed-text); background: var(--support-closed-soft); } .support-inbox-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .support-inbox-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .support-inbox-row-subject { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--fb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-inbox-row-top time { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--fb-muted); white-space: nowrap; } .support-inbox-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .support-inbox-row-chevron { color: var(--fb-muted); font-size: 11px; opacity: 0.35; padding-right: 4px; } .support-inbox-answered { margin: 0; padding: 10px 16px 12px 56px; font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--support-open-text); background: rgba(59, 130, 246, 0.05); border-top: 1px dashed rgba(59, 130, 246, 0.14); } .support-inbox-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; text-align: center; } .support-inbox-empty-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--fb-muted); background: var(--bf-surface-muted); opacity: 0.7; } .support-inbox-empty h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--fb-text); } .support-inbox-empty p { margin: 0; max-width: 280px; font-size: 13px; line-height: 1.5; color: var(--fb-muted); } .support-guest-card { border-radius: 18px; } .support-guest-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 28px; text-align: center; } .support-guest-icon { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--bf-brand); background: rgba(var(--bf-brand-rgb), 0.1); } .support-guest-inner h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--fb-text); } .support-guest-inner p { margin: 0; max-width: 320px; font-size: 13px; line-height: 1.5; color: var(--fb-muted); } .support-guest-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; } .support-guest-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 10px; border: 1px solid var(--bf-border); color: var(--fb-text); text-decoration: none; font-weight: 700; font-size: 14px; } .support-guest-link:hover { background: var(--bf-hover); } .support-alert { margin-bottom: 0; } .support-alert.hidden { display: none; } .support-ticket-card-wrap.hidden { display: none; } .support-ticket-card-wrap { display: flex; flex-direction: column; gap: 0; } .support-portal-form { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .support-portal-field { display: flex; flex-direction: column; gap: 5px; } .support-portal-field > span { font-size: 11px; font-weight: 700; color: var(--fb-muted); } .support-portal-char { font-size: 10px; color: var(--fb-muted); text-align: right; } .support-portal-field .theme-input { width: 100%; box-sizing: border-box; padding: 10px 12px; min-height: 42px; } .support-portal-field textarea.theme-input { min-height: 100px; resize: vertical; line-height: 1.45; } .support-portal-field select.theme-input { cursor: pointer; } .support-portal-form-actions { display: flex; justify-content: flex-end; } .support-ticket-item { position: relative; } .support-ticket-chevron { color: var(--fb-muted); font-size: 11px; opacity: 0.45; } .support-ticket-answered-hint { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 14px; font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--support-open-text); background: rgba(59, 130, 246, 0.05); } .support-ticket-answered-hint i { font-size: 10px; opacity: 0.85; } .support-ticket-answered-hint.hidden { display: none; } .support-thread-answered-banner { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 12px; font-weight: 600; color: var(--support-open-text); background: rgba(59, 130, 246, 0.06); border-bottom: 1px solid rgba(59, 130, 246, 0.12); } .support-thread-answered-banner i { font-size: 11px; } .support-portal-main-badges { display: flex; flex-wrap: wrap; gap: 6px; } /* Destek yazışma akışı (portal + panel) */ .support-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; } .support-thread-messages { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 18px 16px; min-height: 0; overflow-y: auto; background: var(--bf-surface); scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(var(--bf-brand-rgb), 0.25) transparent; } .support-thread-messages::-webkit-scrollbar { width: 6px; } .support-thread-messages::-webkit-scrollbar-thumb { background: rgba(var(--bf-brand-rgb), 0.22); border-radius: 999px; } .support-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--fb-muted); } .support-thread-empty i { font-size: 1.5rem; opacity: 0.4; } .support-thread-empty p { margin: 0; font-size: 13px; } .support-thread-row { display: flex; align-items: flex-end; gap: 8px; max-width: min(78%, 420px); margin-top: 6px; } .support-thread-row:first-child { margin-top: 0; } .support-thread-row-user + .support-thread-row-user, .support-thread-row-staff + .support-thread-row-staff { margin-top: 2px; } .support-thread-row-user + .support-thread-row-staff, .support-thread-row-staff + .support-thread-row-user { margin-top: 10px; } .support-thread-row-user { align-self: flex-end; flex-direction: row-reverse; } .support-thread-row-staff { align-self: flex-start; } .support-thread-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; } .support-thread-row-user .support-thread-avatar { background: rgba(var(--bf-brand-rgb), 0.12); color: var(--bf-brand); } .support-thread-row-staff .support-thread-avatar { background: rgba(34, 197, 94, 0.12); color: #16a34a; } html.dark .support-thread-row-staff .support-thread-avatar { color: #4ade80; } html.dark .support-ticket-answered-hint, html.dark .support-inbox-answered, html.dark .support-thread-answered-banner { background: rgba(59, 130, 246, 0.1); color: #93c5fd; } html.dark .support-hero { border-color: rgba(var(--bf-brand-rgb), 0.22); background: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(var(--bf-brand-rgb), 0.22), transparent 55%), radial-gradient(ellipse 60% 80% at 0% 100%, rgba(59, 130, 246, 0.14), transparent 50%), linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.12) 0%, var(--bf-surface) 58%); } html.dark .support-filter-card { background: var(--bf-surface); border-color: rgba(255, 255, 255, 0.08); } html.dark .support-filter-card.is-active { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } html.dark .support-badge-status-open { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } html.dark .support-badge-status-in_progress { background: rgba(245, 158, 11, 0.16); color: #fcd34d; } html.dark .support-badge-status-closed { background: rgba(34, 197, 94, 0.16); color: #86efac; } html.dark .support-thread-closed-note { background: rgba(34, 197, 94, 0.1); color: #86efac; } .support-thread-bubble-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .support-thread-row-user .support-thread-bubble-wrap { align-items: flex-end; } .support-thread-bubble { padding: 9px 12px; border-radius: var(--bf-msg-radius); font-size: 14px; line-height: 1.55; word-break: break-word; color: var(--fb-text); } .support-thread-row-user .support-thread-bubble { background: var(--bf-msg-sent-bg); border: 1px solid var(--bf-msg-sent-border); border-bottom-right-radius: var(--bf-msg-tail); } .support-thread-row-staff .support-thread-bubble { background: var(--bf-msg-recv-bg); border: 1px solid var(--bf-msg-recv-border); border-bottom-left-radius: var(--bf-msg-tail); } .support-thread-row-user + .support-thread-row-user .support-thread-bubble { border-top-right-radius: var(--bf-msg-tail); } .support-thread-row-staff + .support-thread-row-staff .support-thread-bubble { border-top-left-radius: var(--bf-msg-tail); } .support-thread-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 10px; color: var(--fb-muted); padding: 0 2px; } .support-thread-meta strong { font-weight: 700; color: var(--fb-muted); } .support-thread-compose { padding: 14px 16px; border-top: 1px solid var(--bf-border); background: var(--fb-card); flex-shrink: 0; } .support-thread-compose-panel { padding: 14px 20px; } .support-thread-compose-label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fb-muted); } .support-thread-compose-inner { display: flex; align-items: flex-end; gap: 8px; } .support-thread-compose-input { flex: 1; min-height: 42px; max-height: 120px; resize: none; border-radius: 12px; padding: 10px 12px; line-height: 1.45; } .support-thread-compose-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--bf-brand-gradient); color: #fff; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s ease, transform 0.15s ease; } .support-thread-compose-btn:hover { opacity: 0.92; } .support-thread-compose-btn:active { transform: scale(0.97); } .support-thread-compose-btn-panel { width: auto; min-width: 42px; padding: 0 14px; font-size: 12px; font-weight: 700; } .support-thread-closed-note { padding: 14px 20px; border-top: 1px solid rgba(34, 197, 94, 0.18); background: var(--support-closed-soft); font-size: 13px; color: var(--support-closed-text); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .support-thread-closed-note i { color: var(--support-closed); } /* Destek modalları */ .support-modal { position: fixed; inset: 0; z-index: 12500; display: flex; align-items: center; justify-content: center; padding: 20px; } .support-modal.hidden { display: none; } .support-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 22, 0.58); backdrop-filter: blur(6px); } .support-modal-panel { position: relative; display: flex; flex-direction: column; width: min(480px, 100%); max-height: min(86vh, 680px); background: var(--bf-card); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22); overflow: hidden; animation: support-modal-in 0.26s cubic-bezier(0.22, 1, 0.36, 1); } .support-modal-panel-thread { width: min(560px, 100%); max-height: min(90vh, 720px); } @keyframes support-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } .support-modal-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 52px; border-bottom: 1px solid var(--bf-border); background: var(--bf-card); flex-shrink: 0; } .support-modal-head h2 { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--fb-text); } .support-modal-head-thread { justify-content: flex-start; padding: 10px 14px; gap: 8px; } .support-modal-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--fb-text); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; } .support-modal-back:hover { background: var(--bf-hover); } .support-modal-close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 999px; background: var(--bf-surface-muted); color: var(--fb-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .support-modal-head-thread .support-modal-close { position: static; transform: none; margin-left: auto; flex-shrink: 0; } .support-modal-close:hover { background: var(--bf-hover); color: var(--fb-text); } .support-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; } .support-modal-body .support-portal-form { padding: 0; } .support-modal-alert { margin-bottom: 12px; } .support-modal-alert.hidden { display: none; } .support-modal-thread-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; } .support-modal-thread-wrap .support-modal-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 240px; color: var(--fb-muted); font-size: 14px; } .support-modal-thread-meta { padding: 16px 18px 14px; border-bottom: 1px solid var(--bf-border); flex-shrink: 0; background: var(--bf-surface); } .support-modal-thread-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .support-modal-thread-meta h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--fb-text); } .support-modal-thread-meta .support-ticket-no { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--fb-muted); } .support-modal-thread-wrap .support-thread { flex: 1; min-height: 0; } .support-modal-thread-wrap .support-thread-messages { max-height: none; flex: 1; min-height: 200px; } body.support-modal-open { overflow: hidden; } @media (max-width: 640px) { .support-modal { padding: 0; align-items: flex-end; } .support-modal-panel { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; animation: support-modal-sheet-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes support-modal-sheet-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } .support-hero-content { padding: 18px 16px; } .support-hero-actions { width: 100%; } .support-hero-cta, .support-hero-lookup { width: 100%; justify-content: center; } .support-filter-menu { margin-inline: 10px; } .support-filter-menu-portal, .support-filter-substats { grid-template-columns: 1fr; } .support-filter-card-hint { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .support-inbox-row { grid-template-columns: 4px 36px minmax(0, 1fr) auto; gap: 10px; padding-right: 12px; } .support-inbox-row-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; } .support-inbox-answered { padding-left: 50px; } } .support-ticket-no { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--bf-brand); } .support-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.01em; } .support-badge-soft { padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; text-transform: none; border: 1px solid transparent; } .support-badge-soft.support-badge-status-open { background: transparent; border-color: rgba(59, 130, 246, 0.22); color: var(--support-open-text); } .support-badge-soft.support-badge-status-in_progress { background: transparent; border-color: rgba(245, 158, 11, 0.28); color: var(--support-progress-text); } .support-badge-soft.support-badge-status-closed { background: transparent; border-color: rgba(34, 197, 94, 0.28); color: var(--support-closed-text); } .support-badge-soft.support-badge-cat-request, .support-badge-soft.support-badge-cat-suggestion, .support-badge-soft.support-badge-cat-other { background: transparent; border-color: var(--bf-border); color: var(--fb-muted); } .support-badge-cat-request { background: #eef2ff; color: #4338ca; } .support-badge-cat-suggestion { background: #fffbeb; color: #b45309; } .support-badge-cat-other { background: #f1f5f9; color: #475569; } .support-badge-status-open { background: var(--support-open-soft); color: var(--support-open-text); } .support-badge-status-in_progress { background: var(--support-progress-soft); color: var(--support-progress-text); } .support-badge-status-closed { background: var(--support-closed-soft); color: var(--support-closed-text); } .user-row-badge-online { background: #ecfdf5; color: #059669; } html.dark .user-row-badge-online { background: #132a22; color: #34d399; } /* Gönderi oluştur */ .compose-card { padding: 10px 12px; } .compose-top { display: flex; align-items: center; gap: 14px; padding-bottom: 2px; cursor: text; } .compose-avatar { box-shadow: 0 0 0 2px var(--bf-card), 0 0 0 3px var(--bf-border); } .compose-trigger { flex: 1; display: flex; flex-direction: column; gap: 2px; background: var(--fb-input); border: 1px solid transparent; border-radius: 6px; padding: 10px 12px; cursor: text; transition: background var(--bf-transition), border-color var(--bf-transition), box-shadow var(--bf-transition); } .compose-trigger:hover { background: var(--bf-card); border-color: var(--bf-border); box-shadow: var(--bf-shadow-sm); } .compose-trigger-text { font-size: 14px; font-weight: 600; color: var(--fb-text); } .compose-trigger-hint { font-size: 12px; color: var(--fb-muted); } .compose-form-area { padding-top: 4px; } .compose-editor { display: flex; align-items: flex-start; gap: 12px; } .compose-input-wrap { position: relative; flex: 1; min-width: 0; } .compose-input-wrap .mention-wrap { width: 100%; } .compose-input { flex: 1; width: 100%; background: var(--fb-input); border: 1px solid transparent; border-radius: 6px; padding: var(--bf-pad-lg) var(--bf-pad-xl); color: var(--fb-text); font-size: 15px; resize: none; min-height: 72px; font-family: inherit; line-height: 1.55; transition: border-color var(--bf-transition), box-shadow var(--bf-transition), background var(--bf-transition); } .compose-input:focus { outline: none; background: var(--bf-card); border-color: rgba(var(--bf-brand-rgb), 0.3); box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.1); } .compose-input::placeholder { color: var(--fb-muted); } .compose-preview { margin: 12px 0 0 52px; border-radius: var(--bf-radius-lg); overflow: hidden; border: 1px solid var(--bf-border); box-shadow: var(--bf-shadow-sm); } .compose-preview img { width: 100%; display: block; max-height: 280px; object-fit: cover; } .compose-video-preview { position: relative; } .compose-video-preview video { width: 100%; display: block; max-height: 320px; background: #000; } .compose-video-clear { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .compose-video-clear:hover { background: rgba(0, 0, 0, 0.85); } .compose-video-btn:hover { color: var(--fb-primary); } .compose-link-preview { position: relative; margin: 10px 0 0 52px; } .compose-link-preview-remove { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border: none; border-radius: var(--bf-radius-full); background: rgba(15, 23, 42, 0.72); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: background var(--bf-transition); } .compose-link-preview-remove:hover, .compose-link-preview-remove:focus-visible { background: rgba(15, 23, 42, 0.9); outline: none; } .compose-link-preview.is-loading .link-preview-card { opacity: 0.72; pointer-events: none; } .link-preview-card { display: block; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm); overflow: hidden; background: var(--bf-surface-muted); text-decoration: none; color: inherit; transition: border-color var(--bf-transition), box-shadow var(--bf-transition); } .link-preview-card:hover, .link-preview-card:focus-visible { border-color: rgba(var(--bf-brand-rgb), 0.22); box-shadow: var(--bf-shadow-sm); outline: none; } .link-preview-card-bleed { margin: 0 12px 8px; } .fb-post .link-preview-card-bleed { margin-top: 4px; } .link-preview-image { display: block; background: #e2e8f0; border-bottom: 1px solid var(--bf-border); } .link-preview-image img { display: block; width: 100%; max-height: 260px; object-fit: cover; } .link-preview-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bf-hover); } .link-preview-site { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--fb-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-preview-title { font-size: 14px; font-weight: 700; color: var(--fb-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-preview-desc { font-size: 12px; color: var(--fb-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.dark .link-preview-image { background: #1c1f2b; } html.dark .link-preview-body { background: var(--bf-surface-muted); } .compose-toolbar { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--bf-border); } .compose-icons { display: flex; gap: 8px; color: var(--fb-muted); } .compose-media-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--bf-radius-full); cursor: pointer; font-size: 1rem; color: var(--bf-brand); background: var(--bf-brand-light); border: 1px solid rgba(var(--bf-brand-rgb), 0.12); transition: background var(--bf-transition), transform var(--bf-transition-spring), box-shadow var(--bf-transition); } .compose-media-btn:hover { background: var(--bf-brand-soft); transform: scale(1.06); box-shadow: var(--bf-shadow-sm); } .compose-poll-panel { margin: 12px 0 0 52px; padding: 12px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); background: var(--fb-input); } .compose-poll-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--fb-text); } .compose-poll-head i { color: var(--bf-brand); margin-right: 6px; } .compose-poll-clear { background: var(--bf-hover); border: none; color: var(--fb-muted); width: 30px; height: 30px; border-radius: var(--bf-radius-full); cursor: pointer; } .compose-poll-options { display: flex; flex-direction: column; gap: 8px; } .compose-poll-input { width: 100%; min-height: 38px; font-size: 14px; } .compose-poll-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .compose-poll-add-btn { border: none; background: rgba(var(--bf-brand-rgb), 0.08); color: var(--bf-brand); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: var(--bf-radius-full); cursor: pointer; } .compose-poll-add-btn:disabled { opacity: 0.45; cursor: default; } .compose-poll-hint { font-size: 11px; color: var(--fb-muted); font-weight: 600; } .compose-poll-btn.active, .compose-poll-btn:hover, .compose-youtube-btn.active, .compose-youtube-btn:hover { color: #ff0000; background: #fff0f0; border-color: rgba(255, 0, 0, 0.15); } html.dark .compose-youtube-btn.active, html.dark .compose-youtube-btn:hover { background: #2a1a1a; } .compose-youtube-panel { margin: 12px 0 0 52px; } .compose-youtube-input-wrap { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--fb-input); border: 1px solid var(--bf-border); border-radius: 6px; } .compose-youtube-icon { color: #ff0000; font-size: 1.1rem; flex-shrink: 0; } .compose-youtube-input { flex: 1; border: none; background: transparent; color: var(--fb-text); font-size: 14px; font-family: inherit; outline: none; min-width: 0; } .compose-youtube-input::placeholder { color: var(--fb-muted); } .compose-youtube-clear { background: var(--bf-hover); border: none; color: var(--fb-muted); width: 30px; height: 30px; border-radius: var(--bf-radius-full); cursor: pointer; flex-shrink: 0; transition: background var(--bf-transition), color var(--bf-transition); } .compose-youtube-clear:hover { background: #fff0f0; color: #cc0000; } .compose-youtube-panel .fb-post-video { margin-top: 12px; border-radius: var(--bf-radius-lg); overflow: hidden; border: 1px solid var(--bf-border); } .fb-post-video { --fb-post-video-max-h: 420px; --fb-post-video-shorts-w: 280px; --fb-post-video-shorts-max-h: 500px; position: relative; width: 100%; background: #000; overflow: hidden; } .fb-post-video-bleed { margin: 0 0 4px; } .fb-post-video iframe, .fb-post-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .fb-post-video-upload video { object-fit: contain; background: #000; } .fb-post-video:not(.fb-post-video-shorts) { aspect-ratio: 16 / 9; width: min(100%, calc(var(--fb-post-video-max-h) * 16 / 9)); max-width: 100%; max-height: var(--fb-post-video-max-h); margin-inline: auto; } .fb-post-video-bleed:not(.fb-post-video-shorts) { width: 100%; max-width: 100%; margin-inline: 0; } .fb-post-video.fb-post-video-shorts { aspect-ratio: 9 / 16; width: min(var(--fb-post-video-shorts-w), 100%); max-height: min(var(--fb-post-video-shorts-max-h), 72vh); margin-inline: auto; } .fb-post-video-bleed.fb-post-video-shorts { margin-inline: auto; } @media (max-width: 640px) { .fb-post-video { --fb-post-video-max-h: 360px; --fb-post-video-shorts-w: min(240px, 78vw); --fb-post-video-shorts-max-h: min(440px, 68vh); } } /* Gönderi kartı */ @keyframes feed-post-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .feed-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--bf-pad-sm); padding: 8px 10px; margin-bottom: var(--bf-gap-sm); } .feed-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-full); background: var(--fb-input); color: var(--fb-muted); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background var(--bf-transition), color var(--bf-transition), border-color var(--bf-transition), box-shadow var(--bf-transition), transform var(--bf-transition-spring); } .feed-tab i { font-size: 0.92rem; } .feed-tab:hover { background: var(--fb-hover); color: var(--fb-text); } .feed-tab.active { background: var(--bf-brand-soft); border-color: var(--bf-brand); color: var(--bf-brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bf-brand) 18%, transparent); } .feed-tab.active i { color: var(--bf-brand); } /* Mobil: aktif sekmede yazı, diğerlerinde yalnızca ikon */ @media (max-width: 640px) { .feed-tabs { display: flex; align-items: stretch; gap: 4px; padding: 4px; margin-bottom: 10px; } .feed-tab { flex: 0 0 auto; gap: 6px; min-height: 34px; min-width: 36px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: 10px; } .feed-tab:not(.active) { width: 36px; min-width: 36px; max-width: 36px; padding: 0; gap: 0; } .feed-tab:not(.active) .feed-tab-label { display: none; } .feed-tab.active { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; padding: 0 10px; box-shadow: none; } .feed-tab.active .feed-tab-label { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .feed-tab i { flex-shrink: 0; font-size: 0.85rem; } } .feed-list-blogs .blog-feed-card + .blog-feed-card { margin-top: var(--bf-gap-sm); } .blog-feed-card { overflow: hidden; } .blog-feed-header { padding: 12px 12px 0; } /* Profil gönderisi gibi: solda foto, sağda isim + rozet */ .blog-feed-header-inner { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; } .blog-feed-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .blog-feed-avatar-link, .blog-feed-avatar-wrap { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0; width: 36px; height: 36px; min-width: 36px; min-height: 36px; overflow: hidden; border-radius: var(--bf-radius-sm); background: var(--fb-card); border: 1px solid var(--fb-border); box-sizing: border-box; } .blog-feed-avatar-link { text-decoration: none; } .blog-feed-avatar, .blog-feed-avatar-img, .blog-feed-avatar-link > .blog-favicon-img, .blog-feed-avatar-link > .blog-avatar-img, .blog-feed-avatar-link > .blog-favicon-fallback, .blog-feed-avatar-wrap > .blog-favicon-img, .blog-feed-avatar-wrap > .blog-avatar-img, .blog-feed-avatar-wrap > .blog-favicon-fallback { display: block !important; width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; border-radius: var(--bf-radius-sm); object-fit: cover; box-sizing: border-box; } .blog-feed-blog-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1; padding-top: 1px; } /* Blog adının altında: Blog Yayını rozeti */ .blog-feed-submeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--fb-muted); padding-left: 0; } .blog-feed-submeta .blog-feed-owner::after { content: '·'; margin-left: 6px; color: var(--fb-muted); } .blog-feed-submeta .blog-feed-time::before { content: none; } .blog-feed-source { color: var(--fb-muted); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.blog-feed-source:hover { color: var(--bf-brand); text-decoration: underline; } .blog-feed-blog-title, .blog-feed-blog-title-plain { font-size: 0.84rem; font-weight: 700; color: var(--fb-text); text-decoration: none; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .blog-feed-blog-title:hover { color: var(--bf-brand); } .blog-feed-owner { color: var(--fb-muted); } .blog-feed-body { padding: 2px 10px 0; } .blog-feed-badge { position: relative; display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 1px 6px 1px 2px; flex-shrink: 0; border-radius: 999px; background: linear-gradient( 135deg, color-mix(in srgb, #ff5722 8%, var(--fb-card)), color-mix(in srgb, #ff8a65 6%, var(--fb-input)) ); border: 1px solid color-mix(in srgb, #ff5722 22%, var(--fb-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 1px 4px color-mix(in srgb, #ff5722 10%, transparent); overflow: hidden; animation: blog-feed-badge-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .blog-feed-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 38%, color-mix(in srgb, #fff 28%, transparent) 50%, transparent 62% ); transform: translateX(-120%); animation: blog-feed-badge-shine 3.8s ease-in-out infinite; pointer-events: none; } .blog-feed-badge:hover { transform: translateY(-1px); border-color: color-mix(in srgb, #ff5722 38%, var(--fb-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 3px 10px color-mix(in srgb, #ff5722 16%, transparent); } .blog-feed-badge-icon { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #ff9a6b, #e64a19); color: #fff; font-size: 0.42rem; flex-shrink: 0; animation: blog-feed-badge-icon-pulse 2.2s ease-in-out infinite; } .blog-feed-badge-text { position: relative; z-index: 1; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: #d84315; line-height: 1; } /* Profil yayını rozeti (blog yayını ile aynı dil, mor ton) */ .profil-badge { position: relative; display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 1px 6px 1px 2px; vertical-align: middle; flex-shrink: 0; border-radius: 999px; background: linear-gradient( 135deg, color-mix(in srgb, #5f5fef 10%, var(--fb-card)), color-mix(in srgb, #7c7cff 7%, var(--fb-input)) ); border: 1px solid color-mix(in srgb, #5f5fef 24%, var(--fb-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 1px 4px color-mix(in srgb, #5f5fef 10%, transparent); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .profil-badge:hover { border-color: color-mix(in srgb, #5f5fef 40%, var(--fb-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 3px 10px color-mix(in srgb, #5f5fef 16%, transparent); } .profil-badge-icon { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #8b8bf5, #4f4fe0); color: #fff; font-size: 0.42rem; flex-shrink: 0; animation: profil-badge-icon-pulse 2.2s ease-in-out infinite; } .profil-badge-text { position: relative; z-index: 1; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: #4545d4; line-height: 1; } @keyframes blog-feed-badge-in { from { opacity: 0; transform: translateY(5px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes blog-feed-badge-shine { 0%, 72%, 100% { transform: translateX(-120%); } 38% { transform: translateX(120%); } } @keyframes blog-feed-badge-icon-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #ff5722 0%, transparent); } 50% { transform: scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, #ff5722 18%, transparent); } } @keyframes profil-badge-icon-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #5f5fef 0%, transparent); } 50% { transform: scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, #5f5fef 22%, transparent); } } @media (prefers-reduced-motion: reduce) { .blog-feed-badge, .blog-feed-badge::after, .blog-feed-badge-icon, .profil-badge-icon { animation: none; } .blog-feed-badge:hover { transform: none; } } html.dark .blog-feed-badge { background: linear-gradient( 135deg, color-mix(in srgb, #ff5722 12%, var(--fb-card)), color-mix(in srgb, #ff5722 7%, var(--fb-input)) ); border-color: color-mix(in srgb, #ff5722 28%, var(--fb-border)); box-shadow: 0 1px 5px color-mix(in srgb, #ff5722 12%, transparent); } html.dark .blog-feed-badge::after { background: linear-gradient( 105deg, transparent 38%, color-mix(in srgb, #fff 10%, transparent) 50%, transparent 62% ); } html.dark .blog-feed-badge-text { color: #ffab91; } html.dark .profil-badge { background: linear-gradient( 135deg, color-mix(in srgb, #5f5fef 14%, var(--fb-card)), color-mix(in srgb, #5f5fef 8%, var(--fb-input)) ); border-color: color-mix(in srgb, #5f5fef 30%, var(--fb-border)); box-shadow: 0 1px 5px color-mix(in srgb, #5f5fef 12%, transparent); } html.dark .profil-badge-text { color: #a5a5ff; } .blog-feed-post-title-plain { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--fb-text); } .blog-feed-post-title { display: block; font-size: 0.95rem; font-weight: 700; line-height: 1.45; color: var(--fb-text); text-decoration: none; } .blog-feed-excerpt { margin: 3px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--fb-muted); } .blog-feed-post-title:hover { color: var(--bf-brand); } .blog-feed-post-time { display: block; font-size: 0.8rem; color: var(--fb-muted); } .blog-feed-post-time a { color: inherit; font-weight: inherit; text-decoration: none; } .blog-feed-post-time a:hover { color: inherit; text-decoration: none; } .blog-feed-time { font-size: inherit; color: inherit; } .blog-feed-empty-post { margin: 0; color: var(--fb-muted); font-size: 0.9rem; } .blog-feed-actions { margin-top: 0; } .blog-feed-card .fb-post-comments { border-top: 1px solid var(--fb-border); } .blog-profile-hub { position: relative; overflow: hidden; padding: 0; } .blog-profile-hub-accent { height: 4px; background: linear-gradient(90deg, var(--bf-brand), color-mix(in srgb, var(--bf-brand) 45%, #7c3aed)); } .blog-profile-hub-inner { padding: 22px 22px 20px; } .blog-profile-hub-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .blog-profile-hub-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--bf-brand-soft), color-mix(in srgb, var(--bf-brand) 12%, var(--fb-card))); color: var(--bf-brand); font-size: 1.15rem; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--bf-brand) 16%, var(--fb-border)); } .blog-profile-hub-head h2 { margin: 0 0 4px; font-size: 1.28rem; letter-spacing: -0.02em; } .blog-profile-hub-head p { margin: 0; color: var(--fb-muted); font-size: 0.9rem; line-height: 1.45; } .blog-profile-hub-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; padding: 12px; border-radius: var(--bf-radius-lg); border: 1px solid var(--fb-border); background: color-mix(in srgb, var(--fb-input) 90%, var(--fb-card)); } .blog-profile-hub-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--fb-border); background: var(--fb-input); font-size: 0.84rem; color: var(--fb-muted); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } .blog-profile-hub-chip strong { color: var(--fb-text); } .blog-profile-hub-chip.is-link { color: var(--bf-brand); font-weight: 600; } .blog-profile-hub-chip.is-link:hover { border-color: color-mix(in srgb, var(--bf-brand) 35%, var(--fb-border)); background: color-mix(in srgb, var(--bf-brand-soft) 60%, var(--fb-input)); } .blog-profile-hub-section { margin-bottom: 14px; padding: 16px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-xl); background: color-mix(in srgb, var(--fb-input) 88%, var(--fb-card)); } .blog-profile-hub-section-label { margin-bottom: 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fb-muted); } .blog-profile-icon-panel { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--bf-radius-lg); background: var(--fb-card); border: 1px solid var(--fb-border); } .blog-profile-icon-wrap { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--bf-radius-sm); overflow: hidden; background: var(--bf-brand-soft); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fb-border); } .blog-profile-icon-wrap > .blog-profile-icon-img, .blog-profile-icon-wrap > .blog-favicon-img, .blog-profile-icon-wrap > .blog-favicon-fallback, .blog-profile-icon-wrap > .blog-avatar-img { width: 40px; height: 40px; } .blog-profile-icon-wrap .blog-favicon-img { padding: 3px; } .blog-profile-icon-wrap .blog-avatar-img { object-fit: cover; border-radius: var(--bf-radius-sm); } .blog-profile-icon-wrap .blog-favicon-fallback { font-size: 0.95rem; } .blog-profile-icon-tools { min-width: 0; flex: 1; } .blog-profile-icon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; } .blog-profile-icon-upload { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bf-brand) 28%, var(--fb-border)); background: var(--bf-brand-soft); color: var(--bf-brand); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .blog-profile-icon-upload:hover { border-color: color-mix(in srgb, var(--bf-brand) 45%, var(--fb-border)); background: color-mix(in srgb, var(--bf-brand-soft) 80%, var(--fb-card)); } .blog-profile-icon-reset { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 4px; color: var(--fb-muted); font-size: 0.82rem; cursor: pointer; } .blog-profile-icon-reset:hover { color: var(--fb-text); } .blog-profile-icon-tools .profile-field-hint { margin: 0; font-size: 0.78rem; } .blog-profile-hub-input { border-radius: var(--bf-radius-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .blog-profile-hub-input:focus { border-color: color-mix(in srgb, var(--bf-brand) 45%, var(--fb-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-brand) 14%, transparent); } .blog-profile-hub-feed-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.84rem; } .blog-profile-hub-feed-row { gap: 10px; } .blog-profile-site-chip { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: var(--bf-radius-md); background: var(--fb-card); border: 1px dashed color-mix(in srgb, var(--bf-brand) 25%, var(--fb-border)); font-size: 0.84rem; word-break: break-all; } .blog-profile-site-chip i { color: var(--bf-brand); margin-top: 2px; flex-shrink: 0; } .blog-profile-site-chip a { color: var(--bf-brand); } .blog-profile-hub-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--fb-border); } @media (max-width: 640px) { .blog-profile-hub-inner { padding: 16px; } .blog-profile-icon-panel { flex-direction: column; align-items: flex-start; } .blog-profile-hub-feed-row { grid-template-columns: 1fr; } .blog-profile-hub-footer .btn-fb { flex: 1 1 auto; } } .blog-profile-create-hub { padding: 20px; } .blog-profile-create-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .blog-profile-create-icon { width: 52px; height: 52px; border-radius: var(--bf-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--bf-brand-soft); color: var(--bf-brand); font-size: 1.3rem; flex-shrink: 0; } .blog-profile-create-head h2 { margin: 0 0 6px; } .blog-profile-avatar-field, .blog-profile-favicon-field { margin-bottom: 18px; } .blog-profile-favicon-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .blog-profile-favicon-wrap { width: 64px; height: 64px; border-radius: var(--bf-radius-md); overflow: hidden; background: var(--bf-brand-soft); display: flex; align-items: center; justify-content: center; } .blog-profile-favicon-wrap .blog-favicon-img, .blog-profile-favicon-wrap .blog-favicon-fallback { width: 64px; height: 64px; } .blog-profile-avatar-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 600; color: var(--fb-text); } .blog-profile-avatar-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .blog-profile-avatar-wrap { position: relative; width: 96px; height: 96px; border-radius: var(--bf-radius-md); overflow: hidden; background: var(--bf-brand-soft); } .blog-profile-avatar-img, .blog-profile-avatar-img img, .blog-profile-avatar-img .blog-avatar-fallback, .blog-profile-avatar-wrap > .blog-avatar-img, .blog-profile-avatar-wrap > .blog-favicon-img, .blog-profile-avatar-wrap > .blog-favicon-fallback { width: 96px; height: 96px; border-radius: var(--bf-radius-md); } .blog-avatar-img { object-fit: cover; border-radius: var(--bf-radius-sm); display: block; } .blog-profile-avatar-remove-btn { margin-top: 4px; } .blog-profile-avatar-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.72rem; font-weight: 600; opacity: 0; transition: opacity 0.15s ease; cursor: pointer; } .blog-profile-avatar-wrap:hover .blog-profile-avatar-overlay, .blog-profile-avatar-wrap:focus-within .blog-profile-avatar-overlay { opacity: 1; } .blog-profile-create-head p { margin: 0; color: var(--fb-muted); } .blog-profile-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-md); background: var(--fb-input); } .blog-profile-stat { display: grid; gap: 2px; } .blog-profile-stat strong { font-size: 1.2rem; } .blog-profile-stat span { font-size: 0.82rem; color: var(--fb-muted); } .blog-profile-feed-url-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .blog-profile-preview { margin-bottom: 14px; padding: 12px 14px; border: 1px dashed var(--fb-border); border-radius: var(--bf-radius-md); } .blog-profile-preview-label { display: block; font-size: 0.8rem; color: var(--fb-muted); margin-bottom: 4px; } .blog-profile-preview-link { color: var(--bf-brand); word-break: break-all; } .blog-profile-actions { flex-wrap: wrap; } .blog-profile-required { color: #d72734; } .blog-profile-path-options { display: grid; gap: 8px; } .blog-profile-path-option { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-md); background: var(--fb-card); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .blog-profile-path-option:hover { border-color: color-mix(in srgb, var(--bf-brand) 22%, var(--fb-border)); } .blog-profile-path-option:has(input:checked) { border-color: color-mix(in srgb, var(--bf-brand) 42%, var(--fb-border)); background: color-mix(in srgb, var(--bf-brand-soft) 50%, var(--fb-card)); } .blog-profile-path-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .blog-profile-path-indicator { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fb-border); background: var(--fb-card); flex-shrink: 0; } .blog-profile-path-option:has(input:checked) .blog-profile-path-indicator { border-color: var(--bf-brand); background: var(--bf-brand); box-shadow: inset 0 0 0 2px var(--fb-card); } .blog-profile-path-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.92rem; flex-shrink: 0; } .blog-profile-path-icon--wp { background: color-mix(in srgb, #21759b 12%, var(--fb-input)); color: #21759b; } .blog-profile-path-icon--blogger { background: color-mix(in srgb, #ff5722 12%, var(--fb-input)); color: #ff5722; } .blog-profile-path-icon--custom { background: color-mix(in srgb, var(--bf-brand) 12%, var(--fb-input)); color: var(--bf-brand); } .blog-profile-path-option:has(input:checked) .blog-profile-path-icon--wp { background: color-mix(in srgb, #21759b 20%, var(--fb-card)); } .blog-profile-path-option:has(input:checked) .blog-profile-path-icon--blogger { background: color-mix(in srgb, #ff5722 18%, var(--fb-card)); } .blog-profile-path-option:has(input:checked) .blog-profile-path-icon--custom { background: color-mix(in srgb, var(--bf-brand) 18%, var(--fb-card)); } .blog-profile-path-copy { display: grid; gap: 2px; min-width: 0; } .blog-profile-path-copy strong { font-size: 0.84rem; word-break: break-word; } .blog-profile-path-copy small { color: var(--fb-muted); font-size: 0.74rem; line-height: 1.3; } .blog-profile-final-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; } #blog-profile-feed-modal.blog-profile-feed-modal { z-index: 14000; padding: 16px; } #blog-profile-feed-modal .blog-profile-feed-modal-panel { width: min(440px, 100%); max-height: min(88dvh, 640px); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16); } .blog-profile-feed-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--fb-border); } .blog-profile-feed-modal-head h2 { margin: 0 0 2px; font-size: 1rem; font-weight: 700; } .blog-profile-feed-modal-subtitle { margin: 0; color: var(--fb-muted); font-size: 0.8rem; line-height: 1.35; } .blog-profile-feed-modal-close { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--fb-muted); cursor: pointer; flex-shrink: 0; } .blog-profile-feed-modal-close:hover { background: var(--fb-input); color: var(--fb-text); } .blog-profile-feed-modal-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .blog-profile-feed-modal-alert { margin: 0; } .blog-profile-feed-modal-field { display: block; } .blog-profile-feed-modal-label { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--fb-text); } .blog-profile-feed-modal-input-wrap { display: flex; align-items: stretch; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-md); background: var(--fb-card); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .blog-profile-feed-modal-input-wrap:focus-within { border-color: color-mix(in srgb, var(--bf-brand) 40%, var(--fb-border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-brand) 10%, transparent); } .blog-profile-feed-modal-input-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; flex-shrink: 0; color: var(--fb-muted); font-size: 0.82rem; background: var(--fb-input); border-right: 1px solid var(--fb-border); } #blog-profile-feed-modal .blog-profile-feed-modal-input-wrap .profile-field-input.blog-profile-feed-modal-input { flex: 1; min-width: 0; border: 0; border-radius: 0; padding: 9px 11px; background: transparent; box-shadow: none; } #blog-profile-feed-modal .blog-profile-feed-modal-input-wrap .profile-field-input.blog-profile-feed-modal-input:focus { border: 0; box-shadow: none; outline: none; } .blog-profile-feed-modal-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; } .blog-profile-feed-modal-result { padding: 10px 11px; border-radius: var(--bf-radius-md); border: 1px solid var(--fb-border); background: var(--fb-input); } .blog-profile-feed-modal-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 0.76rem; font-weight: 600; color: var(--fb-muted); } .blog-profile-feed-modal-copy { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--fb-card); color: var(--fb-muted); font-size: 0.78rem; cursor: pointer; } .blog-profile-feed-modal-copy:hover { color: var(--bf-brand); } #blog-profile-feed-modal .blog-profile-feed-modal-result-input.profile-field-input { width: 100%; border: 1px solid var(--fb-border); background: var(--fb-card); color: var(--fb-text); border-radius: var(--bf-radius-sm); padding: 8px 10px; font-size: 0.78rem; } .blog-profile-feed-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--fb-border); } .blog-profile-feed-modal-cancel { border: 0; background: none; padding: 7px 10px; color: var(--fb-muted); font-size: 0.86rem; cursor: pointer; } .blog-profile-feed-modal-cancel:hover { color: var(--fb-text); } .blog-profile-page-card { overflow: hidden; border: 1px solid var(--fb-border); box-shadow: var(--bf-shadow-sm); } .blog-profile-page-cover { height: 56px; background: radial-gradient(circle at 88% 18%, rgba(var(--bf-brand-rgb), 0.18) 0%, transparent 42%), linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.14) 0%, rgba(var(--bf-brand-rgb), 0.04) 58%, transparent 100%); } html.dark .blog-profile-page-cover { background: radial-gradient(circle at 88% 18%, rgba(var(--bf-brand-rgb), 0.24) 0%, transparent 42%), linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.18) 0%, rgba(var(--bf-brand-rgb), 0.06) 58%, transparent 100%); } .blog-profile-page-body { padding: 0 16px 16px; } .blog-profile-page-top { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: -20px; } /* Solda foto, sağda isim + rozet alt alta */ .blog-profile-page-title-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .blog-profile-page-summary { flex: 1; min-width: 0; padding-top: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; } /* Blog adının altında: Blog Yayını + site */ .blog-profile-page-submeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .blog-profile-page-site { display: inline-flex; align-items: center; gap: 5px; color: var(--fb-muted); font-size: 0.82rem; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .blog-profile-page-site:hover { color: var(--bf-brand); } .blog-profile-page-kicker { display: none; } .blog-profile-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fb-border); } .blog-profile-page-icon, .blog-profile-page-avatar { width: 40px; height: 40px; border-radius: var(--bf-radius-md); border: 2px solid var(--fb-card); background: var(--bf-brand-soft); color: var(--bf-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; overflow: hidden; flex-shrink: 0; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08); } .blog-profile-page-avatar { border-radius: var(--bf-radius-sm); } .blog-profile-page-avatar.blog-profile-page-favicon { border-radius: var(--bf-radius-sm); background: var(--fb-card); } .blog-profile-page-avatar-img, .blog-profile-page-avatar-img img, .blog-profile-page-avatar-img .blog-avatar-fallback, .blog-profile-page-avatar-img .blog-favicon-fallback, .blog-profile-page-avatar > .blog-avatar-img, .blog-profile-page-avatar > .blog-favicon-img, .blog-profile-page-avatar > .blog-favicon-fallback { width: 36px; height: 36px; } .blog-profile-page-avatar:not(.blog-profile-page-favicon) > .blog-avatar-img { border-radius: var(--bf-radius-sm); object-fit: cover; } .blog-favicon-img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--bf-radius-sm); background: #fff; padding: 4px; } .blog-favicon-fallback { width: 100%; height: 100%; border-radius: var(--bf-radius-sm); background: var(--bf-brand-soft); color: var(--bf-brand); font-size: 1.35rem; } .blog-feed-avatar.blog-avatar-img, .blog-feed-favicon.blog-avatar-img { object-fit: cover !important; border-radius: var(--bf-radius-sm); padding: 0 !important; background: transparent !important; } .blog-feed-avatar.blog-favicon-img, .blog-feed-favicon.blog-favicon-img { object-fit: contain !important; border-radius: var(--bf-radius-sm); background: #fff !important; padding: 3px !important; } .blog-feed-favicon.blog-favicon-fallback, .blog-feed-avatar-link > .blog-favicon-fallback, .blog-feed-avatar-wrap > .blog-favicon-fallback { display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--bf-radius-sm); background: var(--bf-brand-soft); color: var(--bf-brand); font-size: 0.85rem; } .blog-profile-page-title { margin: 0; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.25; letter-spacing: -0.02em; word-break: break-word; } .blog-profile-page-owner { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--fb-muted); font-size: 0.88rem; } .blog-profile-page-owner span { color: var(--fb-muted); } .blog-profile-page-owner a { color: var(--fb-text); font-weight: 700; text-decoration: none; } .blog-profile-page-owner a:hover { color: var(--bf-brand); } .blog-profile-page-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .blog-profile-page-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--fb-border); background: var(--fb-input); font-size: 0.8rem; color: var(--fb-muted); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .blog-profile-page-chip.is-link { color: var(--bf-brand); font-weight: 600; } .blog-profile-page-chip.is-link:hover { border-color: color-mix(in srgb, var(--bf-brand) 30%, var(--fb-border)); background: color-mix(in srgb, var(--bf-brand-soft) 55%, var(--fb-input)); } .blog-profile-posts-head { margin-top: var(--bf-gap-sm); padding: 14px 16px; border: 1px solid var(--fb-border); } .blog-profile-posts-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .blog-profile-page-top { gap: 8px; margin-top: -16px; } .blog-profile-page-title-row { align-items: flex-start; } .blog-profile-page-summary { padding-top: 0; width: auto; flex: 1; min-width: 0; } .blog-profile-page-avatar, .blog-profile-page-icon { align-self: flex-start; } .blog-profile-page-actions { gap: 6px; } .blog-profile-page-actions .profile-card-action-btn { flex: 1 1 calc(50% - 4px); min-width: 0; } } .btn-fb-danger { background: #d72734; border-color: #d72734; color: #fff; } .btn-fb-danger:hover { background: #b81f2b; border-color: #b81f2b; color: #fff; } @media (max-width: 720px) { .blog-profile-feed-url-row { grid-template-columns: 1fr; } #blog-profile-feed-modal.blog-profile-feed-modal { padding: 0; align-items: flex-end; } #blog-profile-feed-modal .blog-profile-feed-modal-panel { width: 100%; max-width: 100%; min-height: auto; max-height: 92dvh; border-radius: 20px 20px 0 0; } .blog-profile-feed-modal-footer .btn-fb { flex: 1; } } .btn-load-more-sm { width: 100%; padding: 8px 14px; font-size: 13px; } .feed-list.is-loading { opacity: 0.72; pointer-events: none; transition: opacity 0.12s ease; } .feed-list > .fb-post.feed-post-new { animation: feed-post-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; } .feed-list { display: flex; flex-direction: column; gap: var(--bf-gap-sm); } /* Sekme geçişlerinde kademeli gecikme yok — anında görünsün */ .feed-list > .fb-post { animation: none; } @keyframes bfCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fb-post { padding: 0; } .fb-post-header { display: flex; align-items: center; gap: var(--bf-gap-sm); padding: 5px 8px 4px 8px; } .post-menu-wrap { margin-left: auto; position: relative; flex-shrink: 0; } .post-menu-btn { background: var(--bf-surface-muted); border: 1px solid transparent; color: var(--fb-muted); width: 34px; height: 34px; border-radius: var(--bf-radius-full); cursor: pointer; font-size: 0.95rem; transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition-spring); } .post-menu-btn:hover, .post-menu-wrap.is-open .post-menu-btn { background: var(--bf-surface-elevated); border-color: var(--bf-border); color: var(--fb-text); } .post-menu-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 148px; background: #fff; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-md); box-shadow: var(--bf-shadow-md); z-index: 40; padding: 4px 0; overflow: hidden; } html.dark .post-menu-dropdown { background: #1c1d28; border-color: var(--fb-border); } .post-menu-dropdown.hidden { display: none; } .post-menu-item { display: flex; align-items: center; gap: var(--bf-pad-md); width: 100%; padding: var(--bf-pad-md) var(--bf-pad-xl); border: none; background: none; font-size: 0.9rem; font-weight: 600; color: var(--fb-text); cursor: pointer; text-align: left; transition: background var(--bf-transition); } .post-menu-item i { width: 16px; text-align: center; font-size: 0.85rem; color: var(--fb-muted); } .post-menu-item:hover { background: var(--fb-hover); } .post-menu-item-danger, .post-menu-item-danger i { color: var(--bf-danger); } .post-menu-item-danger:hover { background: #fdf2f2; } html.dark .post-menu-item-danger:hover { background: #2e2222; } .fb-post-body.post-edit-form { padding: var(--bf-pad-xl); margin: 0 var(--bf-pad-xl) var(--bf-pad-xl); background: var(--fb-input); border: 1px solid var(--fb-border); border-radius: var(--bf-radius-md); box-shadow: var(--bf-shadow-sm); } .post-edit-input { width: 100%; min-height: 72px; max-height: 200px; padding: 12px 14px; border: 1px solid var(--fb-border); border-radius: 6px; background: #fff; color: var(--fb-text); font: inherit; line-height: 1.45; resize: vertical; box-sizing: border-box; } html.dark .post-edit-input { background: #252736; } .post-edit-input:focus { outline: none; border-color: var(--fb-blue); background: #fff; box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.12); } html.dark .post-edit-input:focus { background: #2a2d3d; } .post-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .post-edit-cancel-btn { background: none; border: none; color: var(--fb-muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 8px 12px; border-radius: var(--bf-radius-md); } .post-edit-cancel-btn:hover { background: var(--bf-surface-muted); color: var(--fb-text); } .load-more-wrap { display: flex; justify-content: center; padding: 8px 0 16px; } .btn-load-more { background: var(--bf-card); border: 1px solid var(--fb-border); color: var(--fb-text); font-weight: 600; font-size: 14px; padding: 12px 28px; border-radius: var(--bf-radius-full); cursor: pointer; transition: background var(--bf-transition), border-color var(--bf-transition), box-shadow var(--bf-transition); font-family: inherit; box-shadow: var(--bf-shadow-sm); } .btn-load-more:hover { background: var(--fb-hover); border-color: rgba(var(--bf-brand-rgb), 0.3); box-shadow: var(--bf-shadow-md); } .btn-load-more:disabled { opacity: 0.6; cursor: not-allowed; } .fb-post-header .avatar-blogger, .fb-post-header img { width: 36px; height: 36px; border-radius: var(--bf-radius-full); flex-shrink: 0; box-shadow: 0 0 0 2px var(--bf-card), 0 0 0 3px var(--bf-border); } .fb-post-author { flex: 1; min-width: 0; } .fb-post-name { font-weight: 700; font-size: 0.84rem; line-height: 1.2; color: var(--fb-text); text-decoration: none; letter-spacing: -0.01em; } .fb-post-name:hover { text-decoration: underline; } .fb-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.75rem; line-height: 1.25; color: var(--fb-muted); } .fb-post-meta a { color: var(--fb-muted); text-decoration: none; } .fb-post-meta a.post-permalink:hover { text-decoration: underline; color: var(--fb-text); } .post-page-nav { margin-bottom: 12px; } .post-page-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fb-muted); text-decoration: none; } .post-page-back:hover { color: var(--fb-text); text-decoration: none; } .post-page-feed { max-width: 100%; } .fb-post-body { padding: 0 12px 8px; } .fb-post-content { font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--fb-text); } .fb-post-image { margin: 2px 12px 8px; } button.fb-post-image { display: block; width: 100%; padding: 0; border: 0; background: color-mix(in srgb, var(--bf-text) 4%, var(--fb-card)); cursor: zoom-in; text-align: center; font: inherit; color: inherit; overflow: hidden; } .fb-post-image-bleed { margin: 0 0 4px; background: color-mix(in srgb, var(--bf-text) 6%, var(--fb-card)); } .fb-post-image img { width: 100%; display: block; margin: 0 auto; max-height: min(380px, 62vh); object-fit: contain; object-position: center center; border-radius: var(--bf-radius-lg); box-shadow: none; transition: opacity var(--bf-transition); } .fb-post-image-bleed img { border-radius: 0; max-height: min(420px, 68vh); box-shadow: none; } .fb-post-image:hover img { opacity: 0.96; } @media (max-width: 640px) { .fb-post-image img { max-height: min(300px, 52vh); } .fb-post-image-bleed img { max-height: min(340px, 58vh); } } .fb-post-poll { margin: 2px 12px 10px; } .fb-post-poll-options { display: flex; flex-direction: column; gap: 8px; } .fb-post-poll-option { position: relative; display: block; width: 100%; overflow: hidden; border: 1px solid rgba(var(--bf-brand-rgb), 0.18); border-radius: 999px; background: var(--bf-card); color: var(--fb-text); text-align: left; padding: 10px 14px; cursor: pointer; transition: border-color var(--bf-transition), background var(--bf-transition), transform var(--bf-transition); } .fb-post-poll-option:hover { border-color: rgba(var(--bf-brand-rgb), 0.35); background: rgba(var(--bf-brand-rgb), 0.04); } .fb-post-poll-option.is-selected { border-color: rgba(var(--bf-brand-rgb), 0.55); } .fb-post-poll-option.is-busy { opacity: 0.7; pointer-events: none; } .fb-post-poll-option-bar { position: absolute; inset: 0 auto 0 0; background: rgba(var(--bf-brand-rgb), 0.14); border-radius: inherit; pointer-events: none; transition: width 0.28s ease; } .fb-post-poll-option.is-selected .fb-post-poll-option-bar { background: rgba(var(--bf-brand-rgb), 0.22); } .fb-post-poll-option-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .fb-post-poll-option-label { font-size: 14px; font-weight: 600; line-height: 1.35; word-break: break-word; } .fb-post-poll-option-stat { flex-shrink: 0; font-size: 12px; color: var(--fb-muted); font-weight: 600; white-space: nowrap; } .fb-post-poll-option-stat strong { color: var(--bf-brand); font-size: 13px; } .fb-post-poll-option-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--bf-brand); font-size: 12px; } .fb-post-poll-option.has-results .fb-post-poll-option-content { padding-right: 18px; } .fb-post-poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--fb-muted); font-weight: 600; } .fb-post-poll-votes { color: var(--fb-muted); } .fb-post-poll-hint { color: var(--fb-muted); font-size: 11px; } .fb-post-stats { display: flex; justify-content: space-between; padding: 2px 12px 6px; font-size: 13px; color: var(--fb-muted); } .post-like-summary { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; font-size: 13px; line-height: 1.35; color: var(--fb-text); cursor: pointer; user-select: none; } .post-like-summary.hidden { display: none; } .post-like-summary:focus-visible { outline: 2px solid rgba(var(--bf-brand-rgb), 0.35); outline-offset: 2px; border-radius: 6px; } .post-like-summary-avatars { display: inline-flex; align-items: center; flex-shrink: 0; } .post-like-summary-avatar { display: inline-flex; margin-left: calc(var(--avatar-index, 0) * -6px); } .post-like-summary-avatar:first-child { margin-left: 0; } .post-like-summary-avatar img, .post-like-summary-avatar .avatar-blogger { border: 2px solid var(--bf-surface, #fff); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04); } .post-like-summary-text { min-width: 0; font-weight: 500; } .post-like-summary-user { color: var(--fb-text); font-weight: 700; text-decoration: none; } .post-like-summary-user:hover { color: var(--bf-brand); text-decoration: underline; } .post-like-summary-count { font-weight: 700; color: var(--fb-text); } .comment-count-toggle { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: right; } .comment-count-toggle:hover { color: var(--bf-brand); text-decoration: underline; } .fb-post-actions { display: flex; gap: 6px; padding: 2px 12px 8px; } .fb-action-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 5px 8px; background: transparent; border: 1px solid transparent; color: var(--fb-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--bf-transition), color var(--bf-transition), border-color var(--bf-transition), transform var(--bf-transition-spring); font-family: inherit; border-radius: var(--bf-radius-full); } .fb-action-btn i { font-size: 1rem; } .fb-action-count { font-size: 13px; font-weight: 700; line-height: 1; margin-left: 3px; } .fb-post-repost-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 14px 0; font-size: 12px; font-weight: 600; color: var(--fb-muted); } .fb-post-repost-banner i { color: var(--fb-repost); font-size: 0.9rem; } .fb-post-repost-banner a { color: var(--fb-text); font-weight: 700; } .fb-post-repost-banner a:hover { color: var(--bf-brand); } .fb-post-repost-time { font-weight: 500; color: var(--fb-muted); } .fb-post.is-profile-repost .fb-post-header { padding-top: 6px; } .fb-action-btn:hover { background: var(--bf-brand-light); border-color: rgba(var(--bf-brand-rgb), 0.12); color: var(--bf-brand); transform: translateY(-1px); } .fb-action-btn.liked { color: var(--fb-like); background: rgba(var(--bf-brand-rgb), 0.1); border-color: rgba(var(--bf-brand-rgb), 0.15); } .fb-action-btn.liked i { color: var(--fb-like); } .fb-action-btn.liked:hover { color: var(--bf-brand-hover); } .fb-action-btn.view-count-btn { cursor: default; pointer-events: none; } .fb-action-btn.view-count-btn:hover { background: transparent; border-color: transparent; color: var(--fb-muted); transform: none; } .fb-action-btn.reposted { color: var(--fb-repost); background: rgba(0, 186, 124, 0.1); border-color: rgba(0, 186, 124, 0.15); } .fb-action-btn.reposted i { color: var(--fb-repost); } .fb-action-btn.reposted:hover { color: #00a06d; background: rgba(0, 186, 124, 0.14); } .fb-post-stats-mid { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .post-view-count-stat, .post-repost-count-stat { display: inline-flex; align-items: center; gap: 4px; } .post-repost-count-stat i { color: var(--fb-repost); } @media (max-width: 640px) { .fb-post-actions { gap: 4px; padding-inline: 8px; } .fb-action-btn { min-height: 34px; padding: 4px 6px; } .fb-action-btn i { font-size: 0.95rem; } .fb-action-count { font-size: 12px; } } .share-toast { position: fixed; left: 50%; bottom: 24px; z-index: 12600; transform: translate(-50%, 12px); padding: 10px 16px; border-radius: 999px; background: rgba(18, 24, 38, 0.92); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .share-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .fb-post-comments { --comments-avatar-col: 32px; padding: 2px 14px 14px; background: linear-gradient(180deg, rgba(var(--bf-brand-rgb), 0.025) 0%, transparent 56px); border-top: 1px solid rgba(var(--bf-brand-rgb), 0.07); overflow: visible; position: relative; } .comments-section-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; } .comments-section-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--bf-comment-name); letter-spacing: 0; text-transform: none; } .comments-section-title::before { content: '\f075'; font-family: 'Font Awesome 5 Pro'; font-weight: 400; font-size: 12px; color: var(--bf-brand); opacity: 0.85; } .comments-thread { display: flex; flex-direction: column; gap: 0; } .comments-load-older-btn { display: block; width: fit-content; margin: 0 auto 8px; padding: 5px 12px; border: none; border-radius: var(--bf-radius-full); background: transparent; color: var(--bf-comment-meta); font-size: 11px; font-weight: 600; cursor: pointer; text-decoration: none; transition: color var(--bf-transition), background var(--bf-transition); } .comments-load-older-btn:hover:not(:disabled) { color: var(--bf-brand); background: rgba(var(--bf-brand-rgb), 0.05); } .comments-load-older-btn:disabled { opacity: 0.45; cursor: default; } .comments-list { display: flex; flex-direction: column; gap: 0; } .comments-list > .fb-comment { padding: 10px 6px 8px; margin: 0; border-bottom: 1px solid var(--bf-comment-line); border-radius: 0; transition: background var(--bf-transition); } .comments-list > .fb-comment:hover { background: rgba(var(--bf-brand-rgb), 0.03); } .comments-list > .fb-comment:last-child { padding-bottom: 8px; border-bottom: none; } .comments-list:empty { display: none; } .comments-list .comments-load-error { margin: 8px 0 0; padding: 10px 12px; text-align: center; font-size: 13px; color: var(--bf-comment-meta); background: var(--bf-comment-bubble); border-radius: var(--bf-radius-lg); } .fb-comment { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } .fb-comment.is-reply { gap: 7px; } .fb-comment-avatar { flex-shrink: 0; margin-top: 2px; text-decoration: none; line-height: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--bf-brand-rgb), 0.08); } .fb-comment-main { flex: 1; min-width: 0; } .fb-comment-body { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; } .fb-comment-author-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0; line-height: 1.3; } .fb-comment-reply-to { display: inline; margin-left: 0; font-size: 13px; font-weight: 600; color: var(--bf-brand); text-decoration: none; } .fb-comment-reply-to:hover { text-decoration: underline; } .fb-comment-reply-arrow { display: inline; margin: 0 5px; color: var(--bf-comment-meta); font-size: 12px; font-weight: 600; } .comments-reply-indicator-text .fb-comment-reply-arrow { margin: 0 4px; } .fb-comment-name { display: inline; font-weight: 700; font-size: 13px; color: var(--bf-comment-name); text-decoration: none; line-height: inherit; } .fb-comment-name:hover { color: var(--bf-brand); } .fb-comment-text { display: block; font-size: 14px; line-height: 1.4; color: var(--bf-comment-text); word-break: break-word; white-space: normal; } .fb-comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; min-height: 0; } .fb-comment-time { font-size: 12px; font-weight: 600; color: var(--bf-comment-meta); white-space: nowrap; text-transform: lowercase; line-height: 1.3; } .fb-comment-replies { display: flex; flex-direction: column; gap: 0; margin-top: 2px; margin-left: 0; padding: 2px 0 0 10px; border-left: 2px solid rgba(var(--bf-brand-rgb), 0.14); } .fb-comment-replies > .fb-comment { padding: 6px 4px; margin: 0; border-radius: 6px; border-bottom: none; } .fb-comment-replies > .fb-comment + .fb-comment { padding-top: 4px; margin-top: 0; border-top: 1px solid rgba(var(--bf-brand-rgb), 0.05); } .fb-comment-replies > .fb-comment:hover { background: rgba(var(--bf-brand-rgb), 0.04); } .comments-list > .fb-comment > .fb-comment-main > .fb-comment-replies { margin-bottom: 2px; } .comment-like-btn, .comment-reply-btn, .comment-delete-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 1px 0; border: none; border-radius: 6px; background: transparent; color: var(--bf-comment-meta); font-size: 13px; font-weight: 600; font-family: inherit; font-style: normal; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; transition: color var(--bf-transition), background var(--bf-transition); } .comment-like-btn i, .comment-reply-btn i, .comment-delete-btn i { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; line-height: 1; } .comment-reply-btn i { transform: scaleX(-1); } .comment-action-label, .comment-like-count { display: inline-block; font-size: inherit; font-weight: inherit; line-height: 1.3; font-style: normal; } .comment-like-btn:hover, .comment-reply-btn:hover { color: var(--bf-brand); background: rgba(var(--bf-brand-rgb), 0.06); } .comment-delete-btn:hover { color: var(--bf-danger); background: rgba(220, 38, 38, 0.06); } .comment-like-count::before { content: '·'; margin: 0 5px 0 3px; opacity: 0.6; font-weight: 500; font-size: 0.95em; } .comment-like-btn.liked, .comment-like-btn.liked .comment-action-label, .comment-like-btn.liked .comment-like-count { color: var(--fb-like) !important; } .comments-compose { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(var(--bf-brand-rgb), 0.07); } .comments-compose-avatar { flex-shrink: 0; line-height: 0; align-self: center; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--bf-brand-rgb), 0.1); } .comments-compose-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .comment-form { min-width: 0; } .comments-reply-indicator { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(var(--bf-brand-rgb), 0.1); background: rgba(var(--bf-brand-rgb), 0.05); font-size: 11px; color: var(--bf-comment-meta); } .comments-reply-indicator.hidden { display: none; } .comments-reply-indicator-text strong { color: var(--bf-brand); font-weight: 700; } .comments-reply-cancel { border: none; background: transparent; color: var(--bf-comment-meta); font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 0; font-family: inherit; } .comments-reply-cancel:hover { color: var(--bf-danger); } .comments-compose-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; background: var(--bf-comment-input); border: 1px solid rgba(var(--bf-brand-rgb), 0.1); border-radius: 10px; padding: 5px 5px 5px 12px; min-height: 38px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); transition: border-color var(--bf-transition), background var(--bf-transition), box-shadow var(--bf-transition); } .comments-compose-panel:focus-within { background: var(--bf-card); border-color: rgba(var(--bf-brand-rgb), 0.22); box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.08); } .comment-form .chat-compose-input-wrap, .comment-form > .mention-wrap, .comment-form .comments-compose-panel .mention-wrap { grid-column: 1; min-width: 0; width: 100%; display: flex; align-items: center; align-self: center; min-height: 28px; } .comment-form textarea.chat-compose-input { width: 100%; display: block; background: transparent; border: none; border-radius: 0; padding: 4px 0; margin: 0; font-size: 13px; color: var(--bf-comment-name); font-family: inherit; resize: none; overflow-y: hidden; height: 28px; min-height: 28px; max-height: 120px; line-height: 20px; box-sizing: border-box; vertical-align: middle; } .comment-form textarea.chat-compose-input::placeholder { color: var(--bf-comment-meta); opacity: 0.8; line-height: 20px; } .comment-form textarea.chat-compose-input:focus { outline: none; box-shadow: none; } .comment-form .comments-compose-toolbar { grid-column: 2; display: inline-flex; align-items: center; align-self: center; gap: 2px; flex-shrink: 0; margin: 0; padding: 0; border: none; height: 28px; } .comment-form .chat-compose-emoji-btn { width: 30px; height: 30px; flex-shrink: 0; margin: 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--bf-comment-meta); font-size: 0.92rem; display: inline-flex; align-items: center; justify-content: center; transition: background var(--bf-transition), color var(--bf-transition); } .comment-form .chat-compose-emoji-btn:hover { background: rgba(var(--bf-brand-rgb), 0.08); color: var(--bf-brand); border-color: transparent; } .comment-form .comment-submit-btn { width: 30px; height: 30px; min-height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; border: none; border-radius: 8px; background: var(--bf-brand); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(var(--bf-brand-rgb), 0.28); transition: background var(--bf-transition), color var(--bf-transition), opacity var(--bf-transition), box-shadow var(--bf-transition); } .comment-form .comment-submit-btn::after { display: none; } .comment-form .comment-submit-btn:hover { background: var(--bf-brand-hover); color: #fff; transform: none; box-shadow: 0 2px 6px rgba(var(--bf-brand-rgb), 0.32); filter: none; } html.dark .comments-compose-panel { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } html.dark .comments-compose-panel:focus-within { box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.14); } .comment-form .comment-submit-btn i { transform: translateX(1px); } /* Profil */ .fb-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-gap-sm); padding: var(--bf-pad-xs) var(--bf-pad-xs) var(--bf-pad-2xl); } .fb-page-head .fb-page-title { padding: 0; } .fb-page-head-actions { flex-shrink: 0; } .notif-page-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .btn-notif-action, .btn-notif-mark-all { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-full); background: var(--bf-card); color: var(--fb-text); font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background var(--bf-transition), border-color var(--bf-transition), color var(--bf-transition), box-shadow var(--bf-transition); } .btn-notif-action i, .btn-notif-mark-all i { color: var(--bf-brand); font-size: 0.78rem; } .btn-notif-action:hover:not(:disabled), .btn-notif-mark-all:hover:not(:disabled) { background: var(--bf-brand-light); border-color: rgba(var(--bf-brand-rgb), 0.3); color: var(--bf-brand); } .btn-notif-action:disabled, .btn-notif-mark-all:disabled { opacity: 0.65; cursor: not-allowed; } .btn-notif-action-danger i { color: var(--bf-danger); } .btn-notif-action-danger:hover:not(:disabled) { background: rgba(224, 82, 82, 0.1); border-color: rgba(224, 82, 82, 0.35); color: var(--bf-danger); } .fb-page-title { font-size: 24px; font-weight: 800; padding: var(--bf-pad-xs) var(--bf-pad-xs) var(--bf-pad-2xl); letter-spacing: -0.03em; background: linear-gradient(135deg, var(--bf-text) 0%, var(--bf-muted) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .profile-cover { height: 260px; background: linear-gradient(165deg, var(--bf-brand-soft) 0%, var(--bf-bg) 55%, var(--bf-card) 100%); position: relative; } .profile-cover-inner { max-width: 940px; margin: 0 auto; height: 100%; position: relative; } .profile-card { overflow: hidden; padding: 0; margin-bottom: 6px; border: 1px solid var(--fb-border); box-shadow: var(--bf-shadow-sm); background: var(--fb-card); } .profile-card-cover { height: 48px; background: radial-gradient(circle at 88% 15%, rgba(var(--bf-brand-rgb), 0.16) 0%, transparent 38%), linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.12) 0%, rgba(var(--bf-brand-rgb), 0.03) 60%, transparent 100%); } html.dark .profile-card-cover { background: radial-gradient(circle at 88% 15%, rgba(var(--bf-brand-rgb), 0.2) 0%, transparent 38%), linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.16) 0%, rgba(var(--bf-brand-rgb), 0.05) 60%, transparent 100%); } .profile-card-body { padding: 0 12px 10px; } .profile-card-top { display: flex; align-items: flex-start; gap: 10px; margin-top: -22px; } .profile-card-avatar { flex-shrink: 0; } .profile-card-avatar .avatar-wrap { vertical-align: top; } .profile-card-avatar img, .profile-card-avatar .avatar-blogger { width: 56px; height: 56px; border-radius: var(--bf-radius-full); border: 2px solid var(--fb-card); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1); } .profile-card-summary { flex: 1; min-width: 0; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; } .profile-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; } .profile-card-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 4px 10px; border-radius: var(--bf-radius-full); border: 1px solid var(--fb-border); background: var(--fb-card); color: var(--fb-text); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--bf-transition), border-color var(--bf-transition), color var(--bf-transition), box-shadow var(--bf-transition), transform var(--bf-transition); } .profile-card-action-btn .fas, .profile-card-action-btn .far, .profile-card-action-btn .fab { font-size: 11px; opacity: 0.9; } .profile-card-action-btn:hover { background: var(--fb-hover); border-color: rgba(var(--bf-brand-rgb), 0.22); transform: translateY(-1px); } .profile-card-action-btn--edit { color: var(--bf-brand); border-color: rgba(var(--bf-brand-rgb), 0.24); background: rgba(var(--bf-brand-rgb), 0.06); } .profile-card-action-btn--edit:hover { background: rgba(var(--bf-brand-rgb), 0.12); border-color: rgba(var(--bf-brand-rgb), 0.32); color: var(--bf-brand-hover); } .profile-card-action-btn--message { color: var(--fb-text); } .profile-card-action-btn--blog { color: var(--bf-brand); border-color: rgba(var(--bf-brand-rgb), 0.24); background: rgba(var(--bf-brand-rgb), 0.06); } .profile-card-action-btn--blog:hover { background: rgba(var(--bf-brand-rgb), 0.12); border-color: rgba(var(--bf-brand-rgb), 0.32); color: var(--bf-brand-hover); } .profile-card-action-btn--follow.profile-card-action-btn--blog.btn-follow.following { min-width: 12.5em; } .profile-card-action-btn--follow.btn-follow { display: inline-grid; place-items: center; min-width: 0; padding: 4px 10px; font-size: 12px; font-weight: 600; border: none; box-shadow: var(--bf-shadow-brand); } .profile-card-action-btn--follow.btn-follow.following { min-width: 11.75em; background: var(--bf-card); color: var(--bf-text); border: 1px solid var(--fb-border); box-shadow: none; } .profile-card-action-btn--follow.btn-follow.following:hover, .profile-card-action-btn--follow.btn-follow.following:focus-visible { background: rgba(239, 68, 68, 0.08); color: #dc2626; border-color: rgba(239, 68, 68, 0.35); } /* Keep the blue gradient + white text on hover for the "Takip Et" state (prevents .profile-card-action-btn:hover from making bg light + white-on-white) */ .profile-card-action-btn--follow.btn-follow:hover, .profile-card-action-btn--follow.btn-follow:focus-visible { background: var(--bf-brand-gradient); color: #fff; box-shadow: 0 6px 18px rgba(var(--bf-brand-rgb), 0.35); } .profile-card-identity { min-width: 0; } .profile-card-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .profile-card-username { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--fb-text); word-break: break-word; } .profile-card-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--bf-radius-full); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .profile-card-badge--admin { background: rgba(var(--bf-brand-rgb), 0.1); border: 1px solid rgba(var(--bf-brand-rgb), 0.18); color: var(--bf-brand); } .profile-card-badge--mod { background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.22); color: #4f46e5; } html.dark .profile-card-badge--mod { background: rgba(129, 140, 248, 0.16); border-color: rgba(129, 140, 248, 0.28); color: #a5b4fc; } .profile-card-displayname { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--fb-muted); line-height: 1.3; } .profile-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; } .profile-card-meta-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--bf-radius-full); background: var(--fb-hover); font-size: 11px; font-weight: 600; color: var(--fb-muted); line-height: 1.3; } .profile-card-meta-item .fas, .profile-card-meta-item .far { font-size: 9px; opacity: 0.85; } .profile-card-presence.is-online { color: #16a34a; background: rgba(34, 197, 94, 0.1); } .profile-card-presence.is-online .fas { color: #22c55e; } .profile-card-presence.is-offline { color: var(--fb-muted); } .profile-card-about { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fb-border); } .profile-card-bio { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fb-text); white-space: pre-wrap; word-break: break-word; } .profile-card-bio--empty { font-size: 13px; color: var(--fb-muted); font-style: italic; } .profile-card-blog { display: flex; align-items: center; gap: 10px; margin-top: 8px; width: 100%; padding: 10px 12px; border-radius: var(--bf-radius-lg); background: color-mix(in srgb, var(--bf-brand-soft) 45%, var(--fb-card)); border: 1px solid color-mix(in srgb, var(--bf-brand) 14%, var(--fb-border)); color: var(--bf-brand); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .profile-card-blog > .fa-rss, .profile-card-blog > .fab { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--fb-card); border: 1px solid color-mix(in srgb, var(--bf-brand) 12%, var(--fb-border)); flex-shrink: 0; } .profile-card-blog > span:first-of-type { min-width: 0; flex: 1; color: var(--fb-text); font-weight: 700; line-height: 1.3; word-break: break-word; } .profile-card-blog:hover { background: color-mix(in srgb, var(--bf-brand-soft) 65%, var(--fb-card)); border-color: color-mix(in srgb, var(--bf-brand) 24%, var(--fb-border)); text-decoration: none; transform: translateY(-1px); } .profile-card-blog--rss .profile-card-blog-meta { margin-left: 0; padding: 4px 8px; border-radius: 999px; background: var(--fb-input); border: 1px solid var(--fb-border); font-size: 11px; font-weight: 700; color: var(--fb-muted); white-space: nowrap; } .profile-card-blog .fa-external-link-alt, .profile-card-blog .fa-chevron-right { margin-left: auto; font-size: 11px; opacity: 0.65; flex-shrink: 0; } .profile-card-mutual.is-following { color: #16a34a; background: rgba(34, 197, 94, 0.1); } .profile-card-mutual.is-not-following { color: var(--fb-muted); background: var(--fb-hover); } html.dark .profile-card-mutual.is-following { color: #4ade80; } .profile-card-stats { display: flex; align-items: stretch; gap: 4px; } .profile-card-stat { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 4px; padding: 3px 8px; border-radius: var(--bf-radius-full); background: var(--fb-hover); border: none; color: inherit; font: inherit; text-align: left; } .profile-card-stat strong { font-size: 13px; font-weight: 800; color: var(--fb-text); line-height: 1; letter-spacing: -0.02em; transition: color var(--bf-transition); } .profile-card-stat span { font-size: 11px; font-weight: 600; color: var(--fb-muted); text-transform: none; letter-spacing: 0; } .profile-card-stat--btn { cursor: pointer; appearance: none; -webkit-appearance: none; transition: background var(--bf-transition); } .profile-card-stat--btn:hover, .profile-card-stat--btn:focus-visible { background: var(--bf-brand-light); } .profile-card-stat--btn:hover strong, .profile-card-stat--btn:focus-visible strong { color: var(--bf-brand); } @media (max-width: 640px) { .profile-card-cover { height: 40px; } .profile-card-body { padding: 0 10px 10px; } .profile-card-top { flex-direction: column; align-items: center; margin-top: -24px; gap: 6px; } .profile-card-summary { width: 100%; padding-top: 0; align-items: center; text-align: center; } .profile-card-actions { width: 100%; justify-content: center; } .profile-card-action-btn--follow.btn-follow { flex: 1 1 auto; } .profile-card-action-btn--message { flex: 1 1 auto; } .profile-card-avatar img, .profile-card-avatar .avatar-blogger { width: 48px; height: 48px; } .profile-card-name-row, .profile-card-meta, .profile-card-stats { justify-content: center; } .profile-card-username { font-size: 16px; } .profile-card-about { text-align: center; } .profile-card-blog { justify-content: center; } .profile-card-stat strong { font-size: 12px; } } .profile-info-card { margin-top: -80px; padding: 0 var(--bf-pad-2xl) var(--bf-pad-2xl); position: relative; } .profile-info-simple { margin-top: 0; padding: var(--bf-pad-2xl); position: relative; overflow: hidden; } .profile-info-card.profile-info-simple::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 72px; background: linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.18) 0%, rgba(var(--bf-brand-rgb), 0.04) 100%); pointer-events: none; } .profile-info-card.profile-info-simple > * { position: relative; z-index: 1; } .profile-info-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; } .avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; } .presence-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--fb-card); background: #94a3b8; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); pointer-events: none; z-index: 10; } .presence-dot.online { background: #22c55e; } .presence-dot-lg { width: 20px; height: 20px; bottom: 8px; right: 8px; border-width: 3px; } .presence-dot-sm { width: 10px; height: 10px; bottom: 0; right: 0; border-width: 2px; } .profile-avatar-lg .avatar-wrap { vertical-align: top; } .profile-avatar-lg { flex-shrink: 0; } .profile-avatar-lg img, .profile-avatar-lg .avatar-blogger { width: 76px; height: 76px; border-radius: var(--bf-radius-full); border: 2px solid var(--fb-card); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); } .profile-details { flex: 1; min-width: 200px; padding-bottom: 8px; } .profile-name-lg { font-size: 26px; font-weight: 800; color: var(--fb-text); line-height: 1.2; letter-spacing: -0.02em; } .profile-handle { color: var(--fb-muted); font-size: 15px; margin: 4px 0 0; } .profile-bio { margin: 0; white-space: pre-wrap; word-break: break-word; } .profile-stats { display: flex; gap: 16px; margin-top: 12px; font-size: 14px; color: var(--fb-muted); } .profile-stats strong { color: var(--bf-brand); } .profile-posts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; margin-top: 0; border-bottom: 1px solid var(--bf-border); } .profile-posts-head h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--fb-text); letter-spacing: -0.01em; } .profile-posts-count { font-size: 12px; font-weight: 600; color: var(--fb-muted); } .btn-fb, .btn-blogger, .btn-tweet { background: var(--bf-brand-gradient); color: #fff; font-weight: 600; border-radius: var(--bf-radius-full); padding: 10px 22px; font-size: 14px; border: none; cursor: pointer; transition: transform var(--bf-transition-spring), box-shadow var(--bf-transition), filter var(--bf-transition); text-decoration: none; display: inline-block; box-shadow: var(--bf-shadow-brand); font-family: inherit; position: relative; overflow: hidden; } .btn-fb::after, .btn-blogger::after, .btn-tweet::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.5s ease; } .btn-fb:hover::after, .btn-blogger:hover::after, .btn-tweet:hover::after { transform: translateX(120%); } .btn-fb:hover, .btn-blogger:hover, .btn-tweet:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 22px rgba(var(--bf-brand-rgb), 0.38); filter: brightness(1.04); } .btn-fb:disabled, .btn-blogger:disabled, .btn-tweet:disabled { opacity: 0.6; cursor: not-allowed; } .btn-fb-sm { padding: 9px 20px; font-size: 13px; letter-spacing: 0.01em; } .btn-follow { background: var(--bf-brand-gradient); color: #fff; font-weight: 600; border-radius: var(--bf-radius-full); padding: 10px 22px; font-size: 14px; border: none; cursor: pointer; transition: box-shadow var(--bf-transition), background var(--bf-transition), color var(--bf-transition), border-color var(--bf-transition); font-family: inherit; box-shadow: var(--bf-shadow-brand); text-decoration: none; display: inline-grid; place-items: center; min-width: 152px; white-space: nowrap; vertical-align: middle; } .btn-follow .follow-btn-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; grid-area: 1 / 1; transition: opacity var(--bf-transition); pointer-events: none; } .btn-follow:hover { box-shadow: 0 6px 18px rgba(var(--bf-brand-rgb), 0.35); } .btn-follow.following { background: var(--bf-card); color: var(--bf-text); border: 1px solid var(--bf-border); box-shadow: var(--bf-shadow-sm); /* En uzun etiket (Takip Ediliyor) genişliğinde sabit kal */ min-width: 11.75em; } .btn-follow.following::before { content: "Takip Ediliyor"; grid-area: 1 / 1; visibility: hidden; white-space: nowrap; font-weight: 600; font-size: inherit; line-height: 1; pointer-events: none; padding-left: 1.35em; box-sizing: content-box; } .btn-follow.following .follow-btn-label-on { opacity: 1; } .btn-follow.following .follow-btn-label-off { opacity: 0; } .btn-follow.following:hover, .btn-follow.following:focus-visible { background: rgba(239, 68, 68, 0.08); color: #dc2626; border-color: rgba(239, 68, 68, 0.35); box-shadow: var(--bf-shadow-sm); } .btn-follow.following:hover .follow-btn-label-on, .btn-follow.following:focus-visible .follow-btn-label-on { opacity: 0; } .btn-follow.following:hover .follow-btn-label-off, .btn-follow.following:focus-visible .follow-btn-label-off { opacity: 1; } .btn-follow.following:disabled:hover, .btn-follow.following:disabled:focus-visible { background: var(--bf-card); color: var(--bf-text); border-color: var(--bf-border); } .btn-follow.following:disabled .follow-btn-label-on, .btn-follow.following:disabled:hover .follow-btn-label-on, .btn-follow.following:disabled:focus-visible .follow-btn-label-on { opacity: 1; } .btn-follow.following:disabled .follow-btn-label-off, .btn-follow.following:disabled:hover .follow-btn-label-off, .btn-follow.following:disabled:focus-visible .follow-btn-label-off { opacity: 0; } .settings-form { padding: var(--bf-pad-2xl); } .settings-form h2 { font-size: 18px; font-weight: 800; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--fb-border); letter-spacing: -0.02em; } .settings-field { margin-bottom: 14px; } .settings-field label { display: block; font-size: 13px; font-weight: 600; color: var(--fb-muted); margin-bottom: 6px; } /* Profil ayarları — sekmeli düzen */ .profile-settings-topbar { margin-bottom: 14px; } .profile-settings-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--bf-radius-full); border: 1px solid var(--bf-border); background: var(--fb-card); color: var(--fb-text); font-size: 14px; font-weight: 600; text-decoration: none; transition: background var(--bf-transition), border-color var(--bf-transition); } .profile-settings-back:hover { background: var(--bf-hover); border-color: rgba(var(--bf-brand-rgb), 0.2); } .profile-settings-hub { overflow: hidden; margin-top: 0; } .profile-settings-head { padding: var(--bf-pad-2xl) var(--bf-pad-3xl) 0; } .profile-settings-head h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fb-text); } .profile-settings-head p { margin: 0; font-size: 14px; color: var(--fb-muted); } .profile-settings-tabs { display: flex; gap: var(--bf-pad-sm); padding: var(--bf-pad-2xl) var(--bf-pad-3xl) 0; border-bottom: 1px solid var(--bf-border); } .profile-settings-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; background: transparent; color: var(--fb-muted); font-size: 14px; font-weight: 700; font-family: inherit; border-radius: var(--bf-radius-md) var(--bf-radius-md) 0 0; cursor: pointer; transition: color var(--bf-transition), background var(--bf-transition); margin-bottom: -1px; border-bottom: 2px solid transparent; } .profile-settings-tab:hover { color: var(--fb-text); background: var(--bf-hover); } .profile-settings-tab.active { color: var(--bf-brand); border-bottom-color: var(--bf-brand); background: var(--bf-brand-light); } .profile-settings-alert { margin: 16px 22px 0; } .profile-settings-panel { display: none; padding: var(--bf-pad-3xl); } .profile-settings-panel.active { display: block; } .profile-edit-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; } @media (max-width: 820px) { .profile-edit-layout { grid-template-columns: 1fr; } } .profile-edit-aside { display: flex; flex-direction: column; gap: 16px; } .profile-edit-avatar-card { padding: var(--bf-pad-3xl); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); background: var(--bf-surface-muted); text-align: center; } .profile-edit-avatar-wrap { position: relative; display: inline-block; margin: 0 auto 10px; } .profile-edit-avatar, .profile-edit-avatar img, .profile-edit-avatar .avatar-blogger { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: block; font-size: 2rem; border: 3px solid var(--fb-card); box-shadow: var(--bf-shadow-md); } .profile-edit-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.55); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; opacity: 0; cursor: pointer; transition: opacity var(--bf-transition); } .profile-edit-avatar-wrap:hover .profile-edit-avatar-overlay, .profile-edit-avatar-wrap:focus-within .profile-edit-avatar-overlay { opacity: 1; } .profile-edit-avatar-overlay i { font-size: 18px; } .profile-edit-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .profile-edit-avatar-hint { margin: 0; font-size: 11px; color: var(--fb-muted); } .profile-edit-preview-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fb-muted); margin-bottom: 8px; } .profile-edit-preview-card { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); background: var(--fb-card); } .profile-preview-avatar-img, .profile-edit-preview-avatar img, .profile-edit-preview-avatar .avatar-blogger { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 0.9rem; } .profile-edit-preview-body { min-width: 0; } .profile-edit-preview-body strong { display: block; font-size: 14px; color: var(--fb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-edit-preview-body span { display: block; font-size: 12px; color: var(--fb-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-edit-preview-body p { margin: 6px 0 0; font-size: 12px; color: var(--fb-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .profile-edit-fields, .profile-security-fields { display: flex; flex-direction: column; gap: 16px; } .profile-field label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--fb-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.03em; } .profile-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; } .profile-field-label-row label { margin-bottom: 0; } .profile-char-count { font-size: 11px; font-weight: 700; color: var(--fb-muted); } .profile-field-input { width: 100%; border: 1px solid var(--bf-border); background: var(--fb-card); color: var(--fb-text); border-radius: var(--bf-radius-md); padding: 12px 14px; font-size: 14px; font-family: inherit; transition: border-color var(--bf-transition), box-shadow var(--bf-transition); } .profile-field-textarea { resize: vertical; min-height: 110px; line-height: 1.5; } .profile-field-input:focus { outline: none; border-color: rgba(var(--bf-brand-rgb), 0.45); box-shadow: 0 0 0 3px var(--bf-brand-soft); } .profile-field-input.profile-field-readonly, .profile-field-input[readonly] { background: var(--fb-input); color: var(--fb-muted); cursor: not-allowed; border-color: var(--fb-border); box-shadow: none; } .profile-field-input.profile-field-readonly:focus, .profile-field-input[readonly]:focus { border-color: var(--fb-border); box-shadow: none; } .profile-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--fb-muted); line-height: 1.4; } .profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 560px) { .profile-field-grid { grid-template-columns: 1fr; } } .profile-edit-actions { padding-top: 4px; } .profile-edit-actions .btn-fb { display: inline-flex; align-items: center; gap: 8px; } .profile-security-form { max-width: 640px; } .profile-security-intro { display: flex; align-items: flex-start; gap: 14px; padding: 16px; margin-bottom: 20px; border-radius: var(--bf-radius-lg); background: var(--bf-brand-light); border: 1px solid rgba(var(--bf-brand-rgb), 0.12); } .profile-security-icon { width: 44px; height: 44px; border-radius: var(--bf-radius-md); background: var(--bf-brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--bf-shadow-brand); } .profile-security-intro h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--fb-text); } .profile-security-intro p { margin: 0; font-size: 13px; color: var(--fb-muted); line-height: 1.45; } .profile-security-foot { margin: 14px 0 0; font-size: 13px; color: var(--fb-muted); } .profile-privacy-form { max-width: 640px; } .profile-privacy-intro { margin-bottom: 18px; } .profile-privacy-toggles { display: flex; flex-direction: column; gap: 12px; } .profile-privacy-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); background: var(--fb-card); cursor: pointer; transition: border-color var(--bf-transition), background var(--bf-transition); } .profile-privacy-toggle-row:hover { border-color: rgba(var(--bf-brand-rgb), 0.2); background: var(--bf-hover); } .profile-privacy-toggle-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .profile-privacy-toggle-copy strong { font-size: 14px; font-weight: 800; color: var(--fb-text); } .profile-privacy-toggle-copy span { font-size: 13px; color: var(--fb-muted); line-height: 1.45; } .profile-privacy-switch { position: relative; display: inline-flex; flex-shrink: 0; } .profile-privacy-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .profile-privacy-switch-track { display: block; width: 48px; height: 28px; border-radius: 999px; background: var(--fb-border); transition: background var(--bf-transition); position: relative; } .profile-privacy-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform var(--bf-transition); } .profile-privacy-switch input:checked + .profile-privacy-switch-track { background: var(--bf-brand); } .profile-privacy-switch input:checked + .profile-privacy-switch-track::after { transform: translateX(20px); } .profile-privacy-switch input:focus-visible + .profile-privacy-switch-track { box-shadow: 0 0 0 3px var(--bf-brand-soft); } .profile-privacy-foot { margin: 14px 0 0; font-size: 13px; color: var(--fb-muted); line-height: 1.45; } .profile-privacy-section + .profile-privacy-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--bf-border); } .profile-privacy-section-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-brand); display: flex; align-items: center; gap: 8px; } .profile-privacy-select-row { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); background: var(--fb-card); } .profile-privacy-select-label { font-size: 14px; font-weight: 800; color: var(--fb-text); } .profile-privacy-select { width: 100%; max-width: 100%; } .profile-privacy-select-hint { margin: 0; font-size: 12px; color: var(--fb-muted); line-height: 1.45; } .profile-account-intro { margin-bottom: 18px; } .profile-account-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(var(--bf-brand-rgb), 0.15); background: var(--bf-hover); font-size: 13px; color: var(--fb-muted); line-height: 1.5; } .profile-account-note i { margin-top: 2px; color: var(--bf-brand); } .profile-account-card { max-width: 640px; padding: 18px; border-radius: 14px; border: 1px solid var(--bf-border); background: var(--bf-surface); } .profile-account-card + .profile-account-card { margin-top: 16px; } .profile-account-card-danger { border-color: rgba(220, 38, 38, 0.22); background: rgba(220, 38, 38, 0.04); } .profile-account-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .profile-account-card-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 16px; } .profile-account-card-icon.is-warn { color: #b45309; background: rgba(245, 158, 11, 0.14); } .profile-account-card-icon.is-danger { color: #b91c1c; background: rgba(220, 38, 38, 0.12); } .profile-account-card-head h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; } .profile-account-card-head p { margin: 0; font-size: 13px; color: var(--fb-muted); line-height: 1.45; } .profile-account-form { display: flex; flex-direction: column; gap: 12px; } .profile-account-danger-hint { margin: 0; font-size: 12px; color: var(--fb-muted); line-height: 1.45; } .btn-account-warn { align-self: flex-start; background: #d97706; border-color: #d97706; } .btn-account-warn:hover { background: #b45309; border-color: #b45309; } .btn-account-danger { align-self: flex-start; background: #dc2626; border-color: #dc2626; } .btn-account-danger:hover { background: #b91c1c; border-color: #b91c1c; } @media (max-width: 768px) { .profile-settings-topbar { margin-bottom: 10px; } .fb-card.profile-settings-hub, #profile-settings.profile-settings-hub { overflow: visible; } .profile-settings-head { padding: 16px 16px 0; } .profile-settings-head h2 { font-size: 18px; } .profile-settings-head p { font-size: 13px; line-height: 1.45; } .profile-settings-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 0; border-bottom: none; overflow: visible; } .profile-settings-tab { justify-content: center; text-align: center; padding: 12px 10px; margin-bottom: 0; border-radius: var(--bf-radius-md); border: 1px solid var(--bf-border); border-bottom: 1px solid var(--bf-border); font-size: 13px; min-width: 0; white-space: nowrap; } .profile-settings-tab.active { border-color: rgba(var(--bf-brand-rgb), 0.35); border-bottom-color: rgba(var(--bf-brand-rgb), 0.35); box-shadow: var(--bf-shadow-sm); } .profile-settings-alert { margin: 12px 16px 0; } .profile-settings-panel { padding: 16px; border-top: 1px solid var(--bf-border); margin-top: 14px; } .profile-security-form, .profile-privacy-form, .profile-account-card { max-width: none; } .profile-privacy-toggle-row { flex-direction: column; align-items: stretch; gap: 12px; } .profile-privacy-switch { align-self: flex-end; } .profile-security-intro, .profile-account-card-head { flex-direction: row; flex-wrap: wrap; } .profile-edit-actions .btn-fb, .btn-account-warn, .btn-account-danger { width: 100%; justify-content: center; } } @media (max-width: 380px) { .profile-settings-tab { font-size: 12px; padding: 11px 8px; gap: 6px; } .profile-settings-tab i { font-size: 12px; } } /* Kullanıcı listesi */ .search-card { padding: var(--bf-pad-lg) var(--bf-pad-2xl); } .search-results.is-search-loading { opacity: 0.65; pointer-events: none; transition: opacity 0.15s ease; } .search-input-wrap { position: relative; } .search-input-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fb-muted); } .search-input { width: 100%; background: var(--fb-input); border: 1px solid transparent; border-radius: var(--bf-radius-full); padding: var(--bf-pad-lg) var(--bf-pad-xl) var(--bf-pad-lg) 36px; color: var(--fb-text); font-size: 14px; font-family: inherit; transition: border-color var(--bf-transition), box-shadow var(--bf-transition), background var(--bf-transition); } .search-input:focus { outline: none; background: var(--bf-card); border-color: rgba(var(--bf-brand-rgb), 0.35); box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.12); } .search-hub { display: flex; flex-direction: column; gap: 12px; } .search-hub-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: var(--bf-radius-lg); background: var(--fb-input); border: 1px solid var(--bf-border); } .search-hub-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 10px 8px; border-radius: var(--bf-radius-md); font-size: 12px; font-weight: 700; color: var(--fb-muted); text-decoration: none; transition: background var(--bf-transition), color var(--bf-transition), box-shadow var(--bf-transition); } .search-hub-tab i { font-size: 11px; opacity: 0.85; } .search-hub-tab:hover { color: var(--fb-text); background: var(--fb-hover); } .search-hub-tab.is-active { color: var(--fb-text); background: var(--fb-card); box-shadow: var(--bf-shadow-sm); } .search-hub-tab-count { min-width: 18px; padding: 2px 6px; border-radius: var(--bf-radius-full); background: var(--fb-input); font-size: 10px; font-weight: 800; line-height: 1.2; color: var(--fb-muted); } .search-hub-tab.is-active .search-hub-tab-count { background: var(--bf-brand-light); color: var(--bf-brand); } .search-hub-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 24px; } .search-hub-empty--compact { padding: 28px 20px; } .search-hub-empty-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--bf-radius-full); background: var(--bf-brand-light); color: var(--bf-brand); font-size: 20px; margin-bottom: 4px; } .search-hub-empty h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--fb-text); } .search-hub-empty p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fb-muted); max-width: 320px; } .search-people-list { padding: 6px 0; overflow: hidden; } .search-people-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--bf-border); transition: background var(--bf-transition); } .search-people-row:last-child { border-bottom: none; } .search-people-row:hover { background: var(--bf-brand-light); } .search-people-avatar, .search-people-avatar img, .search-people-avatar .avatar-blogger { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .search-people-avatar .avatar-blogger { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .search-people-copy { flex: 1; min-width: 0; } .search-people-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 800; color: var(--fb-text); line-height: 1.3; } .search-people-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--bf-radius-full); background: var(--fb-input); color: var(--fb-muted); } .search-people-handle { margin-top: 2px; font-size: 12px; color: var(--fb-muted); } .search-people-bio { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--fb-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-people-arrow { flex-shrink: 0; color: var(--fb-muted); font-size: 12px; opacity: 0.5; } .search-tag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .search-tag-cell { display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 14px; border-radius: var(--bf-radius-lg); border: 1px solid var(--bf-border); background: var(--fb-card); text-decoration: none; color: inherit; transition: border-color var(--bf-transition), background var(--bf-transition), transform var(--bf-transition-spring); } .search-tag-cell:hover { border-color: rgba(var(--bf-brand-rgb), 0.3); background: var(--bf-brand-light); transform: translateY(-2px); } .search-tag-hash { font-size: 18px; font-weight: 900; color: var(--bf-brand); line-height: 1; } .search-tag-name { font-size: 14px; font-weight: 800; color: var(--fb-text); word-break: break-word; } .search-tag-count { margin-top: auto; font-size: 11px; font-weight: 700; color: var(--fb-muted); } .search-posts-list { display: flex; flex-direction: column; gap: 12px; } @media (max-width: 640px) { .search-hub-tab span:not(.search-hub-tab-count) { display: none; } .search-hub-tab { padding: 10px 6px; } .search-tag-grid { grid-template-columns: 1fr; } } .user-row { display: flex; align-items: center; gap: var(--bf-gap-sm); margin: var(--bf-pad-xs) var(--bf-pad-sm); padding: var(--bf-pad-lg) var(--bf-pad-xl); text-decoration: none; border-radius: var(--bf-radius-md); transition: background var(--bf-transition), transform var(--bf-transition-spring), box-shadow var(--bf-transition); border-bottom: none; } .user-row:last-child { margin-bottom: 8px; } .user-row:hover { background: var(--bf-brand-light); transform: translateX(2px); box-shadow: var(--bf-shadow-sm); } .user-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 600; color: var(--fb-text); font-size: 15px; } .user-row-badge { font-size: 11px; font-weight: 600; color: var(--bf-brand); background: var(--bf-brand-light); padding: 2px 8px; border-radius: 999px; } .user-row-handle { color: var(--fb-muted); font-size: 13px; } .hashtag-chips { display: flex; flex-wrap: wrap; gap: var(--bf-pad-sm); padding: var(--bf-pad-lg) var(--bf-pad-2xl); } .hashtag-chip { padding: 8px 14px; border-radius: var(--bf-radius-full); background: var(--bf-brand-light); color: var(--fb-link); font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid rgba(var(--bf-brand-rgb), 0.12); transition: background var(--bf-transition), transform var(--bf-transition); } .hashtag-chip:hover { background: var(--bf-brand-soft); transform: translateY(-1px); } /* Bildirimler */ .notif-filter-tabs { display: flex; flex-wrap: nowrap; gap: 6px; padding: 6px 8px; margin-bottom: var(--bf-gap-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-snap-type: x proximity; } .notif-filter-tabs::-webkit-scrollbar { height: 4px; } .notif-filter-tabs::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fb-muted) 35%, transparent); border-radius: 999px; } .notif-filter-tab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-full); background: var(--fb-input); color: var(--fb-muted); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; scroll-snap-align: start; transition: background var(--bf-transition), color var(--bf-transition), border-color var(--bf-transition), box-shadow var(--bf-transition), transform var(--bf-transition-spring); } .notif-filter-tab i { font-size: 0.92rem; flex-shrink: 0; } .notif-filter-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .notif-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bf-brand); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; } .notif-filter-tab:hover { background: var(--fb-hover); color: var(--fb-text); } .notif-filter-tab.active { background: var(--bf-brand-soft); border-color: var(--bf-brand); color: var(--bf-brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bf-brand) 18%, transparent); } .notif-filter-tab.active i { color: var(--bf-brand); } #notifications-list.is-loading { pointer-events: none; } .notif-skeleton { display: flex; flex-direction: column; } .notif-row-skeleton { pointer-events: none; opacity: 1; } .notif-skel-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, var(--fb-input) 25%, color-mix(in srgb, var(--fb-hover) 80%, var(--fb-input)) 50%, var(--fb-input) 75%); background-size: 200% 100%; animation: notif-skel-shimmer 1.1s ease-in-out infinite; flex-shrink: 0; } .notif-skel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; } .notif-skel-line { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--fb-input) 25%, color-mix(in srgb, var(--fb-hover) 80%, var(--fb-input)) 50%, var(--fb-input) 75%); background-size: 200% 100%; animation: notif-skel-shimmer 1.1s ease-in-out infinite; } .notif-skel-line-lg { width: 78%; } .notif-skel-line-sm { width: 36%; height: 8px; } @keyframes notif-skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (max-width: 640px) { .notif-filter-tabs { gap: 5px; padding: 5px 6px; margin-bottom: 10px; } .notif-filter-tab { gap: 4px; min-height: 30px; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; } .notif-filter-tab i { flex-shrink: 0; font-size: 0.8rem; } .notif-filter-tab.active { box-shadow: none; } } .notif-row { display: flex; align-items: flex-start; gap: var(--bf-gap-sm); margin: var(--bf-pad-xs) var(--bf-pad-sm); padding: var(--bf-pad-lg) var(--bf-pad-xl); text-decoration: none; border-radius: var(--bf-radius-md); border-bottom: none; transition: background var(--bf-transition), transform var(--bf-transition-spring); } .main-column:has(.notif-page) .fb-page-head { padding-bottom: var(--bf-pad-md); } .main-column:has(.notif-page) .fb-page-title { font-size: 20px; } .notif-page.fb-card { margin-bottom: var(--bf-gap-sm); } .notif-page .notif-row { gap: 8px; margin: 2px 4px; padding: 8px 10px; border-radius: var(--bf-radius-sm); } .notif-page .notif-row:last-child { margin-bottom: 4px; } .notif-page .notif-message { font-size: 13px; line-height: 1.35; margin: 0; } .notif-page .notif-type-icon { font-size: 0.72rem; margin-right: 4px; } .notif-page .notif-time { font-size: 11px; margin: 2px 0 0; } .notif-page .empty-state { padding: 28px 16px; } .notif-page .empty-state h2 { font-size: 17px; margin-bottom: 6px; } .notif-page .empty-state p { font-size: 13px; } .notif-row:last-child { margin-bottom: 8px; } .notif-row:hover { background: var(--fb-hover); transform: translateX(2px); } .notif-page .notif-row:hover { transform: none; } .notif-row.unread { background: var(--bf-brand-light); box-shadow: inset 3px 0 0 var(--bf-brand); } .notif-page .notif-row.unread { box-shadow: inset 2px 0 0 var(--bf-brand); } html.dark .notif-row.unread { background: var(--bf-brand-light); } /* Genel bileşenler */ .theme-input { background: var(--fb-card); border: 1px solid var(--bf-border); color: var(--fb-text); border-radius: var(--bf-radius-md); font-size: 14px; font-family: inherit; transition: border-color var(--bf-transition), box-shadow var(--bf-transition); } .theme-input:focus { outline: none; border-color: rgba(var(--bf-brand-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.12); } .theme-text-strong { color: var(--fb-text); } .theme-muted { color: var(--fb-muted); } .theme-subtle { color: var(--fb-muted); } .theme-divider { border-color: var(--fb-border); } .text-blogger, .text-tw, .text-fb { color: var(--bf-link); font-weight: 500; } .hover-blogger:hover { text-decoration: underline; } .mention-link, .hashtag-link { color: var(--bf-link); text-decoration: none; font-weight: 600; } .mention-link:hover, .hashtag-link:hover { text-decoration: underline; } .avatar-blogger { background: linear-gradient(135deg, var(--bf-brand-soft) 0%, var(--bf-brand-light) 100%); color: var(--bf-brand-hover); font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: var(--bf-radius-full); } .profile-avatar-lg img, .fb-post-header img, .left-menu-item img, .user-row img, .notif-row img, .compose-top img, .ig-thread img, .ig-chat-user img, .ig-popup-header-user img { border-radius: var(--bf-radius-full) !important; } .theme-info-banner { background: var(--bf-brand-light); border: 1px solid rgba(var(--bf-brand-rgb), 0.15); border-radius: var(--bf-radius-lg); color: var(--bf-brand-hover); padding: var(--bf-pad-lg) var(--bf-pad-xl); font-size: 14px; margin-bottom: var(--bf-gap-md); box-shadow: var(--bf-shadow-sm); } html.dark .theme-info-banner { background: var(--bf-brand-light); border-color: var(--bf-brand-soft); color: var(--bf-link); } .empty-state { padding: 40px var(--bf-pad-3xl); text-align: center; color: var(--fb-muted); } .empty-state-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: var(--bf-radius-2xl); background: var(--bf-brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: var(--bf-shadow-brand); } .empty-state h2 { font-size: 21px; font-weight: 800; color: var(--fb-text); margin-bottom: 10px; letter-spacing: -0.03em; } .empty-state p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 280px; margin-inline: auto; } .mention-wrap { position: relative; min-width: 0; } .compose-editor > .mention-wrap, .compose-editor > .compose-input-wrap { flex: 1; } .mention-wrap .mention-input, .mention-wrap input, .mention-wrap textarea { width: 100%; box-sizing: border-box; } .mention-dropdown { background: var(--fb-card); border: 1px solid var(--fb-border) !important; border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-lg); overflow: hidden; z-index: 9999; } .comment-form .mention-dropdown { top: auto; bottom: calc(100% + 6px); margin-top: 0; } .mention-dropdown-portal { position: fixed; max-height: 12rem; overflow-y: auto; z-index: 12000; } .mention-dropdown-heading { padding: 8px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fb-muted); border-bottom: 1px solid var(--bf-border); background: var(--bf-surface-muted); } .alert-box, .auth-error, .auth-success { display: flex; align-items: flex-start; gap: var(--bf-pad-md); padding: var(--bf-pad-lg) var(--bf-pad-2xl); border-radius: var(--bf-radius-md); margin-bottom: var(--bf-gap-md); font-size: 14px; line-height: 1.45; } .alert-box i { flex-shrink: 0; margin-top: 2px; font-size: 1rem; } .auth-error { background: #fdf2f2; border: 1px solid #f5d5d5; color: #b44a4a; } .auth-success { background: #f0f7f2; border: 1px solid #d0e8d6; color: #3d7a52; } html.dark .auth-error { background: #2e2222; border-color: #4a3333; color: #e8a0a0; } html.dark .auth-success { background: #222a24; border-color: #334a38; color: #8fd4a0; } /* Auth */ @keyframes auth-fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-fade-right { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } @keyframes auth-icon-pop { 0% { opacity: 0; transform: scale(0.72); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes auth-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(12px, -18px) scale(1.04); } 66% { transform: translate(-10px, 10px) scale(0.96); } } @keyframes auth-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes auth-pulse-ring { 0%, 100% { box-shadow: 0 8px 20px rgba(var(--bf-brand-rgb), 0.28); } 50% { box-shadow: 0 10px 28px rgba(var(--bf-brand-rgb), 0.42); } } @keyframes auth-field-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-alert-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes auth-success-bounce { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } } .theme-auth-body { background: var(--bf-bg-mesh) !important; background-attachment: fixed !important; } .auth-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; } .auth-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .auth-blob { position: absolute; border-radius: 50%; filter: blur(56px); opacity: 0.45; will-change: transform; } .auth-blob-1 { width: 280px; height: 280px; top: 8%; left: -60px; background: rgba(var(--bf-brand-rgb), 0.35); animation: auth-float 14s ease-in-out infinite; } .auth-blob-2 { width: 220px; height: 220px; right: -40px; bottom: 18%; background: rgba(99, 102, 241, 0.22); animation: auth-float 18s ease-in-out infinite reverse; animation-delay: -4s; } .auth-blob-3 { width: 160px; height: 160px; left: 42%; bottom: -30px; background: rgba(var(--bf-brand-rgb), 0.2); animation: auth-float 12s ease-in-out infinite; animation-delay: -7s; } .auth-topbar, .auth-body { position: relative; z-index: 1; } .auth-topbar { background: var(--bf-glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--bf-border); padding: var(--bf-pad-lg) var(--bf-pad-2xl); display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: var(--bf-shadow-sm); animation: auth-fade-down 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .auth-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .auth-brand-icon { width: 44px; height: 44px; border-radius: var(--bf-radius-lg); background: #fff; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: none; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; padding: 5px; } .auth-brand:hover .auth-brand-icon { transform: rotate(-6deg) scale(1.05); } .auth-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .auth-brand-text strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bf-text); } .auth-brand-text small { font-size: 0.78rem; font-weight: 600; color: var(--fb-muted); margin-top: 2px; } .auth-topbar-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--bf-radius-full); border: 1px solid rgba(var(--bf-brand-rgb), 0.2); background: rgba(var(--bf-brand-rgb), 0.08); color: var(--bf-brand); font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: background var(--bf-transition), border-color var(--bf-transition), transform var(--bf-transition); } .auth-topbar-action:hover { background: rgba(var(--bf-brand-rgb), 0.14); border-color: rgba(var(--bf-brand-rgb), 0.32); transform: translateY(-1px); } .auth-topbar .fb-logo, .auth-topbar a.fb-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.4rem; text-decoration: none; } .auth-topbar-title { color: var(--bf-text); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .auth-topbar a.text-white { color: var(--bf-brand) !important; } .auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--bf-pad-3xl) var(--bf-pad-2xl) 32px; } .auth-layout { width: 100%; max-width: 920px; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } .auth-layout-wide { max-width: 980px; } .auth-aside { display: none; } .auth-box { width: 100%; max-width: 440px; margin: 0 auto; background: var(--fb-card); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-2xl); padding: 26px var(--bf-pad-3xl) var(--bf-pad-3xl); box-shadow: var(--bf-shadow-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; overflow: hidden; animation: auth-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } .auth-box:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(var(--bf-brand-rgb), 0.12), var(--bf-shadow-lg); } .auth-box-register { max-width: 520px; } .auth-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, var(--bf-brand) 0%, #818cf8 35%, var(--bf-brand-hover) 70%, var(--bf-brand) 100% ); background-size: 200% 100%; animation: auth-shimmer 4s linear infinite; } .auth-box-head { text-align: center; margin-bottom: 24px; } .auth-box-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: var(--bf-radius-xl); background: var(--bf-brand-light); color: var(--bf-brand); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; animation: auth-icon-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; } .auth-box-icon-success { background: #ecfdf3; color: #16a34a; animation: auth-success-bounce 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } html.dark .auth-box-icon-success { background: #1a2e22; color: #4ade80; } .auth-box h1 { font-size: 1.55rem; font-weight: 800; margin: 0 0 8px; color: var(--fb-text); letter-spacing: -0.03em; animation: auth-field-in 0.5s ease 0.28s both; } .auth-box-sub { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--fb-muted); animation: auth-field-in 0.5s ease 0.36s both; } .auth-box .alert-box { animation: auth-alert-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-field { display: flex; flex-direction: column; gap: 6px; animation: auth-field-in 0.5s ease both; } .auth-form > .auth-field:nth-of-type(1) { animation-delay: 0.12s; } .auth-form > .auth-field:nth-of-type(2) { animation-delay: 0.2s; } .auth-form > .auth-field:nth-of-type(3) { animation-delay: 0.28s; } .auth-form > .auth-field:nth-of-type(4) { animation-delay: 0.36s; } .auth-form > .auth-field:nth-of-type(5) { animation-delay: 0.44s; } .auth-form > .auth-section-title { animation: auth-field-in 0.45s ease both; } .auth-form > .auth-section-title:nth-of-type(1) { animation-delay: 0.08s; } .auth-form > .auth-section-title:nth-of-type(2) { animation-delay: 0.34s; } .auth-form > .auth-field-grid { animation: auth-field-in 0.5s ease 0.14s both; } .auth-form > .auth-form-row { animation: auth-field-in 0.45s ease 0.38s both; } .auth-field-label { font-size: 0.82rem; font-weight: 700; color: var(--fb-text); } .auth-field-hint { font-size: 0.75rem; color: var(--fb-muted); line-height: 1.35; } .auth-username-status { display: block; min-height: 1.1em; margin-top: 4px; font-size: 0.75rem; line-height: 1.35; font-weight: 600; transition: color 0.2s ease; } .auth-username-status.is-checking { color: var(--fb-muted); font-weight: 500; } .auth-username-status.is-available { color: #3d7a52; } .auth-username-status.is-taken, .auth-username-status.is-invalid { color: #b44a4a; } html.dark .auth-username-status.is-available { color: #8fd4a0; } html.dark .auth-username-status.is-taken, html.dark .auth-username-status.is-invalid { color: #e8a0a0; } .auth-input-wrap { position: relative; display: flex; align-items: center; } .auth-input-icon { position: absolute; left: 14px; color: var(--fb-muted); font-size: 0.9rem; pointer-events: none; transition: color 0.25s ease, transform 0.25s ease; } .auth-input-wrap:focus-within .auth-input-icon { color: var(--bf-brand); transform: scale(1.08); } .auth-input { width: 100%; min-height: 46px; padding: 11px 14px 11px 42px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); background: var(--fb-input); color: var(--fb-text); font-size: 16px; font-family: inherit; transition: border-color var(--bf-transition), box-shadow var(--bf-transition); } .auth-textarea { min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.45; } .auth-input:focus { outline: none; border-color: rgba(var(--bf-brand-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.1); } .auth-input-wrap:has(.auth-password-toggle) .auth-input { padding-right: 44px; } .auth-password-toggle { position: absolute; right: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--bf-radius-md); background: transparent; color: var(--fb-muted); font-size: 0.95rem; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .auth-password-toggle:hover { color: var(--fb-text); background: rgba(var(--bf-brand-rgb), 0.08); } .auth-password-toggle:focus-visible { outline: 2px solid rgba(var(--bf-brand-rgb), 0.45); outline-offset: 1px; } .auth-password-toggle.is-visible { color: var(--bf-brand); } .auth-field-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .auth-section-title { margin: 4px 0 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-muted); } .auth-section-optional { font-weight: 600; text-transform: none; letter-spacing: 0; } .auth-form-row { display: flex; justify-content: flex-end; margin-top: -4px; } .auth-form-row-split { justify-content: space-between; align-items: center; gap: 12px; } .auth-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; color: var(--fb-text); cursor: pointer; user-select: none; } .auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--fb-brand); cursor: pointer; } .auth-inline-link { font-size: 0.84rem; font-weight: 600; color: var(--fb-link); text-decoration: none; } .auth-inline-link:hover { text-decoration: underline; } .auth-submit { width: 100%; min-height: 46px; margin-top: 4px; font-size: 1rem; font-weight: 700; animation: auth-field-in 0.5s ease 0.46s both; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease; } .auth-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--bf-brand-rgb), 0.28); } .auth-submit:active { transform: translateY(0) scale(0.98); } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; color: var(--fb-muted); font-size: 0.82rem; animation: auth-field-in 0.5s ease 0.52s both; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--bf-border); } .auth-footer-link { margin-top: 0; text-align: center; font-size: 14px; color: var(--fb-muted); animation: auth-field-in 0.5s ease 0.58s both; } .auth-footer-link a { color: var(--fb-link); font-weight: 600; text-decoration: none; } .auth-footer-link a:hover { text-decoration: underline; } @media (min-width: 900px) { .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; } .auth-layout-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } .auth-aside { display: block; padding: 12px 8px; animation: auth-fade-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; } .auth-aside-kicker { margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-brand); animation: auth-field-in 0.5s ease 0.22s both; } .auth-aside-lead { margin: 0 0 14px; font-size: 1rem; line-height: 1.45; color: var(--fb-muted); font-weight: 500; animation: auth-field-in 0.5s ease 0.26s both; } .auth-aside-title { margin: 0 0 22px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: var(--bf-text); animation: auth-field-in 0.55s ease 0.3s both; } .auth-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .auth-aside-list li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--fb-text); font-weight: 500; animation: auth-field-in 0.5s ease both; } .auth-aside-list li:nth-child(1) { animation-delay: 0.38s; } .auth-aside-list li:nth-child(2) { animation-delay: 0.46s; } .auth-aside-list li:nth-child(3) { animation-delay: 0.54s; } .auth-aside-list li:nth-child(4) { animation-delay: 0.62s; } .auth-aside-list i { width: 34px; height: 34px; border-radius: var(--bf-radius-full); background: rgba(var(--bf-brand-rgb), 0.1); color: var(--bf-brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; transition: transform 0.25s ease, background 0.25s ease; } .auth-aside-list li:hover i { transform: scale(1.1) rotate(-4deg); background: rgba(var(--bf-brand-rgb), 0.18); } .auth-box { margin: 0; max-width: none; } } @media (min-width: 640px) { .auth-field-grid { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .auth-blob, .auth-topbar, .auth-box, .auth-box::before, .auth-box-icon, .auth-box-icon-success, .auth-box h1, .auth-box-sub, .auth-box .alert-box, .auth-field, .auth-form > .auth-section-title, .auth-form > .auth-field-grid, .auth-form > .auth-form-row, .auth-submit, .auth-divider, .auth-footer-link, .auth-brand-icon, .auth-aside, .auth-aside-kicker, .auth-aside-lead, .auth-aside-title, .auth-aside-list li { animation: none !important; transition: none !important; } .auth-box:hover, .auth-submit:hover, .auth-submit:active, .auth-brand:hover .auth-brand-icon { transform: none !important; } } /* Bildirim toast — sol alt */ .notif-toast-stack { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; } @media (min-width: 900px) { .notif-toast-stack { left: 24px; bottom: 24px; max-width: 380px; } } .notif-toast { display: flex; align-items: flex-start; gap: var(--bf-gap-sm); width: 100%; padding: var(--bf-pad-lg) var(--bf-pad-xl); background: #fff; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-md); box-shadow: var(--bf-shadow-md); color: var(--fb-text); text-decoration: none; pointer-events: auto; opacity: 0; transform: translateX(-12px); transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } html.dark .notif-toast { background: #1c1d28; border-color: var(--fb-border); } .notif-toast.is-visible { opacity: 1; transform: translateX(0); } .notif-toast.is-leaving { opacity: 0; transform: translateX(-12px); } .notif-toast-icon { width: 34px; height: 34px; border-radius: var(--bf-radius-full); background: var(--bf-brand-soft); color: var(--bf-brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; } .notif-toast-body { flex: 1; min-width: 0; padding-top: 2px; } .notif-toast-title { display: block; font-size: 12px; font-weight: 700; color: var(--fb-text); margin-bottom: 2px; } .notif-toast-message-alert .notif-toast-icon.is-message { background: rgba(24, 119, 242, 0.12); color: var(--fb-blue, #1877f2); } .notif-toast-message-alert .notif-toast-message { font-weight: 500; color: var(--fb-secondary-text, #65676b); -webkit-line-clamp: 2; } html.dark .notif-toast-message-alert .notif-toast-message { color: var(--fb-secondary-text, #b0b3b8); } .notif-toast-message { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.45; } .post-highlight, .comment-highlight .fb-comment-main { border-radius: 8px; animation: bfPulse 2s ease; } @keyframes bfPulse { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--bf-brand-soft); } } main { width: 100%; min-width: 0; } /* Instagram / Messenger tarzı sağ alt sohbet penceresi */ .ig-popup-dock { --ig-popup-bubble-size: 50px; --ig-popup-bubble-avatar-size: 44px; position: fixed; bottom: 18px; right: 18px; z-index: 110; pointer-events: none; max-width: calc(100vw - 24px); } .ig-popup-dock-stack { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; max-width: 100%; pointer-events: none; } .ig-popup-dock-stack > * { pointer-events: auto; } .ig-popup-bubbles { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; pointer-events: none; } .ig-popup-bubbles > * { pointer-events: auto; } @media (max-width: 899px) { .ig-popup-dock { bottom: calc(16px + env(safe-area-inset-bottom)); right: 12px; } } @media (max-width: 767px) { .ig-popup-dock { display: none; } } .ig-popup-inbox-btn { width: var(--ig-popup-bubble-size); height: var(--ig-popup-bubble-size); padding: 0; border-radius: var(--bf-radius-full); background: linear-gradient(145deg, var(--bf-brand) 0%, var(--bf-brand-hover, #4f46e5) 100%); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(var(--bf-brand-rgb), 0.42), 0 2px 6px rgba(0, 0, 0, 0.12); position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; flex-shrink: 0; } .ig-popup-inbox-btn-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: opacity 0.15s ease, transform 0.15s ease; } .ig-popup-inbox-btn-icon.hidden { display: none; } .ig-popup-inbox-btn-icon i { font-size: 1.35rem; flex-shrink: 0; } .ig-popup-inbox-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 22px rgba(var(--bf-brand-rgb), 0.48), 0 3px 8px rgba(0, 0, 0, 0.14); } .ig-popup-inbox-btn.is-open { background: var(--bf-card); color: var(--fb-text); border: 1px solid var(--fb-border); box-shadow: var(--bf-shadow-lg); } .ig-popup-inbox-btn.is-open:hover { color: var(--bf-brand); border-color: rgba(var(--bf-brand-rgb), 0.35); } .ig-popup-inbox-btn.has-unread:not(.is-open)::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(var(--bf-brand-rgb), 0.55); animation: ig-popup-fab-ring 2.2s ease-out infinite; pointer-events: none; } @keyframes ig-popup-fab-ring { 0% { transform: scale(1); opacity: 0.75; } 70% { transform: scale(1.14); opacity: 0; } 100% { transform: scale(1.14); opacity: 0; } } .ig-popup-badge { position: absolute; top: -2px; right: -2px; background: var(--bf-danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--bf-card); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); line-height: 1; } .ig-popup-badge.hidden { display: none; } .ig-popup-inbox { width: 328px; max-height: 420px; background: var(--bf-card); border: 1px solid var(--fb-border); border-radius: var(--bf-radius-xl); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; align-self: flex-end; animation: ig-popup-inbox-in 0.2s ease; } @keyframes ig-popup-inbox-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ig-popup-inbox.hidden { display: none; } .ig-popup-dock:has(.ig-popup-window:not(.minimized)) .ig-popup-inbox:not(.hidden) { max-height: 420px; } .ig-popup-inbox-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--fb-border); background: var(--bf-card); } .ig-popup-inbox-head-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .ig-popup-inbox-title { font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--fb-text); } .ig-popup-inbox-subtitle { font-size: 12px; color: var(--fb-muted); line-height: 1.3; } .ig-popup-inbox-actions { display: flex; gap: 4px; align-items: center; } .ig-popup-inbox-link, .ig-popup-inbox-close { background: none; border: none; color: var(--fb-text); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.95rem; } .ig-popup-inbox-link:hover, .ig-popup-inbox-close:hover { background: var(--fb-hover); } .ig-popup-thread-list { overflow-y: auto; max-height: 360px; flex: 1; min-height: 0; } .ig-popup-thread-section-label { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fb-muted); } .ig-popup-thread-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: none; border-bottom: 1px solid var(--fb-border); background: var(--bf-card); cursor: pointer; text-align: left; transition: background 0.15s ease; font-family: inherit; color: inherit; position: relative; } .ig-popup-thread-item:hover { background: var(--fb-hover); } .ig-popup-thread-item.unread { background: var(--bf-brand-light); box-shadow: inset 3px 0 0 var(--bf-brand); } .ig-popup-thread-item.unread:hover { background: var(--bf-brand-soft); } .ig-popup-thread-item.active { background: var(--bf-brand-light); box-shadow: inset 3px 0 0 var(--bf-brand); } .ig-popup-thread-item.active .msg-thread-name { color: var(--bf-brand); font-weight: 700; } .ig-popup-thread-item .msg-thread-info { flex: 1; min-width: 0; } .ig-popup-thread-public { border-bottom: 1px solid var(--fb-border); background: linear-gradient(135deg, var(--bf-brand-light) 0%, transparent 100%); } .ig-popup-thread-public .msg-thread-name { color: var(--bf-brand); } .ig-popup-public-body { gap: 0 !important; overflow: hidden !important; padding: 0 !important; } .ig-popup-public-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; } .ig-popup-public-panel .ig-public-chat-pinned { padding: var(--bf-pad-sm) var(--bf-pad-md); } .ig-popup-public-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 0; -webkit-overflow-scrolling: touch; } .ig-popup-public-msg { display: flex; gap: 5px; align-items: flex-start; max-width: 100%; margin-top: 4px; } .ig-popup-public-msg:first-child { margin-top: 0; } .ig-popup-public-msg-avatar { flex-shrink: 0; text-decoration: none; } .ig-popup-public-msg-body { flex: 1; min-width: 0; } .ig-popup-public-msg-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; } .ig-popup-public-msg-name { font-weight: 700; font-size: 12px; color: var(--fb-text); text-decoration: none; } .ig-popup-public-msg-name:hover { color: var(--bf-brand); } .ig-popup-public-msg-time { font-size: 10px; color: var(--fb-muted); } .ig-popup-public-msg-bubble { display: inline-block; max-width: 100%; padding: 6px 11px; border-radius: var(--bf-msg-radius); border-bottom-left-radius: var(--bf-msg-tail); font-size: 13px; line-height: 1.38; word-break: break-word; white-space: pre-wrap; background: var(--bf-msg-recv-bg); border: 1px solid var(--bf-msg-recv-border); color: var(--fb-text); box-shadow: none; } .ig-popup-public-msg.is-mine .ig-popup-public-msg-bubble { background: var(--bf-msg-sent-bg); border-color: var(--bf-msg-sent-border); color: var(--bf-msg-sent-text); border-bottom-left-radius: var(--bf-msg-radius); border-bottom-right-radius: var(--bf-msg-tail); } .ig-popup-inbox-loading, .ig-popup-inbox-empty { padding: var(--bf-pad-3xl) var(--bf-pad-2xl); text-align: center; font-size: 13px; } .ig-popup-windows { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; pointer-events: none; flex-shrink: 0; min-width: 0; } .ig-popup-windows > * { pointer-events: auto; } @media (max-width: 1100px) { .ig-popup-inbox:not(.hidden) { max-height: 320px; width: min(288px, calc(100vw - 24px)); } } .ig-popup-window { width: 328px; height: 455px; background: var(--bf-card); border: 1px solid var(--fb-border); border-radius: var(--bf-radius-xl) var(--bf-radius-xl) 12px 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ig-popup-window.ig-popup-no-transition { transition: none !important; } .ig-popup-window.minimized { width: var(--ig-popup-bubble-size); height: var(--ig-popup-bubble-size); min-height: var(--ig-popup-bubble-size); border-radius: 50%; overflow: visible; border: 2px solid var(--bf-card); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--fb-border); position: relative; cursor: pointer; flex-shrink: 0; background: var(--bf-card); } .ig-popup-window.minimized.has-unread .ig-popup-bubble-unread { display: block; } .ig-popup-bubble-unread { display: none; position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bf-danger); border: 2px solid var(--bf-card); z-index: 3; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .ig-popup-window.minimized.is-online-user { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 2px rgba(34, 197, 94, 0.55); } .ig-popup-window.minimized:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(var(--bf-brand-rgb), 0.25); } .ig-popup-window.minimized .ig-popup-body, .ig-popup-window.minimized .ig-popup-form { display: none; } .ig-popup-window.minimized .ig-popup-header { position: absolute; inset: 0; padding: 0; margin: 0; border: none; background: transparent; width: auto; height: auto; border-radius: 50%; display: block; } .ig-popup-window.minimized .ig-popup-header-user { position: absolute; inset: 0; display: block; width: auto; height: auto; margin: 0; padding: 0; flex: none; min-width: 0; pointer-events: auto; } .ig-popup-window.minimized .ig-popup-header-meta, .ig-popup-window.minimized .ig-popup-minimize, .ig-popup-window.minimized .ig-popup-clear { display: none !important; } .ig-popup-window.minimized .ig-popup-header-user .avatar-wrap, .ig-popup-window.minimized .ig-popup-header-user > .ig-public-room-icon, .ig-popup-window.minimized .ig-popup-header-user > .ig-public-room-icon-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block !important; width: var(--ig-popup-bubble-avatar-size) !important; height: var(--ig-popup-bubble-avatar-size) !important; min-width: var(--ig-popup-bubble-avatar-size) !important; min-height: var(--ig-popup-bubble-avatar-size) !important; margin: 0; padding: 0; border-radius: 50%; overflow: hidden; line-height: 0; font-size: 0; } .ig-popup-window.minimized .ig-popup-header-user > .ig-public-room-icon, .ig-popup-window.minimized .ig-popup-header-user > .ig-public-room-icon-popup { display: flex !important; align-items: center; justify-content: center; font-size: 0.95rem !important; } .ig-popup-window.minimized .ig-popup-header-user .presence-dot { display: none !important; } .ig-popup-window.minimized .ig-popup-header-user .avatar-wrap > img, .ig-popup-window.minimized .ig-popup-header-user .avatar-wrap > .avatar-blogger { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; object-fit: cover; object-position: center center; border-radius: 50%; } .ig-popup-window.minimized .ig-popup-header-user .avatar-wrap > .avatar-blogger { display: flex !important; align-items: center; justify-content: center; font-size: 0.95rem; } .ig-popup-window.minimized .ig-popup-close { position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; font-size: 9px; background: var(--bf-card); border: 1px solid var(--fb-border); box-shadow: var(--bf-shadow-sm); opacity: 0; z-index: 2; transition: opacity 0.15s ease; } .ig-popup-window.minimized:hover .ig-popup-close { opacity: 1; } .ig-popup-window.minimized::after { content: attr(data-bubble-label); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) scale(0.95); background: var(--fb-text); color: var(--fb-card); font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: var(--bf-shadow-md); z-index: 4; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .ig-popup-window.minimized:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } .ig-popup-header { display: flex; align-items: center; gap: var(--bf-pad-sm); padding: 8px 12px; border-bottom: 1px solid var(--fb-border); background: var(--bf-card); cursor: pointer; user-select: none; flex-shrink: 0; } .ig-popup-header-user { display: flex; align-items: center; gap: 8px; color: var(--fb-text); text-decoration: none; flex: 1; min-width: 0; font-weight: 700; font-size: 13px; } .ig-popup-header-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .ig-popup-header-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } .ig-popup-header-presence { font-size: 11px; font-weight: 600; margin-top: 1px; } .ig-popup-header-presence.is-online { color: #22c55e; } .ig-popup-header-presence.is-offline { color: var(--fb-muted); } .ig-popup-btn { background: none; border: none; color: var(--fb-muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; } .ig-popup-btn:hover { background: var(--fb-hover); color: var(--fb-text); } .ig-popup-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 0; background: var(--fb-bg); min-height: 0; } html:not(.dark) .ig-popup-body { background: var(--bf-surface-muted); } .ig-popup-body .ig-msg { max-width: min(80%, 250px); margin-top: 3px; } .ig-popup-body .ig-msg.received { max-width: min(85%, 270px); } .ig-popup-body .ig-msg:has(.link-preview-card--dm), .ig-popup-body .ig-msg:has(.is-link-preview-only) { max-width: min(88%, 280px); } .ig-popup-body .ig-msg.received:has(.link-preview-card--dm), .ig-popup-body .ig-msg.received:has(.is-link-preview-only) { max-width: min(88%, 280px); } .ig-popup-body .ig-msg-avatar-slot { width: 24px; height: 24px; } .ig-popup-body .ig-msg-date { margin: 8px 0 4px; } .ig-popup-body .ig-msg:first-child { margin-top: 0; } .ig-popup-body .ig-msg.sent + .ig-msg.sent, .ig-popup-body .ig-msg.received + .ig-msg.received { margin-top: 2px; } .ig-popup-body .ig-msg.sent + .ig-msg.received, .ig-popup-body .ig-msg.received + .ig-msg.sent { margin-top: 6px; } .ig-popup-body .ig-msg-bubble { padding: 6px 11px; font-size: 13px; line-height: 1.38; } .ig-popup-body .ig-msg-status { margin-top: 2px; font-size: 10px; } .ig-popup-body .ig-msg-status .fa-check, .ig-popup-body .ig-msg-status .fa-check-double { font-size: 9px; } .ig-popup-form { padding: var(--bf-pad-sm) var(--bf-pad-md); border-top: 1px solid var(--fb-border); background: var(--bf-card); flex-shrink: 0; } .ig-popup-input { padding: 8px 14px; font-size: 13px; } .ig-popup-send { background: var(--bf-brand); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease; box-shadow: 0 2px 8px rgba(var(--bf-brand-rgb), 0.35); } .ig-popup-send:hover { background: var(--bf-brand-hover, #4f46e5); transform: scale(1.04); } .ig-popup-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* Instagram tarzı DM sayfası */ .theme-body:has(.ig-dm-shell) { overflow: hidden; height: 100dvh; } .app-shell.ig-dm-shell { display: flex; flex-direction: column; width: 100%; max-width: 1100px; margin: 0 auto; padding: 12px 16px 16px; gap: 0; align-items: stretch; min-height: calc(100dvh - 58px); height: calc(100dvh - 58px); max-height: calc(100dvh - 58px); overflow: hidden; box-sizing: border-box; } .app-shell.ig-dm-shell .main-column { width: 100%; max-width: none; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; } .app-shell.ig-dm-shell main { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; } .ig-dm { display: flex; flex: 1 1 0; width: 100%; max-width: 100%; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; background: var(--fb-card); border: 1px solid var(--fb-border); border-radius: var(--bf-radius-xl); box-shadow: var(--bf-shadow-sm); } .ig-inbox { width: 100%; max-width: 350px; flex: 0 0 350px; flex-shrink: 0; border-right: 1px solid var(--fb-border); display: flex; flex-direction: column; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; background: var(--fb-card); } .ig-inbox-header { display: flex; align-items: center; justify-content: space-between; padding: var(--bf-pad-2xl) var(--bf-pad-2xl); border-bottom: 1px solid var(--fb-border); } .ig-inbox-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ig-inbox-title { font-size: 16px; font-weight: 700; color: var(--fb-text); } .ig-inbox-subtitle { font-size: 12px; color: var(--fb-muted); font-weight: 500; } .ig-inbox-unread-hint { color: var(--bf-brand); font-weight: 700; } .ig-inbox-section-label { display: flex; align-items: center; gap: 8px; padding: 10px 20px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fb-muted); } .ig-inbox-section-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bf-brand); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0; } .ig-thread-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ig-thread-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--fb-input); color: var(--fb-muted); font-size: 11px; font-weight: 600; } .ig-thread-pill-live { color: #22c55e; background: rgba(34, 197, 94, 0.12); } .ig-thread-pill-live i { font-size: 7px; } .ig-thread-handle { font-size: 12px; color: var(--fb-muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-thread-unread-count { flex-shrink: 0; align-self: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bf-brand); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .ig-inbox-new { color: var(--fb-text); font-size: 1.25rem; padding: 4px; text-decoration: none; transition: color 0.15s; } .ig-inbox-new:hover { color: var(--bf-brand); } .ig-inbox-actions { display: inline-flex; align-items: center; gap: 2px; } .ig-inbox-actions .ig-inbox-new { border: none; background: transparent; cursor: pointer; } .ig-inbox-search { display: flex; align-items: center; gap: 10px; margin: 8px 16px 4px; padding: 8px 12px; background: var(--fb-input); border-radius: 8px; color: var(--fb-muted); } .ig-inbox-search input { flex: 1; border: none; background: transparent; font-size: 14px; color: var(--fb-text); outline: none; } .ig-inbox-search input::placeholder { color: var(--fb-muted); } .ig-thread-list { flex: 1; overflow-y: auto; min-height: 0; } .ig-thread { display: flex; align-items: center; gap: var(--bf-gap-sm); padding: var(--bf-pad-lg) var(--bf-pad-2xl); text-decoration: none; color: inherit; transition: background 0.15s; border-bottom: 1px solid transparent; } .ig-thread:hover { background: var(--fb-hover); } .ig-thread.active { background: var(--bf-brand-light); } .ig-thread.unread { background: var(--bf-brand-light); box-shadow: inset 3px 0 0 var(--bf-brand); } .ig-thread.unread:hover { background: var(--bf-brand-soft); } .ig-thread.unread.active { background: var(--bf-brand-light); } .ig-thread.unread .ig-thread-name { font-weight: 700; color: var(--bf-brand); } .ig-thread.unread .ig-thread-preview { color: var(--fb-text); font-weight: 500; } .ig-thread.hidden-by-search { display: none; } .ig-thread-public { border-bottom: 1px solid var(--fb-border); background: linear-gradient(135deg, var(--bf-brand-light) 0%, transparent 100%); } .ig-thread-public.active { background: var(--bf-brand-light); } .ig-thread-public .ig-thread-name { color: var(--bf-brand); } .ig-public-room-icon { width: 56px; height: 56px; min-width: 56px; min-height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(145deg, #818cf8 0%, #6366f1 55%, #4f46e5 100%); color: #fff !important; box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35); font-size: 22px; line-height: 1; } .ig-public-room-icon::before { color: #fff !important; line-height: 1; } .ig-public-room-icon-lg, .ig-public-room-icon-popup, .ig-public-room-icon-sm { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 16px; } .ig-public-room-header { cursor: default; text-decoration: none; color: inherit; } .ig-popup-window-public.minimized .ig-popup-header-user { position: absolute; inset: 0; display: block; } .ig-popup-thread-public .ig-public-room-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 16px; } .ig-chat-user .ig-public-room-icon, .ig-popup-header-user .ig-public-room-icon, .ig-thread-avatar-wrap .ig-public-room-icon { color: #fff !important; } .ig-group-room-icon { width: 56px; height: 56px; min-width: 56px; min-height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(145deg, #34d399 0%, #10b981 55%, #059669 100%); color: #fff !important; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35); font-size: 22px; line-height: 1; } .ig-group-room-icon::before { color: #fff !important; line-height: 1; } .ig-group-room-icon-lg, .ig-group-room-icon-sm { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 16px; } .ig-popup-header-user .ig-group-room-icon, .ig-popup-thread-group .ig-group-room-icon, .ig-thread-avatar-wrap .ig-group-room-icon { color: #fff !important; } .ig-popup-window.minimized .ig-popup-header-user > .ig-group-room-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex !important; align-items: center; justify-content: center; width: var(--ig-popup-bubble-avatar-size) !important; height: var(--ig-popup-bubble-avatar-size) !important; min-width: var(--ig-popup-bubble-avatar-size) !important; min-height: var(--ig-popup-bubble-avatar-size) !important; margin: 0; padding: 0; border-radius: 50%; overflow: hidden; font-size: 0.95rem !important; } .ig-popup-body[data-thread-type="group"] .ig-msg.received { max-width: min(88%, 420px); } .ig-popup-body[data-thread-type="group"] .ig-msg.received + .ig-msg.received .ig-msg-avatar-slot { visibility: visible; } .ig-popup-body[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-avatar-slot, .ig-popup-body[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-sender { visibility: hidden; } .ig-popup-body[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-sender { display: none; } .ig-popup-body[data-thread-type="group"] .ig-msg.received + .ig-msg.received:not(.ig-msg-same-sender) .ig-msg-bubble { border-radius: var(--bf-msg-radius); border-bottom-left-radius: var(--bf-msg-tail); } .ig-popup-body[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-bubble { border-top-left-radius: var(--bf-msg-tail); border-bottom-left-radius: var(--bf-msg-tail); } .ig-popup-body[data-thread-type="group"] .ig-msg.received .ig-msg-content { align-items: flex-start; } .ig-chat-error-banner { margin: 0; padding: 10px 16px; background: rgba(239, 68, 68, 0.1); border-bottom: 1px solid rgba(239, 68, 68, 0.25); color: #b91c1c; font-size: 13px; font-weight: 600; flex-shrink: 0; } html.dark .ig-chat-error-banner { background: rgba(239, 68, 68, 0.14); border-bottom-color: rgba(239, 68, 68, 0.35); color: #fca5a5; } .ig-thread-group .ig-thread-name { font-weight: 700; } .ig-group-room-header { cursor: default; text-decoration: none; color: inherit; } .ig-group-modal { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 16px; } .ig-group-modal.hidden { display: none; } .ig-group-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); } .ig-group-modal-panel { position: relative; width: min(100%, 440px); max-height: min(90vh, 640px); overflow: hidden; display: flex; flex-direction: column; background: var(--fb-card); border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); border: 1px solid var(--fb-border); } .ig-group-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--fb-border); } .ig-group-modal-header h2 { margin: 0; font-size: 1.05rem; font-weight: 800; } .ig-group-modal-close { border: none; background: transparent; color: var(--fb-muted); cursor: pointer; font-size: 1.1rem; padding: 4px; } .ig-group-modal-body { padding: 16px 18px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .ig-group-field { display: flex; flex-direction: column; gap: 6px; } .ig-group-label { font-size: 0.82rem; font-weight: 700; color: var(--fb-muted); } .ig-group-field input[type="text"] { width: 100%; border: 1px solid var(--fb-border); border-radius: 10px; padding: 10px 12px; background: var(--fb-input); color: var(--fb-text); font-size: 14px; } .ig-group-search-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--fb-input); border: 1px solid var(--fb-border); color: var(--fb-muted); } .ig-group-search-wrap input { flex: 1; border: none; background: transparent; color: var(--fb-text); font-size: 14px; outline: none; } .ig-new-message-at { color: var(--fb-muted); font-size: 14px; font-weight: 600; flex-shrink: 0; } .ig-new-message-link { border: none; background: transparent; padding: 0; cursor: pointer; font: inherit; } .ig-new-message-link:hover { text-decoration: underline; } .ig-group-search-results { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; } .ig-group-search-result { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: inherit; } .ig-group-search-result:hover { background: var(--fb-hover); } .ig-group-search-result.is-selected { opacity: 0.55; cursor: default; } .ig-group-search-result-copy { display: flex; flex-direction: column; min-width: 0; } .ig-group-search-result-title { font-weight: 700; font-size: 0.92rem; } .ig-group-search-result-subtitle { font-size: 0.78rem; color: var(--fb-muted); } .ig-group-selected-wrap { display: flex; flex-direction: column; gap: 8px; } .ig-group-selected-members { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; } .ig-group-selected-empty { font-size: 0.85rem; color: var(--fb-muted); } .ig-group-member-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; background: var(--bf-brand-light); border: 1px solid var(--bf-brand-soft); font-size: 0.82rem; font-weight: 600; } .ig-group-member-chip button { border: none; background: transparent; color: var(--fb-muted); cursor: pointer; padding: 0 2px; line-height: 1; } .ig-group-error { margin: 0; font-size: 0.85rem; color: #ef4444; } .ig-group-error.hidden { display: none; } .ig-group-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } .ig-group-btn-secondary, .ig-group-btn-primary { border-radius: 10px; padding: 10px 16px; font-size: 0.9rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; } .ig-group-btn-secondary { background: transparent; border-color: var(--fb-border); color: var(--fb-text); } .ig-group-btn-primary { background: var(--bf-brand); color: #fff; } .ig-group-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } body.ig-group-modal-open { overflow: hidden; } .ig-group-members-bar { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--fb-border); background: var(--fb-card); } .ig-group-members-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ig-group-members-bar-title { font-size: 0.82rem; font-weight: 800; color: var(--fb-text); } .ig-group-members-bar-count { font-size: 0.78rem; font-weight: 600; color: var(--fb-muted); } .ig-group-members-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 88px; overflow-y: auto; } .ig-group-member-chip-static { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--fb-input); border: 1px solid var(--fb-border); font-size: 0.8rem; font-weight: 600; color: var(--fb-text); text-decoration: none; } .ig-group-member-chip-static:hover { border-color: var(--bf-brand); color: var(--bf-brand); } .ig-group-members-add-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--bf-brand-soft); background: var(--bf-brand-light); color: var(--bf-brand); border-radius: 999px; padding: 6px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; } .ig-group-members-add-btn:hover { background: var(--bf-brand-soft); } .ig-group-existing-members .ig-group-member-chip { cursor: default; } .ig-group-existing-members .ig-group-member-chip button { display: none; } .ig-public-chat-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .ig-public-chat-pinned { flex-shrink: 0; padding: var(--bf-pad-sm) var(--bf-pad-lg); border-bottom: 1px solid var(--fb-border); background: linear-gradient(180deg, rgba(var(--bf-brand-rgb), 0.06) 0%, transparent 100%); } .ig-public-chat-pinned.is-empty { display: none; } .ig-public-chat-pinned-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bf-brand); } .ig-public-chat-pinned-label i { font-size: 10px; opacity: 0.85; } .ig-public-pinned-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--bf-radius-md); background: var(--fb-card); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); } .ig-public-pinned-item.is-jumpable { cursor: pointer; transition: border-color var(--bf-transition), background var(--bf-transition), box-shadow var(--bf-transition); } .ig-public-pinned-item.is-jumpable:hover { border-color: rgba(var(--bf-brand-rgb), 0.3); background: rgba(var(--bf-brand-rgb), 0.04); } .ig-public-pinned-item.is-jumpable:focus-visible { outline: 2px solid rgba(var(--bf-brand-rgb), 0.45); outline-offset: 2px; } .ig-public-pinned-item + .ig-public-pinned-item { margin-top: 6px; } html.dark .ig-public-pinned-item { background: var(--bf-hover); border-color: rgba(var(--bf-brand-rgb), 0.22); } .ig-public-pinned-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: var(--bf-radius-full); background: rgba(var(--bf-brand-rgb), 0.12); color: var(--bf-brand); font-size: 10px; margin-top: 1px; } .ig-public-pinned-content { flex: 1; min-width: 0; } .ig-public-pinned-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; } .ig-public-pinned-name { font-weight: 700; font-size: 12px; color: var(--fb-text); text-decoration: none; } .ig-public-pinned-name:hover { color: var(--bf-brand); } .ig-public-pinned-time { font-size: 10px; color: var(--fb-muted); } .ig-public-pinned-text { font-size: 14px; line-height: 1.45; color: var(--fb-text); word-break: break-word; } .ig-public-pinned-unpin { flex-shrink: 0; align-self: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--bf-radius-full); background: transparent; color: var(--fb-muted); cursor: pointer; transition: background var(--bf-transition), color var(--bf-transition); } .ig-public-pinned-unpin:hover { background: var(--bf-hover); color: var(--bf-danger); } .ig-public-msg.ig-public-msg-highlight, .ig-popup-public-msg.ig-public-msg-highlight { border-radius: var(--bf-radius-md); animation: ig-public-msg-highlight 2.1s ease; } @keyframes ig-public-msg-highlight { 0%, 100% { background: transparent; } 18%, 62% { background: rgba(var(--bf-brand-rgb), 0.11); } } .ig-public-chat-messages { gap: 0; background: radial-gradient(circle at 80% 0%, rgba(var(--bf-brand-rgb), 0.04) 0%, transparent 40%), var(--fb-bg); } html:not(.dark) .ig-public-chat-messages { background: radial-gradient(circle at 80% 0%, rgba(var(--bf-brand-rgb), 0.05) 0%, transparent 40%), var(--bf-surface-muted); } .ig-public-msg { display: flex; gap: 8px; align-items: flex-start; max-width: min(86%, 520px); margin-top: 6px; } .ig-public-msg:first-child { margin-top: 0; } .ig-public-msg-avatar { flex-shrink: 0; text-decoration: none; margin-top: 2px; } .ig-public-msg-body { flex: 1; min-width: 0; } .ig-public-msg-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; } .ig-public-msg-name { font-weight: 700; font-size: 13px; color: var(--fb-text); text-decoration: none; } .ig-public-msg-name:hover { color: var(--bf-brand); } .ig-public-msg-time { font-size: 11px; color: var(--fb-muted); } .ig-public-msg-row { display: flex; align-items: center; gap: 4px; max-width: 100%; } .ig-public-msg-row .ig-public-msg-bubble, .ig-public-msg-row .ig-popup-public-msg-bubble { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 56px); } .ig-public-msg-bubble { display: inline-block; max-width: 100%; padding: 6px 11px; border-radius: var(--bf-msg-radius); border-bottom-left-radius: var(--bf-msg-tail); font-size: 14px; line-height: 1.42; word-break: break-word; white-space: pre-wrap; background: var(--bf-msg-recv-bg); border: 1px solid var(--bf-msg-recv-border); color: var(--fb-text); box-shadow: none; } .ig-public-msg.is-mine .ig-public-msg-bubble { background: var(--bf-msg-sent-bg); border-color: var(--bf-msg-sent-border); color: var(--bf-msg-sent-text); border-bottom-left-radius: var(--bf-msg-radius); border-bottom-right-radius: var(--bf-msg-tail); } .ig-public-msg-actions, .ig-popup-public-msg .ig-public-msg-actions { display: flex; align-items: center; justify-content: center; gap: 2px; flex-shrink: 0; margin: 0; padding: 0; align-self: center; } .public-chat-pin-btn { min-width: 24px; height: 24px; padding: 0 4px; font-size: 11px; border: none; background: transparent; color: var(--fb-muted); cursor: pointer; opacity: 0.55; transition: opacity var(--bf-transition), transform var(--bf-transition-spring), color var(--bf-transition); } .ig-public-msg-row:hover .public-chat-pin-btn, .ig-public-msg-actions .public-chat-pin-btn:focus-visible, .public-chat-pin-btn.is-pinned { opacity: 1; color: var(--bf-brand); } .public-chat-pin-btn:hover { opacity: 1; transform: scale(1.06); color: var(--bf-brand); } .public-chat-like-btn { min-width: 24px; height: 24px; padding: 0 4px; font-size: 12px; opacity: 0.72; transition: opacity var(--bf-transition), transform var(--bf-transition-spring); } .ig-public-msg-row:hover .public-chat-like-btn, .ig-public-msg-actions .public-chat-like-btn:focus-visible, .public-chat-like-btn.liked { opacity: 1; } .public-chat-like-btn:hover { opacity: 1; transform: scale(1.06); } .ig-public-chat-welcome { margin: auto; text-align: center; padding: 24px; max-width: 320px; } .ig-public-chat-welcome h3 { margin: 12px 0 8px; font-size: 18px; font-weight: 700; } .ig-public-chat-welcome p { margin: 0; font-size: 14px; color: var(--fb-muted); line-height: 1.5; } .ig-thread-avatar-wrap { position: relative; flex-shrink: 0; } .ig-unread-dot { position: absolute; top: 0; right: 0; width: 11px; height: 11px; background: var(--bf-brand); border: 2px solid var(--fb-card); border-radius: 50%; z-index: 2; } .ig-thread-body { flex: 1; min-width: 0; } .ig-thread-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; } .ig-thread-name { font-size: 14px; font-weight: 600; color: var(--fb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-thread-time { font-size: 12px; color: var(--fb-muted); flex-shrink: 0; } .ig-thread-preview { font-size: 13px; color: var(--fb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-empty-inbox { padding: 40px 20px; text-align: center; } .ig-empty-inbox-compact { padding: 28px 20px 32px; } .ig-empty-inbox-compact i { display: block; font-size: 1.75rem; margin-bottom: 10px; opacity: 0.55; } .ig-empty-inbox-compact p { margin: 0 0 8px; font-size: 13px; color: var(--fb-muted); } .ig-chat { flex: 1 1 0; width: 100%; min-width: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; background: var(--fb-card); } .ig-chat-header { display: flex; align-items: center; gap: var(--bf-gap-sm); padding: var(--bf-pad-md) var(--bf-pad-lg); border-bottom: 1px solid var(--fb-border); flex-shrink: 0; } .ig-chat-back { display: none; color: var(--fb-text); font-size: 1.1rem; padding: 8px; text-decoration: none; } .ig-chat-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: var(--fb-text); } .ig-chat-user-meta { min-width: 0; } .ig-chat-name { font-weight: 700; font-size: 15px; line-height: 1.2; } .ig-chat-presence { font-size: 12px; font-weight: 600; line-height: 1.3; margin-top: 1px; } .ig-chat-presence.is-online { color: #22c55e; } .ig-chat-presence.is-offline { color: var(--fb-muted); } .ig-chat-handle { font-size: 12px; color: var(--fb-muted); margin-top: 1px; } .ig-chat-user .presence-dot, .ig-popup-header-user .presence-dot, .ig-chat-messages .presence-dot, .ig-popup-body .ig-msg-avatar .presence-dot { display: none !important; } .ig-thread-avatar-wrap .avatar-wrap, .ig-chat-user .avatar-wrap, .ig-popup-thread-item .avatar-wrap, .ig-popup-window:not(.minimized) .ig-popup-header-user .avatar-wrap { display: inline-block; flex-shrink: 0; } .ig-popup-window:not(.minimized) .ig-popup-header-user .avatar-wrap > img, .ig-popup-window:not(.minimized) .ig-popup-header-user .avatar-wrap > .avatar-blogger { position: static; object-fit: cover; flex-shrink: 0; } .ig-chat-action, .ig-chat-profile { color: var(--fb-text); font-size: 1.2rem; padding: 8px; text-decoration: none; background: none; border: none; cursor: pointer; border-radius: var(--bf-radius-md); transition: background var(--bf-transition), color var(--bf-transition); } .ig-chat-action:hover, .ig-chat-profile:hover { color: var(--bf-danger); background: var(--bf-hover); } .ig-chat-profile:hover { color: var(--bf-brand); } .ig-popup-clear:hover { color: var(--bf-danger) !important; } .ig-popup-add-members:hover { color: var(--bf-brand) !important; } .ig-chat-older-loader { display: none; align-items: center; justify-content: center; padding: 0.65rem 1rem; font-size: 0.78rem; color: var(--bf-text-muted); text-align: center; } .ig-chat-older-loader.is-loading { display: flex; color: var(--bf-brand); } .ig-chat-messages { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; padding: var(--bf-pad-lg) var(--bf-pad-lg); display: flex; flex-direction: column; gap: 0; background: var(--fb-bg); -webkit-overflow-scrolling: touch; } html:not(.dark) .ig-chat-messages { background: radial-gradient(circle at 20% 0%, rgba(var(--bf-brand-rgb), 0.04) 0%, transparent 42%), var(--bf-surface-muted); } .ig-msg { display: flex; max-width: min(72%, 400px); margin-top: 4px; } .ig-msg:first-child { margin-top: 0; } .ig-msg.sent + .ig-msg.sent, .ig-msg.received + .ig-msg.received { margin-top: 2px; } .ig-msg.sent + .ig-msg.received, .ig-msg.received + .ig-msg.sent { margin-top: 8px; } .ig-msg.sent { align-self: flex-end; justify-content: flex-end; flex-direction: column; align-items: flex-end; } .ig-msg.received { align-self: flex-start; max-width: min(78%, 420px); } .ig-msg-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; } .ig-msg.sent .ig-msg-row { justify-content: flex-end; } .ig-msg-content { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; max-width: 100%; } .ig-msg.received .ig-msg-content { align-items: flex-start; } .ig-msg-avatar-slot { flex-shrink: 0; width: 28px; height: 28px; } .ig-msg-avatar { display: inline-flex; text-decoration: none; } .ig-msg.received + .ig-msg.received .ig-msg-avatar-slot { visibility: hidden; } .ig-chat-messages[data-thread-type="group"] .ig-msg.received + .ig-msg.received .ig-msg-avatar-slot { visibility: visible; } .ig-chat-messages[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-avatar-slot, .ig-chat-messages[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-sender { visibility: hidden; } .ig-chat-messages[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-sender { display: none; } .ig-chat-messages[data-thread-type="group"] .ig-msg.received + .ig-msg.received:not(.ig-msg-same-sender) .ig-msg-bubble { border-radius: var(--bf-msg-radius); border-bottom-left-radius: var(--bf-msg-tail); } .ig-chat-messages[data-thread-type="group"] .ig-msg.received.ig-msg-same-sender .ig-msg-bubble { border-top-left-radius: var(--bf-msg-tail); border-bottom-left-radius: var(--bf-msg-tail); } .ig-msg-sender { font-size: 11px; font-weight: 700; line-height: 1.2; margin-bottom: 2px; padding: 0 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ig-msg-sender a { color: var(--bf-brand); text-decoration: none; } .ig-msg-sender a:hover { text-decoration: underline; } .ig-chat-messages[data-thread-type="group"] .ig-msg.received .ig-msg-content { align-items: flex-start; } .ig-chat-messages[data-thread-type="group"] .ig-msg.received { max-width: min(82%, 460px); } .ig-msg-time { margin-top: 2px; padding: 0 4px; font-size: 10px; font-weight: 500; line-height: 1.2; color: var(--fb-muted); white-space: nowrap; } .ig-msg-date { align-self: center; margin: 12px 0 8px; text-align: center; width: 100%; max-width: 100%; } .ig-msg-date span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--fb-card); border: 1px solid var(--fb-border); font-size: 11px; font-weight: 600; color: var(--fb-muted); letter-spacing: 0.01em; } .ig-msg.is-pending .ig-msg-bubble { opacity: 0.92; } .ig-public-msg[data-pending="1"] .ig-public-msg-bubble, .ig-popup-public-msg[data-pending="1"] .ig-popup-public-msg-bubble { opacity: 0.92; } .ig-msg-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 0 2px; font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--fb-muted); white-space: nowrap; } .ig-msg-status[data-read="1"] { color: var(--bf-brand); } .ig-msg-status .fa-check, .ig-msg-status .fa-check-double { font-size: 9px; } .ig-chat-presence.is-typing, .ig-popup-header-presence.is-typing { color: var(--bf-brand); } .ig-chat-status-typing:not(.hidden) { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; } .ig-typing-dots::after { content: '...'; } .ig-msg-bubble { padding: 5px 10px; border-radius: var(--bf-msg-radius); font-size: 13px; line-height: 1.38; word-break: break-word; white-space: pre-wrap; max-width: 100%; box-shadow: none; } .ig-msg.received .ig-msg-bubble { background: var(--bf-msg-recv-bg); border: 1px solid var(--bf-msg-recv-border); color: var(--fb-text); border-bottom-left-radius: var(--bf-msg-tail); } .ig-msg.sent .ig-msg-bubble { background: var(--bf-msg-sent-bg); color: var(--bf-msg-sent-text); border: 1px solid var(--bf-msg-sent-border); border-bottom-right-radius: var(--bf-msg-tail); } .ig-msg.sent + .ig-msg.sent .ig-msg-bubble { border-top-right-radius: var(--bf-msg-tail); border-bottom-right-radius: var(--bf-msg-tail); } .ig-msg.received + .ig-msg.received .ig-msg-bubble { border-top-left-radius: var(--bf-msg-tail); border-bottom-left-radius: var(--bf-msg-tail); } .ig-msg.sent + .ig-msg.received .ig-msg-bubble, .ig-msg.received + .ig-msg.sent .ig-msg-bubble { border-radius: var(--bf-msg-radius); } .ig-msg.sent + .ig-msg.received .ig-msg-bubble { border-bottom-left-radius: var(--bf-msg-tail); } .ig-msg.received + .ig-msg.sent .ig-msg-bubble { border-bottom-right-radius: var(--bf-msg-tail); } .ig-chat-compose { padding: var(--bf-pad-md) var(--bf-pad-lg); border-top: 1px solid var(--fb-border); flex-shrink: 0; background: var(--fb-card); } .chat-compose-bar { display: flex; align-items: flex-end; gap: 8px; width: 100%; } .chat-compose-emoji-btn { width: 36px; height: 36px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-full); background: var(--fb-input); color: var(--fb-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; transition: background var(--bf-transition), color var(--bf-transition), border-color var(--bf-transition); } .chat-compose-emoji-btn:hover { background: var(--bf-brand-light); color: var(--bf-brand); border-color: rgba(var(--bf-brand-rgb), 0.25); } .chat-compose-image-btn { width: 36px; height: 36px; border: 1px solid var(--fb-border); border-radius: var(--bf-radius-full); background: var(--fb-input); color: var(--fb-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; transition: background var(--bf-transition), color var(--bf-transition), border-color var(--bf-transition); } .chat-compose-image-btn:hover { background: var(--bf-brand-light); color: var(--bf-brand); border-color: rgba(var(--bf-brand-rgb), 0.25); } .chat-image-preview { position: relative; margin: 0 12px 8px; max-width: 180px; border-radius: var(--bf-radius-lg); overflow: hidden; border: 1px solid var(--bf-border); } .chat-image-preview img { display: block; width: 100%; max-height: 140px; object-fit: cover; } .chat-image-preview-clear { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chat-msg-image-link { display: block; margin-bottom: 4px; padding: 0; border: 0; background: transparent; cursor: zoom-in; line-height: 0; } .chat-msg-image { display: block; max-width: min(240px, 100%); max-height: 280px; border-radius: 12px; object-fit: cover; } .ig-msg-bubble .chat-msg-image-link:last-child, .ig-public-msg-bubble .chat-msg-image-link:last-child { margin-bottom: 0; } .ig-msg-bubble:has(.chat-msg-image):not(:has(p, span.mention, a:not(.chat-msg-image-link))) { padding: 4px; background: transparent; border: 0; box-shadow: none; } .ig-msg.sent .ig-msg-bubble:has(.chat-msg-image):not(:has(p, span.mention, a:not(.chat-msg-image-link))) { background: transparent; border: 0; } /* Mesaj link önizlemesi — Instagram DM tarzı (resim üstte, kompakt kart) */ .chat-link-preview { margin: 0 0 8px; padding: 0 12px; } .chat-link-preview .link-preview-card--dm { max-width: min(280px, 100%); } .ig-msg:has(.link-preview-card--dm), .ig-msg:has(.is-link-preview-only) { max-width: min(78%, 280px); } .ig-msg.received:has(.link-preview-card--dm), .ig-msg.received:has(.is-link-preview-only) { max-width: min(78%, 280px); } .ig-public-msg-row .ig-public-msg-bubble:has(.link-preview-card--dm), .ig-public-msg-row .ig-popup-public-msg-bubble:has(.link-preview-card--dm) { max-width: min(280px, calc(100% - 56px)); } .link-preview-card--dm, .chat-rich-content .link-preview-card--dm, .ig-public-pinned-text .link-preview-card--dm, .compose-link-preview .link-preview-card--dm { display: block; width: 100%; max-width: 280px; min-width: 0; margin-top: 6px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); background: #fff; box-shadow: none; overflow: hidden; text-decoration: none; color: #262626; transition: opacity 0.15s ease; } .chat-rich-content .link-preview-card--dm:first-child, .ig-public-pinned-text .link-preview-card--dm:first-child { margin-top: 0; } .link-preview-card--dm:hover, .link-preview-card--dm:focus-visible { opacity: 0.92; border-color: rgba(0, 0, 0, 0.14); box-shadow: none; outline: none; } .link-preview-card--dm .link-preview-desc { display: none; } .link-preview-card--dm .link-preview-image { display: block; width: 100%; aspect-ratio: 1.91 / 1; background: #efefef; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .link-preview-card--dm .link-preview-image img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; } .link-preview-card--dm .link-preview-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; background: #fff; } .link-preview-card--dm .link-preview-site { font-size: 10px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.25; color: #8e8e8e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-preview-card--dm .link-preview-title { font-size: 13px; font-weight: 600; line-height: 1.3; color: #262626; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-preview-card--dm:not(:has(.link-preview-image)) .link-preview-body { padding: 10px 12px; min-height: 52px; justify-content: center; } /* Sadece link: kart = balon */ .ig-msg-bubble.is-link-preview-only, .ig-public-msg-bubble.is-link-preview-only, .ig-popup-public-msg-bubble.is-link-preview-only { padding: 0; background: transparent !important; border-color: transparent !important; overflow: hidden; } .is-link-preview-only .link-preview-card--dm, .is-link-preview-only > .chat-rich-content > .link-preview-card--dm, .is-link-preview-only > .chat-rich-content .link-preview-card--dm:first-child { margin: 0; width: 100%; max-width: 100%; border-radius: var(--bf-msg-radius); } .ig-msg.received .ig-msg-bubble.is-link-preview-only { border-bottom-left-radius: var(--bf-msg-tail); } .ig-msg.sent .ig-msg-bubble.is-link-preview-only { border-bottom-right-radius: var(--bf-msg-tail); } .ig-msg-bubble.is-link-preview-only > .chat-rich-content { display: block; width: 100%; } /* Metin + link: kart balon içinde kenardan kenara */ .ig-msg-bubble:not(.is-link-preview-only) .link-preview-card--dm, .ig-public-msg-bubble:not(.is-link-preview-only) .link-preview-card--dm, .ig-popup-public-msg-bubble:not(.is-link-preview-only) .link-preview-card--dm { width: calc(100% + 20px); max-width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; margin-bottom: -3px; border-radius: 10px; } html.dark .link-preview-card--dm, html.dark .chat-rich-content .link-preview-card--dm, html.dark .ig-public-pinned-text .link-preview-card--dm { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: #f5f5f5; } html.dark .link-preview-card--dm .link-preview-body { background: #262626; } html.dark .link-preview-card--dm .link-preview-image { background: #1a1a1a; border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark .link-preview-card--dm .link-preview-site { color: #a8a8a8; } html.dark .link-preview-card--dm .link-preview-title { color: #f5f5f5; } .chat-compose-input-wrap { position: relative; flex: 1; min-width: 0; } .chat-emoji-picker { display: flex; flex-direction: column; background: var(--fb-card); border: 1px solid var(--fb-border); border-radius: 16px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18); overflow: hidden; box-sizing: border-box; } .x-emoji-picker { background: var(--fb-card); width: 352px; max-width: calc(100vw - 16px); height: 420px; max-height: min(420px, calc(100vh - 16px)); border-radius: 16px; box-shadow: 0 0 16px rgba(0, 0, 0, 0.16); } .fb-emoji-picker .chat-emoji-search-wrap, .x-emoji-picker .chat-emoji-search-wrap { flex: 0 0 auto; position: relative; padding: 10px 12px 8px; border-bottom: 1px solid var(--fb-border); background: var(--fb-card); } .chat-emoji-search-icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--fb-muted); pointer-events: none; } .fb-emoji-picker .chat-emoji-search, .x-emoji-picker .chat-emoji-search { width: 100%; height: 38px; padding: 0 14px 0 36px; border: 1px solid var(--fb-border); border-radius: 999px; background: var(--fb-input); color: var(--fb-text); font-size: 14px; outline: none; box-sizing: border-box; transition: border-color var(--bf-transition), box-shadow var(--bf-transition), background var(--bf-transition); } .fb-emoji-picker .chat-emoji-search::placeholder { color: var(--fb-muted); } .fb-emoji-picker .chat-emoji-search:focus { border-color: rgba(var(--bf-brand-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--bf-brand-rgb), 0.12); } .chat-emoji-search-empty { display: none; text-align: center; color: var(--fb-muted); padding: 28px 12px 16px; font-size: 13px; } .chat-emoji-search-empty:not([hidden]) { display: block; } .chat-emoji-picker-portal { position: fixed; z-index: 9999; pointer-events: auto; } .chat-emoji-picker-body { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; } .chat-emoji-panels { position: absolute; inset: 0; } .chat-emoji-panel { display: none; position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; padding: 8px 10px 10px; scrollbar-width: thin; box-sizing: border-box; } .chat-emoji-panel.is-active { display: block; } .chat-emoji-section-title { position: sticky; top: 0; z-index: 1; padding: 4px 2px 8px; font-size: 12px; font-weight: 700; color: var(--fb-muted); background: var(--fb-card); letter-spacing: 0.01em; } .x-emoji-picker .chat-emoji-section-title { display: none; } .chat-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; } .x-emoji-picker .chat-emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; padding: 4px 6px 8px; } .chat-emoji-grid-recent { margin-bottom: 4px; } .chat-emoji-tabs { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-top: 1px solid var(--fb-border); background: var(--fb-input); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 0 0 auto; width: 100%; min-width: 0; box-sizing: border-box; } .x-emoji-picker .chat-emoji-tabs { justify-content: stretch; gap: 0; padding: 4px 4px 6px; background: var(--fb-card); overflow: hidden; } .chat-emoji-tabs::-webkit-scrollbar { display: none; } .chat-emoji-tab { width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: var(--bf-radius-md); background: transparent; color: var(--fb-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: background var(--bf-transition), color var(--bf-transition), transform var(--bf-transition-spring); } .x-emoji-picker .chat-emoji-tab { flex: 1 1 0; min-width: 0; width: auto; height: 32px; border-radius: 999px; color: var(--fb-muted); font-size: 14px; background: transparent; transition: color var(--bf-transition), background var(--bf-transition); padding: 0; } .x-emoji-picker .chat-emoji-tab i { display: block; font-size: 14px; line-height: 1; pointer-events: none; } .x-emoji-picker .chat-emoji-tab:hover { background: var(--fb-hover); color: var(--fb-text); } .x-emoji-picker .chat-emoji-tab.is-active { color: var(--bf-brand); background: transparent; } .chat-emoji-tab:hover { background: var(--fb-hover); color: var(--fb-text); } .chat-emoji-tab.is-active { color: var(--bf-brand); background: var(--bf-brand-light); } .x-emoji-picker .chat-emoji-item { border: none; background: transparent; border-radius: 8px; font-size: 1.35rem; line-height: 1; width: 100%; height: 40px; min-height: 40px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--bf-transition); } .x-emoji-picker .chat-emoji-item:hover { background: var(--fb-hover); transform: none; } .chat-emoji-item { border: none; background: transparent; border-radius: var(--bf-radius-sm); font-size: 1.35rem; line-height: 1; width: 100%; height: 36px; min-height: 36px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--bf-transition), transform var(--bf-transition-spring); } .chat-emoji-item:hover { background: var(--fb-hover); transform: scale(1.08); } .fb-emoji-picker-img { width: 28px; height: 28px; display: block; pointer-events: none; object-fit: contain; } .x-emoji-picker .fb-emoji-picker-img { width: 32px; height: 32px; } .x-emoji-picker .fb-emoji-picker-img.fb-emoji-flag { width: 40px; height: 28px; } .fb-emoji-tab-icon { width: 22px; height: 22px; display: block; pointer-events: none; } /* Sistem / platform emojileri (Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji…) */ .sk-system-emoji, .chat-emoji-item { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", "EmojiOne Color", "Twemoji Mozilla", sans-serif; } .sk-system-emoji { display: inline; font-style: normal; font-weight: normal; line-height: 1; vertical-align: baseline; } /* Eski Twemoji img — sistem modunda genelde metne çevrilir; img kalırsa sade göster */ .fb-emoji-img { display: inline-block; vertical-align: -0.18em; width: 1.28em; height: 1.28em; margin: 0 0.02em; object-fit: contain; pointer-events: none; } .fb-post-content .fb-emoji-img, .fb-comment-text .fb-emoji-img, .chat-rich-content .fb-emoji-img { vertical-align: -0.2em; } .fb-emoji-img.fb-emoji-flag { width: 28px; height: 19px; vertical-align: middle; object-fit: contain; object-position: center; border-radius: 2px; box-shadow: none; } .fb-post-content .fb-emoji-img.fb-emoji-flag, .fb-comment-text .fb-emoji-img.fb-emoji-flag, .chat-rich-content .fb-emoji-img.fb-emoji-flag { vertical-align: middle; } .fb-emoji-picker-img.fb-emoji-flag { width: 38px; height: 26px; object-fit: contain; border-radius: 2px; } .chat-rich-content { white-space: pre-wrap; word-break: break-word; line-height: 1.45; } .chat-rich-content .mention-link, .chat-rich-content .hashtag-link { font-weight: 600; text-decoration: none; } .chat-rich-content .mention-link:hover, .chat-rich-content .hashtag-link:hover { text-decoration: underline; } .ig-public-chat-messages .chat-rich-content .mention-link, .ig-public-chat-messages .chat-rich-content .hashtag-link, .ig-popup-public-body .chat-rich-content .mention-link, .ig-popup-public-body .chat-rich-content .hashtag-link { color: var(--bf-brand); font-weight: 600; } .ig-public-chat-messages .chat-rich-content .mention-link:hover, .ig-public-chat-messages .chat-rich-content .hashtag-link:hover, .ig-popup-public-body .chat-rich-content .mention-link:hover, .ig-popup-public-body .chat-rich-content .hashtag-link:hover { color: var(--bf-brand-hover); } .ig-public-msg.is-mine .chat-rich-content .mention-link, .ig-public-msg.is-mine .chat-rich-content .hashtag-link, .ig-popup-public-msg.is-mine .chat-rich-content .mention-link, .ig-popup-public-msg.is-mine .chat-rich-content .hashtag-link, .ig-msg.sent .chat-rich-content .mention-link, .ig-msg.sent .chat-rich-content .hashtag-link { color: var(--bf-brand); text-decoration: none; font-weight: 600; } .ig-public-msg.is-mine .chat-rich-content .mention-link:hover, .ig-public-msg.is-mine .chat-rich-content .hashtag-link:hover, .ig-popup-public-msg.is-mine .chat-rich-content .mention-link:hover, .ig-popup-public-msg.is-mine .chat-rich-content .hashtag-link:hover, .ig-msg.sent .chat-rich-content .mention-link:hover, .ig-msg.sent .chat-rich-content .hashtag-link:hover { color: var(--bf-brand-hover); text-decoration: underline; text-underline-offset: 2px; } .ig-popup-form .chat-compose-bar { width: 100%; } .chat-compose-input, .ig-chat-input, .ig-popup-input { width: 100%; border: 1px solid var(--fb-border); border-radius: 6px; padding: 10px 16px; font-size: 14px; background: var(--fb-input); color: var(--fb-text); resize: none; overflow-y: hidden; min-height: 42px; max-height: 132px; line-height: 1.35; box-sizing: border-box; font-family: inherit; } .chat-compose-input:focus, .ig-chat-input:focus, .ig-popup-input:focus { outline: none; border-color: var(--bf-brand); background: var(--fb-card); } .ig-chat-compose .chat-compose-bar, .ig-popup-form .chat-compose-bar { align-items: flex-end; gap: 8px; } .ig-chat-compose .chat-compose-emoji-btn { width: 36px; height: 36px; margin: 0; } .ig-popup-form .chat-compose-emoji-btn { width: 32px; height: 32px; margin: 0; font-size: 0.92rem; } .ig-chat-compose .chat-compose-input-wrap, .ig-popup-form .chat-compose-input-wrap { flex: 1; min-width: 0; } .ig-chat-compose textarea.chat-compose-input, .ig-chat-compose .ig-chat-input, .ig-popup-form textarea.chat-compose-input, .ig-popup-form .ig-popup-input { width: 100%; display: block; min-height: 34px; max-height: 120px; padding: 7px 11px; line-height: 19px; font-size: 13px; border-radius: 6px; resize: none; overflow-y: hidden; box-sizing: border-box; vertical-align: top; } .ig-chat-compose .ig-chat-send { height: 40px; min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; line-height: 1; align-self: flex-end; } .ig-popup-form .ig-popup-send { width: 36px; height: 36px; min-height: 36px; margin: 0; align-self: flex-end; font-size: 0.9rem; } .ig-chat-send { background: none; border: none; color: var(--bf-brand); font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 4px; white-space: nowrap; } .ig-chat-send:hover { color: var(--bf-brand-hover); } .ig-chat-send:disabled { opacity: 0.5; cursor: not-allowed; } .ig-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; color: var(--fb-muted); } .ig-chat-empty-icon { width: 96px; height: 96px; border: 2px solid var(--fb-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin-bottom: 20px; color: var(--fb-text); } .ig-chat-empty h2 { margin: 0 0 8px; font-size: 20px; font-weight: 300; color: var(--fb-text); } .ig-chat-empty p { margin: 0 0 20px; font-size: 14px; max-width: 320px; } .ig-chat-empty-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 420px; } .ig-chat-empty-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--fb-border); background: var(--fb-card); text-decoration: none; color: inherit; text-align: left; width: 100%; cursor: pointer; font: inherit; transition: border-color 0.15s, background 0.15s, transform 0.15s; } button.ig-chat-empty-card { appearance: none; } .ig-chat-empty-card:hover { border-color: var(--bf-brand); background: var(--bf-brand-light); transform: translateY(-1px); } .ig-chat-empty-card-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bf-brand-light); color: var(--bf-brand); font-size: 18px; } .ig-chat-empty-card-icon.ig-public-room-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 17px; } .ig-chat-empty-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ig-chat-empty-card-text strong { font-size: 14px; color: var(--fb-text); } .ig-chat-empty-card-text span { font-size: 12px; color: var(--fb-muted); } @media (max-width: 520px) { .ig-chat-empty-actions { grid-template-columns: 1fr; max-width: 280px; } } @media (min-width: 768px) { .ig-inbox { width: 350px; } } @media (min-width: 900px) and (max-width: 1100px) { .app-shell.ig-dm-shell .ig-inbox { flex: 0 0 300px; width: 300px; max-width: 300px; } } @media (max-width: 899px) { .app-shell.ig-dm-shell { padding: 0; min-height: calc(100dvh - 58px); height: calc(100dvh - 58px); max-height: calc(100dvh - 58px); overflow: hidden; max-width: none; } .app-shell.ig-dm-shell .main-column { height: 100%; max-height: 100%; flex: 1; } .ig-dm { border-radius: 0; border-left: none; border-right: none; box-shadow: none; } .app-shell.ig-dm-shell:not(.ig-chat-open) .ig-inbox { padding-bottom: env(safe-area-inset-bottom); } } @media (max-width: 767px) { .ig-inbox { flex: 1 1 100%; max-width: none; width: 100%; } .ig-inbox-hidden-mobile { display: none; } .ig-chat { display: none; } .ig-chat.ig-chat-active { display: flex; flex-direction: column; position: relative; z-index: 2; flex: 1; width: 100%; } .ig-chat-back { display: block; } .ig-chat-compose { flex-shrink: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--fb-card); box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08); } html.dark .ig-chat-compose { box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28); } } /* Eski tam sayfa mesaj layout (yedek) */ .messages-layout { display: flex; min-height: 480px; max-height: 70vh; padding: 0; overflow: hidden; } .messages-inbox { width: 280px; flex-shrink: 0; border-right: 1px solid var(--fb-border); overflow-y: auto; } .messages-inbox-header { display: flex; justify-content: space-between; align-items: center; padding: var(--bf-pad-lg) var(--bf-pad-2xl); font-weight: 700; border-bottom: 1px solid var(--fb-border); } .messages-empty, .messages-chat-placeholder { padding: 32px var(--bf-pad-2xl); text-align: center; } .msg-thread-row { display: flex; align-items: center; gap: var(--bf-pad-md); padding: var(--bf-pad-lg) var(--bf-pad-2xl); text-decoration: none; color: inherit; border-bottom: 1px solid var(--fb-border); transition: background 0.15s; } .msg-thread-row:hover, .msg-thread-row.active { background: var(--fb-hover); } .msg-thread-info { flex: 1; min-width: 0; } .msg-thread-name { font-weight: 600; font-size: 14px; color: var(--fb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-thread-sub { font-size: 11px; color: var(--fb-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-thread-preview { font-size: 13px; color: var(--fb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .msg-unread-badge { background: var(--bf-brand); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .messages-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; } .messages-chat-header { display: flex; align-items: center; gap: var(--bf-pad-md); padding: var(--bf-pad-lg) var(--bf-pad-2xl); border-bottom: 1px solid var(--fb-border); } .messages-chat-user { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fb-text); } .messages-back { color: var(--bf-brand); padding: 8px; text-decoration: none; } .messages-chat-body { flex: 1; overflow-y: auto; padding: var(--bf-pad-2xl); display: flex; flex-direction: column; gap: 8px; background: var(--fb-input); } html:not(.dark) .messages-chat-body { background: var(--bf-surface-muted); } .msg-bubble-wrap { display: flex; gap: 8px; align-items: flex-end; max-width: 80%; } .msg-bubble-wrap.mine { align-self: flex-end; flex-direction: row-reverse; } .msg-bubble-wrap.theirs { align-self: flex-start; } .msg-bubble { background: var(--bf-msg-recv-bg); border: 1px solid var(--bf-msg-recv-border); border-radius: var(--bf-msg-radius); border-bottom-left-radius: var(--bf-msg-tail); padding: 5px 10px; box-shadow: none; } .msg-bubble-wrap.mine .msg-bubble { background: var(--bf-msg-sent-bg); border-color: var(--bf-msg-sent-border); color: var(--bf-msg-sent-text); border-bottom-left-radius: var(--bf-msg-radius); border-bottom-right-radius: var(--bf-msg-tail); } .msg-bubble-wrap.mine .msg-bubble-time { color: var(--fb-muted); } .msg-bubble-text { font-size: 13px; line-height: 1.38; white-space: pre-wrap; word-break: break-word; } .msg-bubble-time { font-size: 11px; color: var(--fb-muted); margin-top: 4px; text-align: right; } .messages-chat-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fb-border); } .messages-input { flex: 1; border: 1px solid var(--fb-border); border-radius: 20px; padding: 10px 16px; font-size: 14px; background: var(--fb-card); color: var(--fb-text); } .messages-input:focus { outline: none; border-color: var(--bf-brand); box-shadow: 0 0 0 2px var(--bf-brand-soft); } @media (max-width: 768px) { .messages-layout { flex-direction: column; max-height: none; min-height: calc(100vh - 120px); } .messages-inbox { width: 100%; border-right: none; border-bottom: 1px solid var(--fb-border); max-height: 240px; } .messages-inbox-hidden-mobile { display: none; } .messages-chat { min-height: 400px; } .messages-chat:not(.messages-chat-active) { display: none; } .messages-chat-active { display: flex; } } /* Modern dokunuşlar */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .feed-list > .fb-post { animation: none; } } ::selection { background: rgba(var(--bf-brand-rgb), 0.25); color: var(--bf-text); } * { scrollbar-width: thin; scrollbar-color: var(--bf-border) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: var(--bf-border); border-radius: var(--bf-radius-full); } *::-webkit-scrollbar-thumb:hover { background: var(--bf-muted); } /* Keşfet — sekme tabanlı hub */ .kesif-hub { display: flex; flex-direction: column; gap: 14px; } .kesif-hub-bar { display: flex; align-items: center; gap: 12px; } .kesif-hub-bar h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--fb-text); flex-shrink: 0; } .kesif-hub-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 42px; border-radius: var(--bf-radius-full); border: 1px solid var(--bf-border); background: var(--fb-card); } .kesif-hub-search:focus-within { border-color: rgba(var(--bf-brand-rgb), 0.35); box-shadow: 0 0 0 3px var(--bf-brand-soft); } .kesif-hub-search i { color: var(--fb-muted); font-size: 14px; } .kesif-hub-search .theme-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; font-size: 14px; } .kesif-hub-search .theme-input:focus { outline: none; box-shadow: none; } .kesif-hub-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: var(--bf-radius-lg); background: var(--fb-input); border: 1px solid var(--bf-border); } .kesif-hub-tab { border: none; background: transparent; color: var(--fb-muted); font-size: 13px; font-weight: 700; font-family: inherit; padding: 10px 12px; border-radius: var(--bf-radius-md); cursor: pointer; transition: background var(--bf-transition), color var(--bf-transition), box-shadow var(--bf-transition); } .kesif-hub-tab:hover { color: var(--fb-text); background: var(--fb-hover); } .kesif-hub-tab.is-active { color: var(--fb-text); background: var(--fb-card); box-shadow: var(--bf-shadow-sm); } .kesif-hub-panels { min-height: 200px; } .kesif-hub-panel { display: none; } .kesif-hub-panel.is-active { display: block; animation: kesif-panel-in 0.22s ease; } @keyframes kesif-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .kesif-hub-empty { padding: 36px 20px; text-align: center; border-radius: var(--bf-radius-xl); border: 1px dashed var(--bf-border); background: var(--fb-card); } .kesif-hub-empty h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; } .kesif-hub-empty p { margin: 0 0 14px; font-size: 14px; color: var(--fb-muted); line-height: 1.45; } .kesif-hub-empty--compact { padding: 24px 18px; } .kesif-spotlight { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; margin-bottom: 14px; border-radius: var(--bf-radius-xl); border: 1px solid var(--bf-border); background: var(--fb-card); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--bf-shadow-sm); transition: box-shadow var(--bf-transition), transform var(--bf-transition-spring); } .kesif-spotlight:hover { box-shadow: var(--bf-shadow-md); transform: translateY(-2px); } .kesif-spotlight--text-only { grid-template-columns: 1fr; } .kesif-spotlight-media { position: relative; min-height: 180px; background: var(--bf-surface-muted); } .kesif-spotlight-media img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; } .kesif-spotlight-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; background: rgba(0, 0, 0, 0.28); } .kesif-spotlight-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; } .kesif-spotlight-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-brand); } .kesif-spotlight-body p { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--fb-text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .kesif-spotlight-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; } .kesif-spotlight-author { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--fb-muted); } .kesif-spotlight-avatar, .kesif-spotlight-avatar img, .kesif-spotlight-avatar .avatar-blogger { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; font-size: 0.75rem; } .kesif-spotlight-stats { display: inline-flex; gap: 10px; font-size: 12px; font-weight: 700; color: var(--fb-muted); } .kesif-spotlight-stats span { display: inline-flex; align-items: center; gap: 4px; } .kesif-masonry { column-count: 2; column-gap: 12px; } .kesif-pin { display: block; break-inside: avoid; margin: 0 0 12px; border-radius: var(--bf-radius-lg); border: 1px solid var(--bf-border); background: var(--fb-card); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--bf-shadow-sm); transition: transform var(--bf-transition-spring), box-shadow var(--bf-transition); } .kesif-pin:hover { transform: translateY(-2px); box-shadow: var(--bf-shadow-md); } .kesif-pin-cover { position: relative; background: var(--bf-surface-muted); } .kesif-pin-cover img { width: 100%; display: block; object-fit: cover; } .kesif-pin-play { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; } .kesif-pin-info { padding: 12px; } .kesif-pin-info p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--fb-text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .kesif-pin-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; } .kesif-pin-user { color: var(--bf-brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kesif-pin-stats { display: inline-flex; gap: 8px; color: var(--fb-muted); flex-shrink: 0; } .kesif-pin-stats span { display: inline-flex; align-items: center; gap: 3px; } .kesif-suggestions-root.is-updating { opacity: 0.55; transition: opacity 0.18s ease; } .kesif-suggestions-swap { animation: kesif-suggestions-in 0.28s ease; } @keyframes kesif-suggestions-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .kesif-people-showcase { display: flex; flex-direction: column; gap: 18px; } .kesif-people-showcase .fb-card { margin-bottom: 0; } .kesif-people-showcase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px; border-radius: var(--bf-radius-2xl); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(var(--bf-brand-rgb), 0.16), transparent 58%), var(--fb-card); box-shadow: var(--bf-shadow-sm); } .kesif-people-showcase-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 10px; border-radius: var(--bf-radius-full); background: rgba(var(--bf-brand-rgb), 0.1); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-brand); } .kesif-people-showcase-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fb-text); line-height: 1.15; } .kesif-people-showcase-desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fb-muted); } .kesif-people-showcase-stat { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 10px 12px; border-radius: var(--bf-radius-xl); background: rgba(var(--bf-brand-rgb), 0.08); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); } .kesif-people-showcase-stat-value { font-size: 18px; font-weight: 900; line-height: 1; color: var(--bf-brand); font-variant-numeric: tabular-nums; } .kesif-people-showcase-stat-label { margin-top: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-muted); } .kesif-people-hero { padding: 0; overflow: hidden; border-color: rgba(var(--bf-brand-rgb), 0.2); background: linear-gradient(135deg, rgba(var(--bf-brand-rgb), 0.08), transparent 55%), var(--fb-card); } .kesif-people-panel-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fb-muted); } .kesif-people-list { padding: 6px 0; overflow: hidden; } .kesif-people-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bf-border); transition: background var(--bf-transition); } .kesif-people-item:last-child { border-bottom: none; } .kesif-people-item:hover { background: var(--bf-brand-light); } .kesif-people-item.is-following-user { background: rgba(var(--bf-brand-rgb), 0.04); } .kesif-people-item.is-following-user:hover { background: rgba(var(--bf-brand-rgb), 0.08); } .kesif-people-hero .kesif-people-item { padding: 16px 18px; border-bottom: none; } .kesif-people-item-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; } .kesif-people-item-avatar, .kesif-people-item-avatar img, .kesif-people-item-avatar .avatar-blogger { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .kesif-people-item--hero .kesif-people-item-avatar, .kesif-people-item--hero .kesif-people-item-avatar img, .kesif-people-item--hero .kesif-people-item-avatar .avatar-blogger { width: 56px; height: 56px; } .kesif-people-item-avatar .avatar-wrap { width: 100%; height: 100%; display: block; position: relative; border-radius: 50%; overflow: visible; } .kesif-people-item-avatar .avatar-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .kesif-people-item-avatar .avatar-wrap .avatar-blogger, .kesif-people-item-avatar .avatar-blogger { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; } .kesif-people-item--hero .kesif-people-item-avatar .avatar-blogger { font-size: 1.35rem; } .kesif-people-item-copy { flex: 1; min-width: 0; } .kesif-people-item-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 800; color: var(--fb-text); line-height: 1.3; } .kesif-people-item--hero .kesif-people-item-name { font-size: 15px; } .kesif-people-item-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--bf-radius-full); background: var(--fb-input); color: var(--fb-muted); white-space: nowrap; } .kesif-people-item-pill.is-brand { background: rgba(var(--bf-brand-rgb), 0.12); color: var(--bf-brand); } .kesif-people-item-pill.is-green { background: rgba(34, 197, 94, 0.12); color: #16a34a; } .kesif-people-item-handle { margin-top: 2px; font-size: 12px; color: var(--fb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kesif-people-item-bio { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--fb-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kesif-people-item .kesif-people-follow-btn { flex-shrink: 0; min-width: 0; } .kesif-people-item-arrow { flex-shrink: 0; color: var(--fb-muted); font-size: 12px; opacity: 0.5; } .kesif-people-follow-btn:disabled { opacity: 0.72; cursor: wait; } .kesif-tags-showcase { display: flex; flex-direction: column; gap: 18px; } .kesif-tags-showcase .fb-card { margin-bottom: 0; } .kesif-tags-showcase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px; border-radius: var(--bf-radius-2xl); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(var(--bf-brand-rgb), 0.16), transparent 58%), var(--fb-card); box-shadow: var(--bf-shadow-sm); } .kesif-tags-showcase-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 10px; border-radius: var(--bf-radius-full); background: rgba(var(--bf-brand-rgb), 0.1); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-brand); } .kesif-tags-showcase-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fb-text); line-height: 1.15; } .kesif-tags-showcase-desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fb-muted); } .kesif-tags-showcase-stat { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 10px 12px; border-radius: var(--bf-radius-xl); background: rgba(var(--bf-brand-rgb), 0.08); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); } .kesif-tags-showcase-stat-value { font-size: 18px; font-weight: 900; line-height: 1; color: var(--bf-brand); font-variant-numeric: tabular-nums; } .kesif-tags-showcase-stat-label { margin-top: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-muted); } .kesif-blogs-showcase { display: flex; flex-direction: column; gap: 18px; } .kesif-blogs-showcase .fb-card { margin-bottom: 0; } .kesif-blogs-showcase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px; border-radius: var(--bf-radius-2xl); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(var(--bf-brand-rgb), 0.14), transparent 58%), var(--fb-card); box-shadow: var(--bf-shadow-sm); } .kesif-blogs-showcase-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 10px; border-radius: var(--bf-radius-full); background: rgba(var(--bf-brand-rgb), 0.1); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-brand); } .kesif-blogs-showcase-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fb-text); line-height: 1.15; } .kesif-blogs-showcase-desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fb-muted); } .kesif-blogs-showcase-stat { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 10px 12px; border-radius: var(--bf-radius-xl); background: rgba(var(--bf-brand-rgb), 0.08); border: 1px solid rgba(var(--bf-brand-rgb), 0.14); } .kesif-blogs-showcase-stat-value { font-size: 18px; font-weight: 900; line-height: 1; color: var(--bf-brand); font-variant-numeric: tabular-nums; } .kesif-blogs-showcase-stat-label { margin-top: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fb-muted); } .kesif-blogs-panel-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fb-muted); } .kesif-blogs-list .kesif-blog-item + .kesif-blog-item { border-top: 1px solid var(--bf-border); } .kesif-blog-item { display: flex; align-items: stretch; gap: 12px; padding: 14px 16px; } .kesif-blog-item--hero { padding: 16px 18px; } .kesif-blog-item-main { flex: 1; min-width: 0; display: flex; gap: 12px; text-decoration: none; color: inherit; } /* Keşfet blog görseli = blog profil sayfası ile aynı sistem */ .kesif-blog-item-icon, .kesif-blog-item-avatar { flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: var(--bf-radius-sm); border: 1px solid var(--fb-border); display: inline-flex; align-items: center; justify-content: center; background: var(--bf-brand-soft); color: var(--bf-brand); font-size: 1.1rem; overflow: hidden; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); } /* Site simgesi (favicon) — profil sayfasındaki blog-profile-page-favicon gibi */ .kesif-blog-item-avatar.kesif-blog-item-favicon { background: var(--fb-card); } .kesif-blog-item-avatar-img, .kesif-blog-item-avatar > .blog-avatar-img, .kesif-blog-item-avatar > .blog-favicon-img, .kesif-blog-item-avatar > .blog-favicon-fallback { width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; display: block; box-sizing: border-box; } /* Yüklenen fotoğraf — blog-profile-page-avatar ile aynı */ .kesif-blog-item-avatar:not(.kesif-blog-item-favicon) > .blog-avatar-img { object-fit: cover; border-radius: var(--bf-radius-sm); padding: 0; background: transparent; } /* Site simgesi — global .blog-favicon-img ile aynı mantık */ .kesif-blog-item-avatar > .blog-favicon-img, .kesif-blog-item-avatar.kesif-blog-item-favicon > .blog-favicon-img { object-fit: contain; border-radius: var(--bf-radius-sm); background: #fff; padding: 4px; } .kesif-blog-item-avatar > .blog-favicon-fallback { display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--bf-radius-sm); font-size: 1rem; background: var(--bf-brand-soft); color: var(--bf-brand); } .kesif-blog-item--hero .kesif-blog-item-icon, .kesif-blog-item--hero .kesif-blog-item-avatar { width: 52px; height: 52px; min-width: 52px; min-height: 52px; font-size: 1.25rem; } .kesif-blog-item--hero .kesif-blog-item-avatar-img, .kesif-blog-item--hero .kesif-blog-item-avatar > .blog-avatar-img, .kesif-blog-item--hero .kesif-blog-item-avatar > .blog-favicon-img, .kesif-blog-item--hero .kesif-blog-item-avatar > .blog-favicon-fallback { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; } .kesif-blog-item--hero .kesif-blog-item-avatar > .blog-favicon-img { padding: 5px; } .kesif-blog-item-copy { min-width: 0; display: grid; gap: 4px; } .kesif-blog-item-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--fb-text); line-height: 1.25; } .kesif-blog-item--hero .kesif-blog-item-name { font-size: 17px; } .kesif-blog-item-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--bf-radius-full); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bf-border); color: var(--fb-muted); } .kesif-blog-item-pill.is-brand { background: rgba(var(--bf-brand-rgb), 0.12); color: var(--bf-brand); } .kesif-blog-item-handle, .kesif-blog-item-meta { font-size: 12px; color: var(--fb-muted); line-height: 1.4; } .kesif-blog-item-latest { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--fb-text); opacity: 0.88; } .kesif-blog-item .blog-profile-follow-btn, .kesif-blog-item .kesif-blog-item-join { align-self: center; flex-shrink: 0; } .kesif-blog-item-manage { align-self: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--bf-radius-full); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bf-border); color: var(--fb-muted); text-decoration: none; transition: color var(--bf-transition), border-color var(--bf-transition), background var(--bf-transition); } .kesif-blog-item-manage:hover { color: var(--bf-brand); border-color: rgba(var(--bf-brand-rgb), 0.3); background: rgba(var(--bf-brand-rgb), 0.06); } .kesif-tags-panel-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fb-muted); } .kesif-tags-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; } .kesif-tags-podium-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: var(--bf-radius-xl); border: 1px solid var(--bf-border); background: var(--fb-card); text-decoration: none; color: inherit; text-align: center; transition: border-color var(--bf-transition), background var(--bf-transition), transform var(--bf-transition-spring), box-shadow var(--bf-transition); } .kesif-tags-podium-card:hover { transform: translateY(-3px); box-shadow: var(--bf-shadow-md); } .kesif-tags-podium-card.is-gold { min-height: 148px; border-color: rgba(245, 158, 11, 0.35); background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), var(--fb-card) 55%); } .kesif-tags-podium-card.is-silver { min-height: 132px; border-color: rgba(148, 163, 184, 0.35); background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), var(--fb-card) 55%); } .kesif-tags-podium-card.is-bronze { min-height: 120px; border-color: rgba(180, 83, 9, 0.28); background: linear-gradient(180deg, rgba(180, 83, 9, 0.1), var(--fb-card) 55%); } .kesif-tags-podium-rank { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bf-radius-full); font-size: 11px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; } .kesif-tags-podium-card.is-gold .kesif-tags-podium-rank { background: linear-gradient(135deg, #fbbf24, #d97706); } .kesif-tags-podium-card.is-silver .kesif-tags-podium-rank { background: linear-gradient(135deg, #cbd5e1, #64748b); } .kesif-tags-podium-card.is-bronze .kesif-tags-podium-rank { background: linear-gradient(135deg, #d97706, #92400e); } .kesif-tags-podium-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bf-radius-lg); background: rgba(var(--bf-brand-rgb), 0.1); color: var(--bf-brand); font-size: 14px; flex-shrink: 0; } .kesif-tags-podium-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; } .kesif-tags-podium-name { font-size: 14px; font-weight: 800; color: var(--fb-text); word-break: break-word; line-height: 1.2; } .kesif-tags-podium-meta { font-size: 11px; font-weight: 700; color: var(--fb-muted); } .kesif-tags-podium-arrow { display: none; } .kesif-tags-cloud { padding: 16px; border-radius: var(--bf-radius-2xl); border: 1px solid var(--bf-border); background: var(--fb-card); } .kesif-tags-cloud-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fb-muted); } .kesif-tags-chips { display: flex; flex-wrap: wrap; gap: 8px; } .kesif-tags-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border-radius: var(--bf-radius-full); border: 1px solid var(--bf-border); background: var(--bf-surface-raised, var(--fb-hover)); text-decoration: none; color: inherit; transition: border-color var(--bf-transition), background var(--bf-transition), transform var(--bf-transition-spring); } .kesif-tags-chip:hover { border-color: rgba(var(--bf-brand-rgb), 0.32); background: var(--bf-brand-light); transform: translateY(-1px); } .kesif-tags-chip.is-lg { padding: 10px 14px; } .kesif-tags-chip.is-lg .kesif-tags-chip-label { font-size: 15px; } .kesif-tags-chip.is-md .kesif-tags-chip-label { font-size: 14px; } .kesif-tags-chip-label { font-size: 13px; font-weight: 800; color: var(--fb-text); word-break: break-word; } .kesif-tags-chip-count { flex-shrink: 0; min-width: 22px; padding: 2px 7px; border-radius: var(--bf-radius-full); background: rgba(var(--bf-brand-rgb), 0.12); font-size: 11px; font-weight: 800; color: var(--bf-brand); font-variant-numeric: tabular-nums; } @media (max-width: 768px) { .kesif-tags-panel-title { margin: 0 0 10px; } .kesif-tags-podium { display: flex !important; flex-direction: column; grid-template-columns: unset; align-items: stretch; gap: 0; padding: 6px 0; overflow: hidden; } .kesif-tags-podium-card { position: relative; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start; align-self: stretch; width: 100%; gap: 12px; padding: 12px 16px; border-radius: 0; border: none; border-bottom: 1px solid var(--bf-border); min-height: 0 !important; text-align: left; background: var(--fb-card) !important; transform: none; box-shadow: none; } .kesif-tags-podium-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .kesif-tags-podium-card:last-child { border-bottom: none; } .kesif-tags-podium-card:hover { transform: none; background: var(--bf-brand-light) !important; } .kesif-tags-podium-card.is-gold { order: 1; } .kesif-tags-podium-card.is-gold::before { background: linear-gradient(180deg, #fbbf24, #d97706); } .kesif-tags-podium-card.is-silver { order: 2; } .kesif-tags-podium-card.is-silver::before { background: linear-gradient(180deg, #cbd5e1, #64748b); } .kesif-tags-podium-card.is-bronze { order: 3; } .kesif-tags-podium-card.is-bronze::before { background: linear-gradient(180deg, #d97706, #92400e); } .kesif-tags-podium-rank { width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; } .kesif-tags-podium-icon { display: none !important; } .kesif-tags-podium-copy { flex: 1; align-items: flex-start; text-align: left; min-width: 0; } .kesif-tags-podium-name { display: block; width: 100%; font-size: 14px; line-height: 1.25; word-break: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kesif-tags-podium-meta { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .kesif-tags-podium-arrow { display: inline-flex; flex-shrink: 0; align-items: center; color: var(--fb-muted); font-size: 12px; opacity: 0.5; } } @media (max-width: 640px) { .kesif-hub-bar { flex-direction: column; align-items: stretch; } .kesif-hub-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kesif-blogs-showcase { gap: 12px; } .kesif-blogs-showcase-head { flex-direction: column; padding: 14px; } .kesif-blogs-showcase-title { font-size: 18px; } .kesif-blogs-showcase-stat { align-self: flex-start; } .kesif-blog-item { flex-wrap: wrap; } .kesif-people-showcase { gap: 12px; } .kesif-people-showcase-head { flex-direction: column; padding: 14px; } .kesif-people-showcase-title { font-size: 18px; } .kesif-people-showcase-stat { align-self: flex-start; } .kesif-people-item { flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 10px; } .kesif-people-hero .kesif-people-item { padding: 14px; } .kesif-people-item-main { width: 100%; flex: none; } .kesif-people-item-avatar, .kesif-people-item-avatar img, .kesif-people-item-avatar .avatar-blogger { width: 42px; height: 42px; } .kesif-people-item--hero .kesif-people-item-avatar, .kesif-people-item--hero .kesif-people-item-avatar img, .kesif-people-item--hero .kesif-people-item-avatar .avatar-blogger { width: 48px; height: 48px; } .kesif-people-item-name { font-size: 13px; } .kesif-people-item-handle, .kesif-people-item-bio { font-size: 11px; } .kesif-people-item .kesif-people-follow-btn { width: 100%; min-width: 0 !important; min-height: 34px !important; height: auto !important; padding: 7px 12px !important; font-size: 12px !important; line-height: 1.2 !important; align-self: stretch; } .kesif-people-item .kesif-people-follow-btn.btn-follow.following { min-width: 0 !important; } .kesif-people-item .kesif-people-follow-btn.btn-follow.following::before { content: none !important; padding: 0 !important; } .kesif-people-item .kesif-people-follow-btn .follow-btn-label { gap: 5px !important; font-size: 12px !important; } .kesif-people-item .kesif-people-follow-btn .follow-btn-label i { font-size: 11px !important; margin: 0 !important; } .kesif-people-item .profile-card-action-btn--follow { min-height: 34px !important; padding: 7px 12px !important; } .kesif-spotlight { grid-template-columns: 1fr; } .kesif-spotlight-media { min-height: 160px; } .kesif-masonry { column-count: 1; } .kesif-tags-showcase { gap: 12px; } .kesif-tags-showcase-head { flex-direction: column; padding: 14px; } .kesif-tags-showcase-title { font-size: 18px; } .kesif-tags-showcase-stat { align-self: flex-start; } .kesif-tags-cloud { padding: 0; border-radius: var(--bf-radius-xl); overflow: hidden; } .kesif-tags-cloud-title { margin: 0; padding: 12px 16px 10px; border-bottom: 1px solid var(--bf-border); } .kesif-tags-chips { flex-direction: column; flex-wrap: nowrap; gap: 0; } .kesif-tags-chip { width: 100%; max-width: 100%; justify-content: space-between; padding: 12px 16px; gap: 10px; border-radius: 0; border: none; border-bottom: 1px solid var(--bf-border); background: transparent; transform: none; } .kesif-tags-chip:last-child { border-bottom: none; } .kesif-tags-chip:hover { transform: none; background: var(--bf-brand-light); } .kesif-tags-chip.is-lg, .kesif-tags-chip.is-md, .kesif-tags-chip.is-sm { padding: 12px 16px; } .kesif-tags-chip.is-lg .kesif-tags-chip-label, .kesif-tags-chip.is-md .kesif-tags-chip-label, .kesif-tags-chip-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .kesif-tags-chip-count { min-width: 28px; padding: 3px 8px; font-size: 11px; text-align: center; } } /* Widget alt bilgi */ .fb-widget-footer, .fb-widget-cta { padding: var(--bf-pad-lg) var(--bf-pad-xl); font-size: 13px; color: var(--fb-muted); } .fb-widget-footer { display: flex; align-items: center; gap: 8px; } .fb-widget-footer i { color: var(--bf-brand); } .fb-widget-cta a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .fb-widget-cta a:hover i { transform: translateX(2px); } .fb-widget-cta i { font-size: 0.75rem; transition: transform var(--bf-transition); } .left-menu { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Eski sınıflar — gizle */ .sidebar, .page-header, .mobile-topbar, .btn-tweet-sidebar, .sidebar-user { display: none !important; } /* Misafir gezinme */ .fb-topnav-login { margin-left: 4px; padding: 8px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--bf-text-strong); border: 1px solid var(--bf-border); background: var(--bf-surface); transition: border-color var(--bf-transition), color var(--bf-transition); } .fb-topnav-login:hover { color: var(--bf-brand); border-color: rgba(var(--bf-brand-rgb), 0.35); } .fb-topnav-join { margin-left: 4px; padding: 8px 14px !important; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .left-menu-join { color: var(--bf-brand); font-weight: 600; } .compose-card-guest { cursor: default; } .compose-guest-inner { display: flex; align-items: center; gap: 14px; padding: 4px 2px; flex-wrap: wrap; } .compose-guest-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(var(--bf-brand-rgb), 0.12); color: var(--bf-brand); font-size: 1.1rem; flex-shrink: 0; } .compose-guest-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; } .compose-guest-text strong { font-size: 0.95rem; color: var(--bf-text-strong); } .compose-guest-text span { font-size: 0.82rem; color: var(--bf-text-muted); } .join-modal { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 20px; } .join-modal.hidden { display: none; } .join-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 22, 0.55); backdrop-filter: blur(4px); } .join-modal-panel { position: relative; width: min(420px, 100%); background: var(--bf-card); border: 1px solid var(--bf-border); border-radius: 18px; padding: 28px 24px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); text-align: center; animation: join-modal-in 0.28s ease; } @keyframes join-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } .join-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; border-radius: 999px; background: var(--bf-surface-2); color: var(--bf-text-muted); cursor: pointer; } .join-modal-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(var(--bf-brand-rgb), 0.14); color: var(--bf-brand); font-size: 1.5rem; } .join-modal-title { margin: 0 0 8px; font-size: 1.35rem; color: var(--bf-text-strong); } .join-modal-text { margin: 0 0 18px; color: var(--bf-text-muted); line-height: 1.5; font-size: 0.92rem; } .join-modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; } .join-modal-cta { width: 100%; justify-content: center; text-decoration: none; } .join-modal-login { font-size: 0.84rem; color: var(--bf-text-muted); text-decoration: none; } .join-modal-login:hover { color: var(--bf-brand); } body.join-modal-open { overflow: hidden; } .register-page { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .register-hero { padding: 24px 22px; text-align: center; } .register-hero-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(var(--bf-brand-rgb), 0.14); color: var(--bf-brand); font-size: 1.5rem; } .register-hero h1 { margin: 0 0 8px; font-size: 1.5rem; } .register-hero p { margin: 0; color: var(--bf-text-muted); } .register-form-card { padding: 22px; } .register-alert { margin-bottom: 16px; } .register-form { display: flex; flex-direction: column; gap: 14px; } .register-section-title { margin: 4px 0 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bf-text-muted); } .register-optional { font-weight: 500; text-transform: none; letter-spacing: 0; } .register-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .register-field-grid { grid-template-columns: 1fr; } } .register-field { display: flex; flex-direction: column; gap: 6px; } .register-field-label { font-size: 0.84rem; font-weight: 600; color: var(--bf-text-strong); } .register-input-wrap { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--bf-border); border-radius: 12px; background: var(--bf-surface); } .register-input-wrap i { color: var(--bf-text-muted); width: 16px; text-align: center; flex-shrink: 0; } .register-input-wrap .theme-input { border: none; background: transparent; padding: 11px 0; width: 100%; box-shadow: none; } .register-textarea { min-height: 88px; resize: vertical; } .register-field-hint, .register-username-status { font-size: 0.76rem; color: var(--bf-text-muted); } .register-username-status.is-available { color: #3d7a52; } .register-username-status.is-taken, .register-username-status.is-invalid { color: #b44a4a; } .register-username-status.is-checking { color: var(--bf-text-muted); } .register-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .register-captcha { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--bf-border, #e5e7eb); border-radius: 12px; background: var(--bf-surface-muted, rgba(99, 102, 241, 0.04)); } .register-captcha-image-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .register-captcha-image { display: block; border-radius: 8px; border: 1px solid var(--bf-border, #e5e7eb); background: #fff; } .register-captcha-refresh { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--bf-border, #e5e7eb); border-radius: 10px; background: var(--bf-card, #fff); color: var(--bf-text-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; } .register-captcha-refresh:hover { color: var(--bf-text, #111827); border-color: #6366f1; } .register-captcha-field { margin: 0; } .register-captcha-input { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; } .register-captcha-math { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .register-captcha-math-question { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.04em; color: var(--bf-text, #111827); min-width: 5.5rem; } .register-captcha-math-input { flex: 1 1 120px; min-width: 120px; } .register-submit { width: 100%; margin-top: 4px; } .register-login-link { margin: 16px 0 0; text-align: center; font-size: 0.86rem; color: var(--bf-text-muted); } .likes-modal { position: fixed; inset: 0; z-index: 12500; display: flex; align-items: center; justify-content: center; padding: 20px; } .likes-modal.hidden { display: none; } .likes-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 22, 0.58); backdrop-filter: blur(6px); } .likes-modal-panel { position: relative; display: flex; flex-direction: column; width: min(420px, 100%); max-height: min(72vh, 560px); background: var(--bf-card); border: 1px solid var(--bf-border); border-radius: 18px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22); overflow: hidden; animation: likes-modal-in 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes likes-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } .likes-modal-sheet-handle { display: none; } .likes-modal-head { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 52px; border-bottom: 1px solid var(--bf-border); background: var(--bf-card); } .likes-modal-head h2 { margin: 0; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; color: var(--bf-text-strong); } .likes-modal-close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 34px; height: 34px; border: none; border-radius: 999px; background: var(--bf-surface-2); color: var(--bf-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .likes-modal-close:hover { background: var(--bf-surface-3, var(--bf-surface-2)); color: var(--bf-text-strong); } .likes-modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .likes-modal-loading, .likes-modal-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; padding: 36px 24px; color: var(--bf-text-muted); font-size: 0.9rem; text-align: center; } .likes-modal-loading i, .likes-modal-empty i { font-size: 1.6rem; opacity: 0.55; } .likes-modal-loading.hidden, .likes-modal-empty.hidden, .likes-modal-list.hidden, .likes-modal-more.hidden { display: none; } .likes-modal-list { display: flex; flex-direction: column; } .likes-modal-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; color: inherit; border-bottom: 1px solid var(--bf-border); transition: background 0.15s ease; } .likes-modal-user:last-child { border-bottom: none; } .likes-modal-user:hover { background: var(--bf-surface-2); } .likes-modal-user-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; color: inherit; } .likes-modal-user-main:hover .likes-modal-user-title { color: var(--bf-brand); } .likes-modal-user-action { flex-shrink: 0; } .likes-modal-follow-btn { padding: 7px 14px; font-size: 0.75rem; min-width: 152px; white-space: nowrap; } .likes-modal-follow-btn:disabled { opacity: 0.72; cursor: wait; } .likes-modal-user-hint { color: var(--bf-text-muted); } .likes-modal-user-sep { margin: 0 4px; opacity: 0.55; } .likes-modal-user-avatar { flex-shrink: 0; } .likes-modal-user-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .likes-modal-user-title { font-size: 0.9rem; font-weight: 700; color: var(--bf-text-strong); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .likes-modal-user-subtitle { font-size: 0.8rem; color: var(--bf-text-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .likes-modal-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; max-width: 118px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--bf-border); background: var(--bf-surface-2); color: var(--bf-text-muted); font-size: 0.68rem; font-weight: 700; line-height: 1.2; text-align: center; white-space: normal; } .likes-modal-badge.is-following { border-color: rgba(var(--bf-brand-rgb), 0.28); background: rgba(var(--bf-brand-rgb), 0.12); color: var(--bf-brand); } .likes-modal-badge.is-follower { border-color: var(--bf-border); background: var(--bf-card); color: var(--bf-text-muted); } .likes-modal-badge.is-muted { border-color: transparent; background: transparent; color: var(--bf-text-muted); opacity: 0.72; padding-inline: 4px; } .likes-modal-badge.is-self { border-color: var(--bf-border); background: var(--bf-card); color: var(--bf-text-strong); } .likes-modal-more { display: flex; align-items: center; justify-content: center; padding: 14px 0 18px; color: var(--bf-text-muted); font-size: 0.9rem; } body.likes-modal-open { overflow: hidden; } @media (max-width: 640px) { .likes-modal { align-items: flex-end; padding: 0; } .likes-modal-panel { width: 100%; max-height: 82vh; border-radius: 20px 20px 0 0; border-bottom: none; animation: likes-modal-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .likes-modal-sheet-handle { display: block; width: 40px; height: 4px; margin: 10px auto 2px; border-radius: 999px; background: var(--bf-border); flex-shrink: 0; } .likes-modal-head { min-height: 48px; padding-bottom: 2px; } .likes-modal-user { padding: 12px 16px; } .likes-modal-badge { max-width: 104px; font-size: 0.64rem; } .likes-modal-follow-btn { min-width: 132px; padding: 6px 10px; font-size: 0.68rem; } @keyframes likes-modal-sheet-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } } /* Yasal sayfalar */ .legal-page { max-width: 760px; margin: 0 auto; } .legal-hero { display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; } .legal-hero-badge { flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--bf-radius-lg); background: color-mix(in srgb, var(--fb-link) 14%, transparent); color: var(--fb-link); font-size: 1.25rem; } .legal-hero-text { min-width: 0; } .legal-hero-kicker { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-text-muted); } .legal-hero-text h1 { margin: 0 0 8px; font-size: 1.55rem; line-height: 1.25; } .legal-hero-intro { margin: 0 0 10px; color: var(--bf-text-muted); line-height: 1.55; } .legal-hero-meta { margin: 0; font-size: 0.84rem; color: var(--bf-text-muted); display: flex; align-items: center; gap: 8px; } .legal-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; } .legal-nav-item { flex: 1 1 180px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--bf-radius-lg); border: 1px solid transparent; color: var(--bf-text); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: background var(--bf-transition), border-color var(--bf-transition), color var(--bf-transition); } .legal-nav-item:hover { background: color-mix(in srgb, var(--fb-link) 8%, transparent); color: var(--fb-link); } .legal-nav-item.active { background: color-mix(in srgb, var(--fb-link) 12%, transparent); border-color: color-mix(in srgb, var(--fb-link) 28%, transparent); color: var(--fb-link); } .legal-doc { padding: 28px 30px 22px; } .legal-section + .legal-section { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--bf-card-ring); } .legal-section h2 { margin: 0 0 12px; font-size: 1.08rem; line-height: 1.35; } .legal-section p { margin: 0 0 12px; color: var(--bf-text); line-height: 1.65; font-size: 0.94rem; } .legal-section p:last-child { margin-bottom: 0; } .legal-section a { color: var(--fb-link); font-weight: 600; text-decoration: none; } .legal-section a:hover { text-decoration: underline; } .legal-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; } .legal-list li { line-height: 1.6; font-size: 0.94rem; color: var(--bf-text); } .legal-list a { color: var(--fb-link); font-weight: 600; text-decoration: none; } .legal-list a:hover { text-decoration: underline; } .legal-doc-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bf-card-ring); } .legal-doc-foot p { margin: 0 0 8px; font-size: 0.9rem; color: var(--bf-text-muted); line-height: 1.55; } .legal-doc-foot a { color: var(--fb-link); font-weight: 600; text-decoration: none; } .legal-doc-foot a:hover { text-decoration: underline; } .legal-doc-copy { font-size: 0.82rem !important; } .legal-footer-widget { padding: 14px 16px 12px; text-align: center; } .legal-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-bottom: 8px; } .legal-footer-links a { font-size: 0.78rem; color: var(--bf-text-muted); text-decoration: none; font-weight: 600; } .legal-footer-links a:hover { color: var(--fb-link); text-decoration: underline; } .legal-footer-copy { margin: 0; font-size: 0.74rem; color: var(--bf-text-muted); } .register-legal-notice { margin: 0 0 14px; font-size: 0.84rem; line-height: 1.55; color: var(--bf-text-muted); } .register-legal-notice a { color: var(--fb-link); font-weight: 600; text-decoration: none; } .register-legal-notice a:hover { text-decoration: underline; } @media (max-width: 640px) { .legal-hero { flex-direction: column; padding: 20px 18px; } .legal-doc { padding: 22px 18px 18px; } .legal-nav-item { flex: 1 1 100%; } } .post-media-modal { position: fixed; inset: 0; z-index: 12600; display: flex; align-items: center; justify-content: center; padding: 16px; } .post-media-modal.hidden { display: none; } .post-media-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 10, 16, 0.82); backdrop-filter: blur(6px); } .post-media-modal-shell { position: relative; z-index: 1; width: min(1180px, 96vw); height: min(90vh, 860px); display: flex; background: var(--bf-card); border: 1px solid var(--bf-border); border-radius: 18px; overflow: hidden; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42); animation: post-media-modal-in 0.24s ease; } @keyframes post-media-modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } } .post-media-modal-close { position: absolute; top: 14px; left: 14px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 999px; background: rgba(12, 14, 20, 0.72); color: #fff; cursor: pointer; backdrop-filter: blur(4px); } .post-media-modal-close:hover { background: rgba(24, 28, 38, 0.88); } .post-media-modal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); width: 100%; height: 100%; min-height: 0; } .post-media-modal.is-image-only .post-media-modal-layout { grid-template-columns: minmax(0, 1fr); } .post-media-modal.is-image-only .post-media-modal-sidebar { display: none; } .post-media-modal-media { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; background: #05070d; } .post-media-modal-img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .post-media-modal-sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--bf-border); background: var(--bf-card); } .post-media-modal-post-host { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; } .post-media-modal-post-host .post-media-modal-post { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .post-media-modal-post-host .fb-post-repost-banner { flex-shrink: 0; margin: 0; border-radius: 0; } .post-media-modal-post-host .fb-post-header { flex-shrink: 0; padding: 14px 16px 8px; } .post-media-modal-post-host .fb-post-body { flex-shrink: 0; padding: 0 16px 10px; } .post-media-modal-post-host .fb-post-actions { flex-shrink: 0; padding: 4px 10px 10px; border-bottom: 1px solid var(--bf-border); } .post-media-modal-post-host .comment-toggle { display: none; } .post-media-modal-post-host .fb-post-comments.comments-section { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 0; border-top: 0; background: transparent; overflow: hidden; } .post-media-modal-post-host .comments-section-head { flex-shrink: 0; padding: 12px 16px 8px; } .post-media-modal-post-host .comments-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 8px; } .post-media-modal-post-host .comments-compose { flex-shrink: 0; margin: 0; padding: 10px 12px 14px; border-top: 1px solid var(--bf-border); background: var(--bf-card); } body.post-media-modal-open .mention-dropdown-portal, body.post-media-modal-open .chat-emoji-picker-portal { z-index: 12750; } body.post-media-modal-open { overflow: hidden; } @media (max-width: 900px) { .post-media-modal { padding: 0; align-items: stretch; } .post-media-modal-shell { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; } .post-media-modal-layout { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 42vh) minmax(0, 1fr); } .post-media-modal-close { top: 10px; left: 10px; } } .external-link-body { width: 100%; } .external-link-shell { width: 100%; max-width: 520px; margin: 0 auto; } .external-link-card { width: 100%; background: var(--fb-card); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-2xl); padding: 28px 28px 30px; box-shadow: var(--bf-shadow-lg); position: relative; overflow: hidden; } .external-link-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--bf-brand) 0%, #818cf8 50%, var(--bf-brand-hover) 100%); } .external-link-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 22px; } .external-link-icon { width: 56px; height: 56px; margin-bottom: 14px; border-radius: var(--bf-radius-xl); background: color-mix(in srgb, var(--bf-orange) 16%, transparent); color: var(--bf-orange); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; } .external-link-header h1 { margin: 0 0 10px; font-size: 1.55rem; font-weight: 800; line-height: 1.25; color: var(--fb-text); letter-spacing: -0.03em; } .external-link-intro { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--bf-text-muted); } .external-link-target { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--bf-radius-lg); border: 1px solid var(--bf-border); background: color-mix(in srgb, var(--fb-card) 92%, var(--bf-brand) 8%); } .external-link-target-label { display: block; margin-bottom: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bf-text-muted); } .external-link-target-host { display: block; font-size: 1.1rem; line-height: 1.3; color: var(--bf-text); word-break: break-word; } .external-link-target-url { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--bf-text-muted); word-break: break-all; } .external-link-note { margin: 0 0 20px; font-size: 0.86rem; line-height: 1.55; color: var(--bf-text-muted); } .external-link-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--bf-radius-md); background: #fdf2f2; border: 1px solid #f5d5d5; color: #b44a4a; font-size: 0.9rem; line-height: 1.45; } .external-link-alert i { flex-shrink: 0; margin-top: 2px; } .external-link-actions { display: flex; flex-direction: column; gap: 10px; } .external-link-btn { width: 100%; min-height: 46px; border-radius: var(--bf-radius-full); font-size: 0.95rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--bf-transition), box-shadow var(--bf-transition), background var(--bf-transition), border-color var(--bf-transition); } .external-link-btn-primary { background: var(--bf-brand-gradient); color: #fff; border: none; box-shadow: var(--bf-shadow-brand); } .external-link-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--bf-brand-rgb), 0.38); color: #fff; } .external-link-btn-secondary { background: transparent; color: var(--bf-text); border: 1px solid var(--bf-border); } .external-link-btn-secondary:hover { background: color-mix(in srgb, var(--bf-text) 5%, transparent); border-color: color-mix(in srgb, var(--bf-brand) 24%, var(--bf-border)); transform: translateY(-1px); color: var(--bf-text); } @media (max-width: 560px) { .external-link-card { padding: 24px 20px 26px; } } .not-found-page { max-width: 560px; margin: 0 auto; } .not-found-card { padding: 42px 32px 36px; text-align: center; position: relative; overflow: hidden; } .not-found-code { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); font-size: clamp(7rem, 24vw, 10rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: color-mix(in srgb, var(--bf-brand) 10%, transparent); pointer-events: none; user-select: none; } .not-found-icon { position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: var(--bf-radius-2xl); background: var(--bf-brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; box-shadow: var(--bf-shadow-brand); } .not-found-card h1 { position: relative; z-index: 1; margin: 0 0 10px; font-size: 1.65rem; font-weight: 800; line-height: 1.25; color: var(--fb-text); letter-spacing: -0.03em; } .not-found-message { position: relative; z-index: 1; margin: 0 auto 24px; max-width: 360px; font-size: 0.95rem; line-height: 1.6; color: var(--bf-text-muted); } .not-found-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .not-found-btn-primary, .not-found-btn-secondary { min-height: 44px; padding: 0 20px; border-radius: var(--bf-radius-full); font-size: 0.92rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--bf-transition), box-shadow var(--bf-transition), background var(--bf-transition), border-color var(--bf-transition); } .not-found-btn-primary:hover { transform: translateY(-2px); } .not-found-btn-secondary { border: 1px solid var(--bf-border); color: var(--bf-text); background: transparent; } .not-found-btn-secondary:hover { background: color-mix(in srgb, var(--bf-text) 5%, transparent); border-color: color-mix(in srgb, var(--bf-brand) 24%, var(--bf-border)); transform: translateY(-1px); color: var(--bf-text); } @media (max-width: 560px) { .not-found-card { padding: 36px 22px 30px; } .not-found-actions { flex-direction: column; } .not-found-btn-primary, .not-found-btn-secondary { width: 100%; } } .scroll-to-top { position: fixed; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid color-mix(in srgb, var(--bf-brand) 28%, var(--bf-border)); border-radius: 999px; background: color-mix(in srgb, var(--fb-card) 92%, transparent); color: var(--bf-brand); font-size: 1rem; cursor: pointer; box-shadow: var(--bf-shadow-float); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.94); pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .scroll-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .scroll-to-top:hover { background: var(--bf-brand); color: #fff; border-color: transparent; box-shadow: 0 10px 28px rgba(var(--bf-brand-rgb), 0.34); } .scroll-to-top:active { transform: translateY(1px) scale(0.97); } @media (max-width: 899px) { .scroll-to-top { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (min-width: 768px) { body:has(.ig-popup-dock) .scroll-to-top { bottom: calc(84px + env(safe-area-inset-bottom)); } } body.post-media-modal-open .scroll-to-top, body.mobile-menu-open .scroll-to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }