/* CanUpdate Sosyal. Renkler sitenin açık/koyu tonlarıyla aynı (templates/live/base.html). */
:root { --cu-card: #ffffff; --cu-line: rgba(195,198,214,.45); --cu-line-strong: #c3c6d6; --cu-hover: rgba(0,0,0,.035); --cu-primary: #004676; --cu-muted: #434654; --cu-text: #191c1e; }
.dark { --cu-card: #202326; --cu-line: rgba(45,51,64,.8); --cu-line-strong: #3a4150; --cu-hover: rgba(255,255,255,.045); --cu-primary: #8ec8ff; --cu-muted: #c8cdd8; --cu-text: #e2e4e7; }

.cu-noscroll { overflow: hidden; }
.cu-hover:hover { background-color: var(--cu-hover); }
.cu-unread { background-color: rgba(0,70,118,.06); }
.dark .cu-unread { background-color: rgba(142,200,255,.07); }
.cu-outline { border: 1px solid var(--cu-line-strong); }
.cu-line { border-color: var(--cu-line-strong); }
.cu-solid { background: var(--cu-text); color: var(--cu-card); }
.cu-solid:hover { opacity: .88; }

.cu-head { position: sticky; top: 56px; z-index: 20; background: color-mix(in srgb, var(--cu-card) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cu-line); }
@media (min-width: 640px) { .cu-head { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; } }
.cu-head.is-sub { position: static; border-radius: 0; background: transparent; backdrop-filter: none; }
.cu-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.cu-tabs::-webkit-scrollbar { display: none; }
.cu-tab { flex: 1 0 auto; position: relative; padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--cu-muted); white-space: nowrap; }
.cu-tab:hover { background: var(--cu-hover); }
.cu-tab.is-on { color: var(--cu-text); }
.cu-tab.is-on span::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 56px; max-width: 70%; height: 4px; border-radius: 4px; background: var(--cu-primary); transform: translateX(-50%); }

.cu-post { padding: 12px 16px; border-bottom: 1px solid var(--cu-line); cursor: pointer; transition: background-color .15s; }
.cu-post:hover { background: var(--cu-hover); }
.cu-post.is-big { cursor: default; }
.cu-post.is-big:hover { background: transparent; }
.cu-post.is-thread { border-bottom: 0; padding-bottom: 0; }
.cu-post-note { display: flex; align-items: center; gap: 6px; margin: -2px 0 4px 26px; font-size: 13px; font-weight: 700; color: var(--cu-muted); }
.cu-thread-line { width: 2px; flex: 1; min-height: 12px; margin-top: 4px; background: var(--cu-line-strong); border-radius: 2px; }
/* Twitter ölçüleri: akışta 15px / 20px satır, gönderi sayfasında 17px / 24px. */
.cu-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cu-text); font-size: 15px; line-height: 1.34; }
.cu-body.is-big { font-size: 17px; line-height: 1.42; }
.cu-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cu-badge { font-size: 17px !important; vertical-align: -3px; }
.cu-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #004676; }
.dark .cu-chip { background: #1a4a6e; }
.cu-more { margin: -6px -8px 0 0; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--cu-muted); flex-shrink: 0; }
.cu-more:hover { background: rgba(0,70,118,.1); color: var(--cu-primary); }

/* Twitter düzeni: yanıt / yeniden paylaşım / beğeni satırı eşit paylaşır, kaydet + paylaş sağ uçta yan yana.
   Kenar boşlukları eksi: simgeler yazının hizasında başlar ve biter (sağda boşluk kalmaz). */
