/* =====================================================================
   LikedWin — Truth Social sahnesi (lws--truth-social, trs-*)
   Kabuk: organik-hit ohs-* + sahne-motor lws-* (önce yüklenir). Burada
   yalnız Truth Social'a özel görünümler: beyaz uygulama + mor menü (sol
   menü, akış, Gündem), "Truth" gönderisi, profil, istatistik ekranı.
   Uygulama temadan bağımsız sabit renklerle (beyaz zemin, mor-mavi marka)
   çizilir — platformun kendi görünümü. Gradyan YOK.
   ===================================================================== */

.lws--truth-social {
    --lws-brand: #5448ee;
    --lws-brand-ink: #fff;
    --lws-brand-soft: rgba(84, 72, 238, .12);
    --trs-purple: #5448ee;
    --trs-deep: #2b2470;
    --trs-soft: #efedfd;
    --trs-ink: #15122b;
    --trs-muted: #6e6a85;
    --trs-line: #ebe9f5;
    --trs-green: #13a36e;
    --trs-red: #e0245e;
}

/* ---------- Eylem görünümü: üst satır + uygulama ---------- */
.trs-v { display: flex; flex-direction: column; gap: 12px; }
.trs-top { justify-content: space-between; }

.trs-app {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) 176px;
    grid-template-rows: minmax(0, 1fr);
    border: 1px solid #e3e0f2;
    border-radius: 14px;
    background: #fff;
    color: var(--trs-ink);
    overflow: hidden;
}

.trs-rail { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 10px; border-right: 1px solid var(--trs-line); }
.trs-brand { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; }
.trs-brand b, .trs-mbar b { font-size: 13px; font-weight: 800; color: var(--trs-deep); white-space: nowrap; }
.trs-logo { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--trs-purple); color: #fff; font-size: 13px; }
.trs-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #4a4763; white-space: nowrap; }
.trs-nav i { width: 16px; text-align: center; font-size: 13px; }
.trs-nav.is-on { background: var(--trs-soft); color: var(--trs-purple); font-weight: 800; }
.trs-truth { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; margin-top: 10px; border-radius: 17px; background: var(--trs-purple); color: #fff; font-size: 13px; font-weight: 800; }
.trs-mbar, .trs-mnav { display: none; }

.trs-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--trs-line); }
.trs-mh { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--trs-line); }
.trs-mh > i { font-size: 13px; }
.trs-mh > span { display: flex; flex-direction: column; min-width: 0; }
.trs-mh b { font-size: 14px; font-weight: 800; }
.trs-mh small { font-size: 11.5px; color: var(--trs-muted); }
.trs-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }

.trs-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; }
.trs-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; background: #f3f2f9; font-size: 12px; color: var(--trs-muted); }
.trs-trend { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #f7f6fc; }
.trs-trend > b { font-size: 13px; font-weight: 800; }
.trs-trend span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-trend small, .trs-trend em { font-size: 10.5px; font-weight: 500; font-style: normal; color: var(--trs-muted); }

/* ---------- Truth gönderisi ---------- */
.trs-post { position: relative; padding: 12px 14px 8px; }
.trs-rtd { display: flex; align-items: center; gap: 6px; height: 0; margin-left: 30px; overflow: hidden; font-size: 11.5px; font-weight: 700; color: var(--trs-green); opacity: 0; transition: height .25s ease, opacity .25s ease, margin .25s ease; }
.trs-rtd.is-on { height: 18px; margin-bottom: 4px; opacity: 1; }
.trs-post__h { display: flex; align-items: center; gap: 10px; }
.trs-ava { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #ff7a45; color: #fff; font-size: 16px; }
.trs-post__who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.trs-post__who b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-post__who small { font-size: 12px; color: var(--trs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-post__more { font-size: 15px; color: var(--trs-muted); }
.trs-post__t { margin: 8px 0 10px; font-size: 14px; line-height: 1.45; color: var(--trs-ink); }
.trs-media { position: relative; display: block; height: 128px; border: 1px solid #e3e0f2; border-radius: 12px; background: #e9e6ff; overflow: hidden; }
.trs-media__sun { position: absolute; right: 26px; top: 16px; font-size: 28px; color: #f59e0b; }
.trs-media__bike { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); font-size: 46px; color: var(--trs-purple); }
.trs-media__road { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: #c9c3fb; }
.trs-media__tag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: rgba(21, 18, 43, .78); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.trs-acts { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px 2px; }
.trs-a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--trs-muted); transition: color .2s ease; }
.trs-a i { font-size: 15px; }
.trs-a b { font-weight: 700; font-variant-numeric: tabular-nums; }
.trs-a--rt.is-on, .trs-post--retruth .trs-a--rt { color: var(--trs-green); }
.trs-a--like.is-on, .trs-post--like .trs-a--like { color: var(--trs-red); }
.trs-a--save.is-on, .trs-post--save .trs-a--save { color: var(--trs-purple); }
.trs-a--like.is-on i, .trs-a--save.is-on i, .trs-post--like .trs-a--like i, .trs-post--save .trs-a--save i { font-weight: 900; }
.trs-a.is-pop i { animation: lws-pop .45s cubic-bezier(.2, .9, .3, 1.4); }
.trs-plus { right: 18px; bottom: 40px; color: var(--trs-purple); }
.trs-plus--prof { right: 24px; top: 100px; bottom: auto; }

.trs-pop {
    position: absolute;
    left: 18%; bottom: 42px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
    color: var(--trs-ink);
    box-shadow: 0 10px 28px rgba(21, 18, 43, .22), 0 0 0 1px rgba(21, 18, 43, .06);
    font-size: 12.5px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transform-origin: left bottom;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.2);
    pointer-events: none;
}
.trs-pop.is-on { opacity: 1; transform: none; }
.trs-pop span { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; border-radius: 7px; white-space: nowrap; transition: background .15s ease; }
.trs-pop span i { width: 15px; text-align: center; color: var(--trs-muted); }
.trs-pop .is-hot i { color: var(--trs-green); }
.trs-pop .is-hover { background: var(--trs-soft); }

.trs-toast {
    position: absolute;
    left: 50%; bottom: 16px;
    z-index: 4;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 18px;
    background: var(--trs-ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .25s ease, transform .3s ease;
    pointer-events: none;
}
.trs-toast i { color: #a59cff; }
.trs-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Profil ---------- */
.trs-prof { position: relative; }
.trs-prof__ban { display: flex; align-items: flex-end; justify-content: center; gap: 20px; height: 84px; padding-bottom: 6px; background: var(--trs-purple); font-size: 30px; color: rgba(255, 255, 255, .28); }
.trs-prof__row { display: flex; align-items: flex-end; gap: 8px; padding: 0 14px; }
.trs-prof__ava { width: 64px; height: 64px; margin: -32px auto 0 0; border: 3px solid #fff; font-size: 24px; }
.trs-cbtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px #dcd9ec; font-size: 13px; color: var(--trs-ink); }
.trs-fbtn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 16px; border-radius: 16px; background: var(--trs-purple); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; transition: background .2s ease, color .2s ease, transform .15s ease; }
.trs-fbtn.is-press { transform: scale(.93); }
.trs-fbtn.is-on { background: #fff; color: var(--trs-ink); box-shadow: inset 0 0 0 1px #cfcbe6; }
.trs-prof__n { display: block; padding: 8px 14px 0; font-size: 16px; font-weight: 800; }
.trs-prof__u { display: block; padding: 0 14px; font-size: 12.5px; color: var(--trs-muted); }
.trs-prof__d { margin: 6px 14px 0; font-size: 13px; line-height: 1.45; color: #34304d; }
.trs-prof__st { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 14px 0; font-size: 12.5px; color: var(--trs-muted); }
.trs-prof__st b { font-weight: 800; color: var(--trs-ink); font-variant-numeric: tabular-nums; }
.trs-tabs { display: flex; gap: 18px; padding: 10px 14px 0; border-bottom: 1px solid var(--trs-line); font-size: 12.5px; font-weight: 600; color: var(--trs-muted); }
.trs-tabs > * { padding-bottom: 8px; }
.trs-tabs b { color: var(--trs-ink); box-shadow: inset 0 -2px 0 var(--trs-purple); }

/* Sabitlenmiş Truth (profil) · akışta sıradaki gönderi */
.trs-pin { padding: 10px 14px; }
.trs-pin__l { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 4px; font-size: 11.5px; font-weight: 700; color: var(--trs-muted); }
.trs-pin__r, .trs-next { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--trs-ink); }
.trs-pin__r > span:last-child, .trs-next > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.trs-pin__r b, .trs-next b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-pin__r small, .trs-next small { font-size: 12px; font-weight: 500; color: var(--trs-muted); }
.trs-next { padding: 12px 14px; border-top: 1px solid var(--trs-line); }
.trs-ava--b { background: #0ea5a4; }

/* ---------- İstatistik (sonuç) ---------- */
.trs-stat { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 16px; border: 1px solid #e3e0f2; border-radius: 14px; background: #fff; color: var(--trs-ink); }
.trs-stat__h { display: flex; align-items: center; gap: 10px; }
.trs-stat__t { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.trs-stat__t b { font-size: 15px; font-weight: 800; }
.trs-stat__t small { font-size: 12px; color: var(--trs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--trs-soft); color: var(--trs-purple); font-size: 11.5px; font-weight: 700; }
.trs-live i { font-size: 7px; }
.trs-stat__b { display: grid; grid-template-columns: minmax(0, 1fr) 226px; gap: 12px; flex: 1 1 auto; min-height: 0; }
.trs-stat__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.trs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trs-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: #f6f5fb; }
.trs-kpi small { font-size: 11px; font-weight: 600; color: var(--trs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-kpi b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--trs-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trs-kpi:first-child b { color: var(--trs-purple); }
.trs-kpi em { font-style: normal; font-size: 11px; color: #8f8ba5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-chart { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; padding: 12px 14px 8px; border: 1px solid var(--trs-line); border-radius: 10px; }
.trs-chart__cap { font-size: 12px; font-weight: 700; color: var(--trs-muted); }
.trs-chart__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; min-height: 90px; }
.trs-chart__col { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 0; }
.trs-chart__col i {
    display: block;
    height: var(--h);
    border-radius: 5px 5px 2px 2px;
    background: #e3e0f5;
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--i) * .09s);
}
.trs-chart__col.is-up i { background: var(--trs-purple); }
.trs-chart__col small { font-size: 10.5px; font-weight: 600; text-align: center; color: #8f8ba5; }
.trs-chart.is-grow .trs-chart__col i { transform: scaleY(1); }

.trs-mini { min-width: 0; min-height: 0; border: 1px solid var(--trs-line); border-radius: 12px; overflow: hidden; }
.trs-post--mini { padding: 10px 12px 6px; }
.trs-post--mini .trs-ava { width: 32px; height: 32px; font-size: 13px; }
.trs-post--mini .trs-post__who b { font-size: 12.5px; }
.trs-post--mini .trs-post__who small { font-size: 11px; }
.trs-post--mini .trs-post__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 6px 0 8px; overflow: hidden; font-size: 12.5px; }
.trs-post--mini .trs-media { height: 92px; }
.trs-post--mini .trs-media__bike { font-size: 34px; bottom: 16px; }
.trs-post--mini .trs-media__sun { font-size: 20px; right: 16px; top: 34px; }
.trs-post--mini .trs-media__tag { font-size: 10px; padding: 3px 6px; }
.trs-post--mini .trs-acts { padding: 8px 0 0; }
.trs-post--mini .trs-a { gap: 4px; font-size: 11px; }
.trs-post--mini .trs-a i { font-size: 13px; }

.trs-who { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--trs-line); border-radius: 12px; }
.trs-who__h { font-size: 13px; font-weight: 800; }
.trs-who__r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trs-who__ava { display: block; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.trs-who__ava > * { display: block; width: 100%; height: 100%; object-fit: cover; }
.trs-who__r > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.trs-who__r b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-who__r small { font-size: 11px; color: var(--trs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trs-who__r em { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--trs-soft); color: var(--trs-purple); font-size: 11px; font-style: normal; }
.trs-win i { color: #a59cff !important; }

/* ---------- Dar ekran ---------- */
@media (max-width: 620px) {
    .trs-v { gap: 10px; }
    .trs-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
    .trs-rail, .trs-side { display: none; }
    .trs-main { border-right: 0; }
    .trs-mbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--trs-line); }
    .trs-mbar .trs-logo { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
    .trs-mbar b { margin-right: auto; }
    .trs-mbar > i { font-size: 14px; color: var(--trs-muted); }
    .trs-mnav { display: flex; align-items: center; justify-content: space-around; height: 40px; border-top: 1px solid var(--trs-line); }
    .trs-mnav i { font-size: 15px; color: var(--trs-muted); }
    .trs-mnav i.is-on { color: var(--trs-purple); }
    .trs-mh { padding: 7px 12px; }
    .trs-mh b { font-size: 13px; }
    .trs-post { padding: 10px 12px 6px; }
    .trs-post__t { margin: 6px 0 8px; font-size: 13px; }
    .trs-media { height: 92px; }
    .trs-media__bike { font-size: 34px; bottom: 16px; }
    .trs-media__sun { font-size: 22px; right: 18px; top: 34px; }
    .trs-acts { padding: 8px 2px 0; }
    .trs-a { gap: 4px; font-size: 11.5px; }
    .trs-a i { font-size: 14px; }
    .trs-pop { left: 12%; bottom: 36px; }
    .trs-toast { bottom: 52px; }
    .trs-prof__ban { height: 60px; font-size: 22px; gap: 14px; }
    .trs-prof__row { padding: 0 12px; }
    .trs-prof__ava { width: 54px; height: 54px; margin-top: -27px; font-size: 20px; }
    .trs-prof__n { padding: 6px 12px 0; font-size: 15px; }
    .trs-prof__u { padding: 0 12px; }
    .trs-prof__d { margin: 4px 12px 0; font-size: 12.5px; }
    .trs-prof__st { padding: 6px 12px 0; gap: 4px 10px; font-size: 12px; }
    .trs-tabs { padding: 8px 12px 0; }
    .trs-plus--prof { top: 76px; }
    .trs-pin { padding: 8px 12px; }
    .trs-next { padding: 10px 12px; }
    .trs-stat { padding: 12px; gap: 10px; }
    .trs-stat__b { grid-template-columns: minmax(0, 1fr); }
    .trs-mini, .trs-who { display: none; }
    .trs-kpis { gap: 6px; }
    .trs-kpi { padding: 9px 8px; }
    .trs-kpi b { font-size: 16px; }
    .trs-kpi small, .trs-kpi em { font-size: 10px; }
    .trs-chart__bars { gap: 6px; }
    .trs-win { width: max-content; max-width: calc(100% - 24px); white-space: normal; text-align: left; font-size: 12.5px; }
}