.cu-acts { display: flex; align-items: center; margin: 4px -8px -6px -8px; }
.cu-acts > .cu-act { flex: 1 1 0; min-width: 0; }
.cu-acts-side { display: flex; align-items: center; flex-shrink: 0; }
.cu-acts.is-big { margin: 0 -8px; padding: 4px 0; border-bottom: 1px solid var(--cu-line); }
.cu-acts.is-big .cu-acts-side { display: contents; }
.cu-acts.is-big .cu-act { flex: 1 1 0; justify-content: center; }
.cu-act { display: inline-flex; align-items: center; gap: 2px; color: var(--cu-muted); font-size: 13px; }
.cu-act-ico { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
.cu-act:hover .cu-act-ico { background: rgba(0,70,118,.1); color: var(--cu-primary); }
.cu-act:hover { color: var(--cu-primary); }
.cu-act.is-like, .cu-act.is-like:hover { color: #e0245e; }
.cu-act.is-like .cu-act-ico span { animation: cuPop .3s ease; }
.cu-act.is-repost, .cu-act.is-repost:hover { color: #17a34a; }
.cu-act.is-mark, .cu-act.is-mark:hover { color: var(--cu-primary); }
@keyframes cuPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.cu-media { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--cu-line); background: var(--cu-hover); }
.cu-media-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cu-media-track::-webkit-scrollbar { display: none; }
.cu-media-cell { flex: 0 0 100%; scroll-snap-align: center; max-height: 560px; cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.cu-media-track.is-multi .cu-media-cell { aspect-ratio: 1 / 1; max-height: 520px; }
.cu-media-cell img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; display: block; }
.cu-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.cu-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.5); transition: width .2s; }
.cu-dots span.is-on { width: 16px; background: #fff; }
.cu-media-count { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); }
.cu-media-nav { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 999px; display: none; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.55); }
.cu-media-nav.is-prev { left: 8px; } .cu-media-nav.is-next { right: 8px; }
@media (hover: hover) { .cu-media:hover .cu-media-nav { display: flex; } }

.cu-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
.cu-lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.cu-lightbox button { position: absolute; width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.12); }
.cu-lightbox button:hover { background: rgba(255,255,255,.22); }
.cu-lightbox-close { top: 14px; left: 14px; }
.cu-lightbox-nav.is-prev { left: 14px; top: 50%; margin-top: -22px; }
.cu-lightbox-nav.is-next { right: 14px; top: 50%; margin-top: -22px; }

.cu-compose { padding: 12px 16px; border-bottom: 1px solid var(--cu-line); }
.cu-compose.is-flat { border-bottom: 0; }
.cu-compose.is-card { padding: 16px; }
.cu-compose-shell { border-radius: 1rem; background: #edeef0; overflow: hidden; transition: box-shadow .15s; }
.dark .cu-compose-shell { background: #2a2d30; }
/* Analist Notları'ndaki editör gibi: odakta çerçeve yok, yalnız görsel sürüklenirken halka çıkar. */
.cu-compose-shell.is-drop { box-shadow: 0 0 0 2px var(--cu-primary); }
.cu-compose-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--cu-line); }
.cu-etool { border-radius: 12px; background: #fff; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #434654; display: inline-flex; align-items: center; gap: 5px; line-height: 1; transition: background .12s; }
.cu-etool:hover { background: #e8e9ec; }
.cu-etool:disabled { opacity: .45; }
.dark .cu-etool { background: #252a2d; color: #e2e4e7; }
.dark .cu-etool:hover { background: #2d3438; }
.cu-etool-label { font-size: 11px; font-weight: 700; }
/* Araç düğmeleri (analist editöründeki B, I ve alıntı çizgisi) ve seçili biçim */
.cu-et-b { font-weight: 900; font-size: 15px; line-height: 1; }
.cu-et-i { font-style: italic; font-size: 15px; line-height: 1; font-family: Georgia, serif; }
.cu-et-q { display: inline-block; width: 3px; height: 16px; border-radius: 2px; background: #004674; vertical-align: middle; }
.dark .cu-et-q { background: #7ab8e8; }
.cu-etool.is-on, .dark .cu-etool.is-on { background: #004674; color: #fff; }
.cu-etool.is-on .cu-et-q { background: #fff; }
/* Telefonda araçlar tek satır, yalnız simge (yazılar düğmenin başlığında) */
@media (max-width: 560px) {
  .cu-compose-tools { flex-wrap: nowrap; gap: 3px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
  .cu-etool { padding: 7px 9px; min-width: 34px; justify-content: center; }
  .cu-etool-label { display: none; }
}
/* Zengin yazma alanı ve gönderide çizilen biçimler */
.cu-ce { position: relative; overflow-wrap: anywhere; word-break: break-word; cursor: text; max-height: 520px; overflow-y: auto; }
.cu-ce.is-empty::before { content: attr(data-placeholder); color: var(--cu-muted); opacity: .8; pointer-events: none; position: absolute; }
.cu-ce h3, .cu-md-h { font-family: Manrope, sans-serif; font-size: 1.2rem; line-height: 1.3; font-weight: 900; color: var(--cu-text); margin: .35rem 0 .15rem; }
.cu-ce b, .cu-ce strong { font-weight: 800; }
.cu-ce blockquote, .cu-md-q { border-left: 4px solid #004674; padding-left: .85rem; margin: .35rem 0; color: var(--cu-muted); }
.dark .cu-ce blockquote, .dark .cu-md-q { border-left-color: #7ab8e8; }
.cu-ce a { color: var(--cu-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Seçili yazının araç çubuğu (Analist Notları'ndaki gibi) */
.cu-float { position: fixed; z-index: 380; display: none; gap: 1px; padding: 4px; border-radius: 10px; background: #1a1c20; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.cu-float.is-on { display: flex; }
.cu-float button { width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #e8eaee; }
.cu-float button:hover { background: rgba(255,255,255,.16); }
.cu-float button.is-on { background: #004674; color: #fff; }
.cu-compose.is-card .cu-compose-text { padding: 12px 16px; font-size: 16px; line-height: 1.4; min-height: 96px; }
.cu-compose.is-card .cu-send { border-radius: 12px; padding: 8px 20px; font-size: 12px; }
.cu-compose-text { width: 100%; resize: none; border: 0; background: transparent; padding: 8px 0; font-size: 18px; line-height: 1.4; color: var(--cu-text); outline: none; min-height: 52px; }
.cu-compose-text::placeholder { color: var(--cu-muted); opacity: .8; }
.cu-compose-media { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.cu-compose-media.n1 { grid-template-columns: 1fr; }
.cu-compose-cell { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cu-hover); }
.cu-compose-media.n1 .cu-compose-cell { aspect-ratio: 16 / 10; }
.cu-compose-cell img { width: 100%; height: 100%; object-fit: cover; }
.cu-compose-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); }
.cu-compose-wait.is-error { background: rgba(186,26,26,.78); }
.cu-compose-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.65); }
.cu-tool { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--cu-primary); }
.cu-tool:hover { background: rgba(0,70,118,.1); }
.cu-tool:disabled { opacity: .4; }
.cu-send { border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 800; color: #fff; background: #004676; transition: opacity .15s; }
.dark .cu-send { background: #2a6a9e; }
.cu-send:disabled { opacity: .45; cursor: default; }

.cu-wall { margin: 12px 16px 20px; padding: 28px 20px; border-radius: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, rgba(0,70,118,.07), rgba(0,70,118,.02)); border: 1px solid var(--cu-line); }
.dark .cu-wall { background: linear-gradient(180deg, rgba(142,200,255,.09), rgba(142,200,255,.02)); }

.cu-cover { height: 132px; background: linear-gradient(135deg, #004676 0%, #245e91 55%, #3b7bb5 100%); }
.dark .cu-cover { background: linear-gradient(135deg, #0d2a44 0%, #16456d 60%, #1f5b8c 100%); }
@media (min-width: 640px) { .cu-head + div .cu-cover, .cu-cover { height: 160px; } }
.cu-pbtn { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cu-line-strong); color: var(--cu-text); }
.cu-pbtn:hover { background: var(--cu-hover); }

.cu-side-card { border-radius: 1.5rem; background: var(--cu-card); box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.dark .cu-side-card { box-shadow: 0 1px 3px rgba(0,0,0,.4); }

.cu-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px 12px; background: rgba(0,0,0,.45); }
.cu-modal-panel { width: 100%; max-width: 600px; max-height: 88vh; border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); outline: none; animation: cuIn .18s ease-out; }
.cu-modal-body { overflow-y: auto; }
@media (max-width: 639px) { .cu-modal { padding: 0; } .cu-modal-panel { max-width: none; height: 100%; max-height: none; border-radius: 0; } }
@keyframes cuIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.cu-menu { position: absolute; z-index: 350; min-width: 240px; max-width: calc(100vw - 16px); padding: 6px 0; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px var(--cu-line); animation: cuIn .12s ease-out; }
.cu-menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 15px; font-weight: 700; text-align: left; }
.cu-menu-item:hover, .cu-menu-item:focus-visible { background: var(--cu-hover); outline: none; }

.cu-toasts { position: fixed; left: 50%; bottom: 76px; z-index: 500; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
@media (min-width: 1024px) { .cu-toasts { bottom: 28px; } }
.cu-toast { padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff; background: #004676; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: cuIn .18s ease-out; transition: opacity .3s; }
.cu-toast.is-error { background: #ba1a1a; }
.cu-toast.is-out { opacity: 0; }

.cu-spin { width: 22px; height: 22px; border-radius: 999px; border: 3px solid rgba(0,70,118,.2); border-top-color: var(--cu-primary); animation: cuSpin .8s linear infinite; display: inline-block; }
.cu-compose-wait .cu-spin { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes cuSpin { to { transform: rotate(360deg); } }

.cu-navdot { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font: 700 10px/16px system-ui, sans-serif; text-align: center; color: #fff; background: #ba1a1a; font-variation-settings: normal; }

/* Mesajlar */
.cu-dm { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 56px - 48px); min-height: 480px; }
@media (max-width: 1023px) { .cu-dm { grid-template-columns: 1fr; height: calc(100dvh - 56px - 56px); } .cu-dm.has-thread .cu-dm-list { display: none; } .cu-dm:not(.has-thread) .cu-dm-thread { display: none; } }
.cu-dm-list { border-right: 1px solid var(--cu-line); overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.cu-dm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cu-dm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.cu-bubble-row { display: flex; align-items: flex-end; gap: 6px; max-width: 80%; }
.cu-bubble-row.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.cu-bubble { padding: 9px 14px; border-radius: 20px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cu-hover); color: var(--cu-text); border: 1px solid var(--cu-line); }
.is-mine .cu-bubble { background: #004676; color: #fff; border-color: transparent; border-bottom-right-radius: 6px; }
.dark .is-mine .cu-bubble { background: #1f5b8c; }
.cu-bubble-row:not(.is-mine) .cu-bubble { border-bottom-left-radius: 6px; }
.cu-bubble.is-deleted { font-style: italic; opacity: .7; }
.cu-bubble img { display: block; max-width: min(280px, 60vw); max-height: 360px; border-radius: 14px; margin: -3px -8px; cursor: zoom-in; }
.cu-bubble-time { font-size: 11px; color: var(--cu-muted); margin: 2px 6px 8px; }
.is-mine + .cu-bubble-time { align-self: flex-end; }
.cu-bubble-more { opacity: 0; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--cu-muted); }
.cu-bubble-row:hover .cu-bubble-more, .cu-bubble-more:focus { opacity: 1; }
@media (hover: none) { .cu-bubble-more { opacity: 1; } }
.cu-dm-compose { flex-shrink: 0; border-top: 1px solid var(--cu-line); padding: 8px 12px; display: flex; align-items: flex-end; gap: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.cu-dm-input { flex: 1; min-width: 0; resize: none; max-height: 160px; border-radius: 20px; padding: 9px 14px; font-size: 15px; background: var(--cu-hover); color: var(--cu-text); border: 1px solid var(--cu-line); outline: none; }
.cu-dm-input:focus { border-color: var(--cu-primary); }
.cu-conv { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; border-right: 2px solid transparent; }
.cu-conv:hover { background: var(--cu-hover); }
.cu-conv.is-on { background: var(--cu-hover); border-right-color: var(--cu-primary); }
.cu-conv.is-unread .cu-conv-preview { color: var(--cu-text); font-weight: 700; }
/* Arama kutuları: tarayıcı/taban stilinin çerçevesi kapsayıcıyla çakışmasın. */
input.cu-bare { border: 0; box-shadow: none; -webkit-appearance: none; appearance: none; padding: 0; }
input.cu-bare::-webkit-search-decoration { -webkit-appearance: none; }

/* Odak: Tailwind forms eklentisinin kare mavi çerçevesi (arama kutusu, gönderi kutusu, mesaj alanı) kapatılır;
   çerçeve varsa dıştaki yuvarlak kutuda kalır. */
input.cu-bare:focus, textarea.cu-compose-text:focus, .cu-compose-text:focus, textarea.cu-dm-input:focus { box-shadow: none; outline: none; }