/* =====================================================================
   LikedWin — TikTok sahnesi (lws--tiktok, tt-*)
   Kabuk: organik-hit ohs-* + sahne-motor lws-* (önce yüklenir). Burada
   yalnız TikTok'a özel görünümler: Sana Özel akışı (dikey video + sağ
   sütun + yorum/paylaş paneli + izleme sayacı), profil, ses sayfası,
   kamera/gönderi, hikâye, mesajlar, TikTok Studio. TikTok arayüzü koyu
   (platformun kendi görünümü, temadan bağımsız); Studio site temasıyla.
   Masaüstü: tiktok.com web düzeni (sol menü). Mobil (≤620): uygulama
   düzeni (üst sekmeler, video üstünde sütun, alt menü, alttan paneller).
   Gradyan YOK — logo gölgesi bile düz renk (camgöbeği / kırmızı kaydırma).
   ===================================================================== */

.lws--tiktok {
    --lws-brand: #fe2c55;
    --lws-brand-ink: #fff;
    --lws-brand-soft: rgba(254, 44, 85, .12);
    --tt-bg: #121212;
    --tt-bg2: #000;
    --tt-panel: #1e1e1e;
    --tt-panel2: #2c2c2e;
    --tt-line: #2f2f31;
    --tt-text: #f1f1f2;
    --tt-muted: #a5a5ab;
    --tt-red: #fe2c55;
    --tt-cyan: #25f4ee;
    --tt-yellow: #facd00;
}
.lws--tiktok .ohs-chart__col.is-up i { background: #fe2c55; }
.lws--tiktok .lws-shot__img > i:first-child,
.lws--tiktok .lws-shots__cap i { color: #e11d48; }

/* ---------- Ortak çerçeve ---------- */
.tt-v, .tt-p, .tt-s, .tt-cr, .tt-st, .tt-dm { display: flex; flex-direction: column; gap: 12px; }
.tt-top { justify-content: space-between; flex-wrap: nowrap; }
.tt-top .ohs-who { min-width: 0; }
.tt-top .ohs-who__txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tt-cnt { flex: 0 0 auto; white-space: nowrap; }
.tt-app {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 14px;
    background: var(--tt-bg);
    color: var(--tt-text);
    overflow: hidden;
}
.tt-main { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* Logo: TikTok'un iki renkli kaydırması düz gölgelerle */
.tt-logo { display: inline-flex; align-items: center; gap: 7px; color: #fff; }
.tt-logo i { font-size: 19px; text-shadow: -1.5px -1px 0 var(--tt-cyan), 1.5px 1px 0 var(--tt-red); }
.tt-logo b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }

/* Sol menü (masaüstü) */
.tt-side { display: flex; flex-direction: column; flex: 0 0 140px; gap: 10px; padding: 14px 8px 14px 14px; border-right: 1px solid var(--tt-line); }
.tt-search { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 15px; background: var(--tt-panel2); font-size: 12px; color: var(--tt-muted); }
.tt-search i { font-size: 11px; }
.tt-menu { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 0; padding: 0; list-style: none; }
.tt-menu li { display: flex; align-items: center; gap: 10px; height: 31px; padding: 0 6px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--tt-text); white-space: nowrap; }
.tt-menu li i { width: 18px; font-size: 14px; text-align: center; }
.tt-menu li.is-on { color: var(--tt-red); }

/* Avatarlar */
.tt-ava { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #f08a24; color: #fff; font-size: 16px; }
.tt-ava--lg { width: 56px; height: 56px; font-size: 22px; }
.tt-ava--xl { width: 92px; height: 92px; font-size: 34px; }
.tt-ava.has-story { box-shadow: 0 0 0 3px var(--tt-bg), 0 0 0 5px var(--tt-cyan); }
.tt-lav { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }
.tt-c__ava { display: block; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.tt-c__ava svg, .tt-c__ava img { width: 100%; height: 100%; object-fit: cover; }

/* Düğmeler */
.tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--tt-panel2);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.tt-btn--red { background: var(--tt-red); }
.tt-btn--ic { width: 34px; padding: 0; }
.tt-btn--sm { height: 28px; padding: 0 12px; font-size: 11.5px; }
.tt-btn.is-press { transform: scale(.93); }

/* Uygulama içi bildirim (Favorilere eklendi …) */
.tt-vtoast {
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 4;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(40, 40, 42, .94);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2);
    pointer-events: none;
}
.tt-vtoast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ======================= SANA ÖZEL: VİDEO ======================= */
.tt-mtabs, .tt-nav, .tt-disc { display: none; }
.tt-feed {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    transform: translateX(-50%);
    transition: left .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
}
.tt-vmain.is-side .tt-feed { left: 22px; transform: none; }
.tt-vid { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #23413b; }

/* Temsili tarif videosu: duvar + tezgâh + tabak (düz renkler) */
.tt-scene { position: absolute; inset: 0; background: #23413b; }
.tt-scene__table { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: #5a3a24; box-shadow: inset 0 6px 0 #6f4a2f; }
.tt-scene__txt {
    position: absolute;
    left: 50%;
    top: 12%;
    padding: 5px 10px;
    border-radius: 6px;
    background: #fff;
    color: #161616;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
}
.tt-scene__plate {
    position: absolute;
    left: 50%;
    top: 46%;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #f3eee4;
    box-shadow: 0 0 0 7px #e1d8c8, 0 12px 0 3px rgba(0, 0, 0, .18);
    transform: translate(-50%, -50%);
}
.tt-scene__plate i { font-size: 42px; color: #e8902a; }
.tt-scene__leaf { position: absolute; left: 14%; top: 62%; font-size: 16px; color: #69b34c; transform: rotate(-30deg); }
.tt-scene__leaf--b { left: auto; right: 13%; top: 57%; font-size: 13px; transform: rotate(40deg); }
.tt-scene__pep { position: absolute; right: 18%; top: 66%; font-size: 15px; color: #e03131; transform: rotate(-20deg); }

/* Kalp patlaması (çift dokunma) */
.tt-burst {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 3;
    font-size: 64px;
    color: var(--tt-red);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4) rotate(-12deg);
    pointer-events: none;
}
.tt-burst.is-on { animation: tt-burst .9s ease-out; }
@keyframes tt-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-12deg); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-12deg); }
    60% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
    100% { opacity: 0; transform: translate(-50%, -85%) scale(1.25) rotate(-12deg); }
}

/* Alt bilgi: kullanıcı, açıklama, ses şeridi */
.tt-cap { position: absolute; left: 0; right: 0; bottom: 11px; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; color: #fff; }
.tt-cap > b { font-size: 13px; font-weight: 800; }
.tt-cap > b small { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.tt-cap p { margin: 0; font-size: 12px; line-height: 1.35; }
.tt-cap p b { font-weight: 800; }
.tt-strip { display: flex; align-items: center; gap: 6px; max-width: 88%; font-size: 11.5px; font-weight: 600; transition: transform .15s ease; }
.tt-strip.is-press { transform: scale(.95); }
.tt-strip > i { font-size: 10px; }
.tt-marq { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.tt-marq span { display: inline-block; animation: tt-marq 9s linear infinite; }
@keyframes tt-marq { to { transform: translateX(-50%); } }

/* Oynatma çubuğu + süre */
.tt-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.tt-prog i { display: block; height: 100%; background: #fff; transform: scaleX(.34); transform-origin: left center; }
.tt-ptime {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .5);
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
    font-variant-numeric: tabular-nums;
}
.tt-ptime b { color: #fff; }

/* Sağ sütun */
.tt-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 2px; }
.tt-rail__ava { position: relative; margin-bottom: 8px; }
.tt-rail__plus {
    position: absolute;
    left: 50%;
    bottom: -9px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tt-red);
    color: #fff;
    font-size: 10px;
    transform: translateX(-50%);
    transition: background .25s ease, color .25s ease, opacity .35s ease, transform .3s ease;
}
.tt-rail__plus .fa-check { display: none; }
.tt-rail__plus.is-on { background: #fff; color: var(--tt-red); }
.tt-rail__plus.is-on .fa-plus { display: none; }
.tt-rail__plus.is-on .fa-check { display: block; }
.tt-rail__plus.is-gone { opacity: 0; transform: translateX(-50%) scale(.4); }
.tt-rail__plus.is-press { transform: translateX(-50%) scale(.82); }
.tt-vplus1 { left: 46px; top: 4px; color: var(--tt-cyan); }
.tt-ra { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tt-ra__ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--tt-panel2);
    color: #fff;
    font-size: 18px;
    transition: color .2s ease, transform .15s ease;
}
.tt-ra__ic.is-press { transform: scale(.86); }
.tt-ra b { font-size: 11.5px; font-weight: 700; color: var(--tt-text); font-variant-numeric: tabular-nums; }
.tt-ra--like.is-on .tt-ra__ic { color: var(--tt-red); }
.tt-ra--save.is-on .tt-ra__ic { color: var(--tt-yellow); }
.tt-ra.is-on .tt-ra__ic i { animation: lws-pop .45s cubic-bezier(.2, .9, .3, 1.4); }

/* İzleme sayacı (HUD) — masaüstünde sağ sütunda */
.lws--tiktok .tt-hud {
    top: 50%;
    right: 18px;
    bottom: auto;
    width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-46%);
    transition: opacity .35s ease, transform .4s ease, visibility 0s linear .4s;
}
.tt-vmain.is-hud .tt-hud { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .35s ease .15s, transform .4s ease .15s, visibility 0s; }
.tt-hud__bar { display: block; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tt-hud__bar i { display: block; height: 100%; background: var(--tt-red); transform: scaleX(1); transform-origin: left center; }
.tt-hud__marks { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 9px; }
.tt-hud__marks span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; background: var(--ok-bg); color: var(--ok-fg); font-size: 10.5px; font-weight: 700; white-space: nowrap; transition: background var(--ease), color var(--ease); }
.tt-hud__marks span.is-off { background: var(--surface-2); color: var(--muted-2); }
.tt-hud__marks span.is-snap { animation: lws-pop .45s cubic-bezier(.2, .9, .3, 1.4); }
.tt-hud__marks .tt-hud__rule { background: var(--surface-2); color: var(--muted); }

/* ---------- Paneller (yorum / gönder): masaüstünde sağda ---------- */
.tt-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 270px;
    border: 1px solid var(--tt-line);
    border-radius: 12px;
    background: var(--tt-panel);
    opacity: 0;
    visibility: hidden;
    transform: translateX(24px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .45s;
}
.tt-vmain.is-cmt .tt-cmt,
.tt-vmain.is-share .tt-share,
.tt-smain.is-share .tt-share { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .1s, transform .45s cubic-bezier(.4, 0, .2, 1) .1s, visibility 0s; }
.tt-panel__h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--tt-line); font-size: 13px; }
.tt-panel__h b { color: #fff; font-weight: 800; }
.tt-panel__h i { color: var(--tt-muted); }

/* Yorumlar */
.tt-clist { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; margin: 0; padding: 12px 14px; list-style: none; overflow: hidden; }
.tt-c { display: flex; align-items: flex-start; gap: 9px; }
.tt-c.is-new { animation: tt-in .4s ease; }
@keyframes tt-in { from { opacity: 0; transform: translateY(-8px); } }
.tt-c__b { display: flex; flex-direction: column; flex: 1 1 auto; gap: 2px; min-width: 0; }
.tt-c__b small { font-size: 11px; font-weight: 700; color: var(--tt-muted); }
.tt-c__b > span { font-size: 12.5px; line-height: 1.38; color: var(--tt-text); overflow-wrap: anywhere; }
.tt-c__b em { font-style: normal; font-size: 10.5px; color: #85858b; }
.tt-at { font-weight: 800; color: #8fc7ff; }
.tt-c__lk { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--tt-muted); }
.tt-c__lk i { font-size: 12px; }
.tt-cin { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--tt-line); }
.tt-cin__f {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--tt-panel2);
    font-size: 12px;
    line-height: 1.38;
    color: #fff;
    overflow-wrap: anywhere;
    transition: border-color .2s ease;
}
.tt-cin__f em { font-style: normal; color: var(--tt-muted); }
.tt-cin__f.has-t em { display: none; }
.tt-cin__f.is-focus { border-color: #5a5a60; }
.tt-cin__f.is-focus .ohs-caret,
.tt-chat__f.is-focus .ohs-caret { display: inline-block; }
.tt-cin__t { min-width: 0; }
.tt-cin__wc { position: absolute; right: 66px; top: -9px; z-index: 1; flex: 0 0 auto; padding: 2px 7px; border: 1px solid var(--tt-line); border-radius: 10px; background: var(--tt-panel2); font-size: 10.5px; font-weight: 700; color: var(--tt-muted); font-variant-numeric: tabular-nums; }
.tt-cin__wc.is-ok { background: rgba(37, 244, 238, .16); color: var(--tt-cyan); }
.tt-cin__send { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: #5d5d63; transition: color .2s ease, transform .15s ease; }
.tt-cin__send.is-on { color: var(--tt-red); }
.tt-cin__send.is-press { transform: scale(.9); }
.tt-mention {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 60px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--tt-line);
    border-radius: 10px;
    background: var(--tt-panel2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.tt-mention.is-on { opacity: 1; transform: none; }
.tt-mention > span:last-child { display: flex; flex-direction: column; }
.tt-mention b { font-size: 12px; color: #fff; }
.tt-mention small { font-size: 10.5px; color: var(--tt-muted); }

/* Gönder paneli */
.tt-share__lbl { padding: 12px 14px 8px; font-size: 11.5px; font-weight: 700; color: var(--tt-muted); }
.tt-share__fr { display: flex; justify-content: space-between; gap: 6px; padding: 0 14px; }
.tt-fr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tt-fr .tt-lav { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 0 transparent; transition: box-shadow .2s ease; }
.tt-fr small { font-size: 10.5px; color: var(--tt-text); }
.tt-fr__ok { position: absolute; right: -3px; top: 26px; font-size: 15px; color: var(--tt-red); background: #fff; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.tt-fr.is-sel .tt-lav { box-shadow: 0 0 0 2px var(--tt-panel), 0 0 0 4px var(--tt-red); }
.tt-fr.is-sel .tt-fr__ok { opacity: 1; transform: none; }
.tt-share__opts { display: flex; justify-content: space-between; gap: 6px; margin: 16px 14px 0; padding-top: 14px; border-top: 1px solid var(--tt-line); }
.tt-share__opts span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; color: var(--tt-text); }
.tt-share__opts i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 15px; }
.tt-share__send {
    display: grid;
    place-items: center;
    height: 38px;
    margin: auto 14px 14px;
    border-radius: 8px;
    background: var(--tt-panel2);
    color: #75757b;
    font-size: 13px;
    font-weight: 800;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.tt-share__send.is-on { background: var(--tt-red); color: #fff; }
.tt-share__send.is-done { background: var(--tt-panel2); color: var(--tt-cyan); }
.tt-share__send.is-press { transform: scale(.95); }

/* ======================= PROFİL ======================= */
.tt-pmain { padding: 18px 20px 0; }
.tt-pscroll { transition: transform .8s cubic-bezier(.45, .05, .25, 1); }
.tt-phead { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.tt-pinfo { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tt-puser { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.tt-puser b { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.tt-puser small { font-size: 13px; font-weight: 600; color: var(--tt-text); }
.tt-pbtns { display: flex; gap: 8px; }
.tt-pbtns .tt-btn--red { min-width: 132px; }
.tt-pbtns .tt-btn--red.is-on { background: var(--tt-panel2); }
.tt-pstats { display: flex; gap: 16px; font-size: 13px; color: var(--tt-muted); white-space: nowrap; }
.tt-pstats b { margin-right: 4px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.tt-pbio { margin: 0; font-size: 12.5px; color: var(--tt-text); }
.tt-pplus { left: 330px; top: 46px; color: var(--tt-cyan); }
.tt-ptabs { display: flex; gap: 4px; margin-top: 14px; border-bottom: 1px solid var(--tt-line); }
.tt-ptabs span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--tt-muted); white-space: nowrap; }
.tt-ptabs span i { font-size: 12px; }
.tt-ptabs .is-on { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.tt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tt-th { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; transition: box-shadow .2s ease; }
.tt-th.is-hover { box-shadow: inset 0 0 0 2px #fff; }
.tt-th__ic { font-size: 24px; color: rgba(255, 255, 255, .5); }
.tt-th__pin { position: absolute; left: 5px; top: 5px; padding: 2px 6px; border-radius: 4px; background: var(--tt-red); color: #fff; font-size: 10px; font-weight: 700; }
.tt-th__v { position: absolute; left: 6px; bottom: 5px; display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #fff; }
.tt-th__v i { font-size: 8px; }
.tt-th__lk {
    position: absolute;
    right: 5px;
    top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #fff;
    color: var(--tt-red);
    font-size: 10px;
    font-weight: 800;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.4);
}
.tt-th.is-liked .tt-th__lk { opacity: 1; transform: none; }
.tt-th__burst { position: absolute; left: 50%; top: 50%; font-size: 36px; color: var(--tt-red); opacity: 0; transform: translate(-50%, -50%) scale(.4); pointer-events: none; }
.tt-th__burst.is-on { animation: tt-burst .8s ease-out; }

/* ======================= SES SAYFASI ======================= */
.tt-smain { padding: 18px 20px 0; }
.tt-shead { display: flex; align-items: center; gap: 16px; }
.tt-scover { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 92px; height: 92px; border-radius: 10px; background: #5a3420; color: #e8902a; font-size: 36px; }
.tt-scover__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; transform: translate(-50%, -50%); }
.tt-sinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tt-sinfo > b { font-size: 21px; font-weight: 800; color: #fff; }
.tt-sinfo > span { font-size: 13px; font-weight: 700; color: var(--tt-text); }
.tt-sinfo small { font-size: 12px; color: var(--tt-muted); }
.tt-sinfo small b { color: var(--tt-text); font-variant-numeric: tabular-nums; }
.tt-sbtns { display: flex; gap: 8px; margin-top: 14px; }
.tt-sfav i { font-size: 13px; }
.tt-sfav.is-on { color: var(--tt-yellow); }
.tt-sfav.is-on i::before { content: "\f02e"; font-weight: 900; }
.tt-sfav.is-on i { font-weight: 900; }
.tt-ptabs--s { margin-top: 12px; }
.tt-grid--s .tt-th__pin { background: var(--tt-cyan); color: #0b0b0c; }
.tt-smain .tt-vtoast { top: 50%; }

/* ======================= KAMERA + GÖNDERİ ======================= */
.tt-camapp { align-items: center; justify-content: center; gap: 24px; padding: 12px; }
.tt-cam { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #3a2f2a; color: #fff; }
.tt-cam__scene { position: absolute; inset: 0; display: grid; place-items: center; background: #3a2f2a; }
.tt-cam__pan { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: #4c3628; }
.tt-cam__scene > i { position: relative; font-size: 64px; color: rgba(255, 255, 255, .32); }
.tt-cam__seg { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 2; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.tt-cam__seg i { display: block; height: 100%; background: var(--tt-red); transform: scaleX(0); transform-origin: left center; }
.tt-cam__x { position: absolute; left: 10px; top: 20px; z-index: 2; font-size: 15px; }
.tt-cam__sound {
    position: absolute;
    left: 50%;
    top: 18px;
    z-index: 2;
    max-width: 66%;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .45);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%);
}
.tt-cam__tools { position: absolute; right: 7px; top: 50px; z-index: 2; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.tt-cam__tools li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tt-cam__tools i { font-size: 15px; }
.tt-cam__tools small { font-size: 9px; font-weight: 600; }
.tt-cam__modes { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 2; display: flex; justify-content: center; gap: 12px; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.tt-cam__modes .is-on { color: #fff; }
.tt-cam__bot { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; align-items: center; justify-content: space-around; }
.tt-cam__sq { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tt-cam__sq i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, .2); font-size: 13px; }
.tt-cam__sq small { font-size: 9px; font-weight: 600; }
.tt-rec { display: grid; place-items: center; width: 54px; height: 54px; border: 4px solid rgba(255, 255, 255, .85); border-radius: 50%; }
.tt-rec i { display: block; width: 38px; height: 38px; border-radius: 50%; background: var(--tt-red); transition: border-radius .3s ease, transform .3s ease; }
.tt-rec.is-rec i { border-radius: 8px; transform: scale(.55); }

.tt-post { display: flex; flex-direction: column; flex: 0 0 290px; gap: 12px; padding: 16px; border: 1px solid var(--tt-line); border-radius: 12px; background: var(--tt-panel); transition: opacity .35s ease, transform .4s ease; }
.tt-post__h { font-size: 15px; font-weight: 800; color: #fff; }
.tt-post__row { display: flex; gap: 10px; }
.tt-post__cap { flex: 1 1 auto; min-height: 76px; padding: 10px; border-radius: 8px; background: var(--tt-panel2); font-size: 12.5px; line-height: 1.4; }
.tt-post__th { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 56px; gap: 5px; height: 76px; border-radius: 6px; background: #3a2f2a; color: rgba(255, 255, 255, .6); font-size: 18px; }
.tt-post__th small { font-size: 9.5px; font-weight: 700; color: #fff; }
.tt-post__ln { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--tt-line); font-size: 12px; color: var(--tt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-post__ln i { width: 14px; color: var(--tt-muted); }
.tt-post__btns { display: flex; gap: 8px; margin-top: 2px; }
.tt-post__btns .tt-btn { flex: 1 1 0; }
.tt-camapp .tt-vtoast { top: 18%; }

/* ======================= HİKÂYE ======================= */
.tt-storyapp { align-items: center; justify-content: center; gap: 14px; padding: 12px; background: #0b0b0b; }
.tt-story__x { position: absolute; right: 16px; top: 14px; font-size: 18px; color: #fff; }
.tt-story__nav { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--tt-panel2); color: #fff; font-size: 12px; }
.tt-story { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #3b2d5e; color: #fff; }
.tt-story__bars { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 2; display: flex; gap: 4px; }
.tt-story__bars i { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.tt-story__bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.tt-story__head { position: absolute; left: 10px; right: 10px; top: 18px; z-index: 2; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.tt-story__head .tt-ava { width: 28px; height: 28px; font-size: 11px; }
.tt-story__head small { color: rgba(255, 255, 255, .7); }
.tt-story__head > i { margin-left: auto; }
.tt-story__scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-bottom: 20px; }
.tt-story__stk { padding: 6px 12px; border-radius: 8px; background: #fff; color: #161616; font-size: 14px; font-weight: 800; line-height: 1.25; text-align: center; }
.tt-story__scene > i { font-size: 48px; color: #ffd8a8; }
.tt-story__poll { display: flex; flex-direction: column; gap: 5px; width: 72%; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .94); color: #161616; font-size: 11px; }
.tt-story__poll b { font-size: 11.5px; text-align: center; }
.tt-story__poll span { padding: 5px; border-radius: 6px; background: #ececee; font-weight: 700; text-align: center; }
.tt-story.is-emo .tt-story__poll { display: none; }
.tt-story__emo { position: absolute; left: 8px; right: 8px; bottom: 54px; z-index: 2; display: flex; justify-content: space-between; padding: 5px 9px; border-radius: 20px; background: rgba(0, 0, 0, .4); }
.tt-story__emo span { font-size: 19px; line-height: 1.2; transition: transform .2s ease; }
.tt-story__emo span.is-press { transform: scale(1.4); }
.tt-story__fly { position: absolute; left: 50%; bottom: 100px; z-index: 3; font-size: 40px; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.tt-story__fly.is-on { animation: tt-fly .9s ease-out; }
@keyframes tt-fly {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(.5); }
    30% { opacity: 1; transform: translate(-50%, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
}
.tt-story__in { position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 9px; }
.tt-story__f { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 17px; font-size: 13px; white-space: nowrap; }
.tt-story__f em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .75); }
.tt-story__f.has-t em { display: none; }
.tt-story__in > i { font-size: 17px; }
.tt-story__send { font-size: 15px; transition: color .2s ease, transform .15s ease; }
.tt-story__send.is-on { color: var(--tt-red); }
.tt-story__send.is-press { transform: scale(.85); }
.tt-story .tt-vtoast { top: 30%; }
.lws--tiktok .tt-hud--story { position: relative; top: auto; right: auto; bottom: auto; flex: 0 0 236px; width: 236px; opacity: 1; visibility: visible; transform: none; }
.tt-hud--story .tt-hud__marks span[data-tt-smark].is-off { background: var(--surface-2); color: var(--muted-2); }

/* ======================= MESAJLAR ======================= */
.tt-dmlist { display: flex; flex-direction: column; flex: 0 0 196px; gap: 3px; padding: 14px 8px; border-right: 1px solid var(--tt-line); }
.tt-dmlist__h { padding: 0 8px 8px; font-size: 15px; font-weight: 800; color: #fff; }
.tt-dmi { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; }
.tt-dmi.is-on { background: var(--tt-panel2); }
.tt-dmi .tt-ava, .tt-dmi .tt-lav { width: 36px; height: 36px; font-size: 14px; }
.tt-dmi > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tt-dmi b { font-size: 12.5px; color: #fff; white-space: nowrap; }
.tt-dmi small { font-size: 11px; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-chat { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tt-chat__h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--tt-line); }
.tt-chat__h .tt-ava { width: 34px; height: 34px; font-size: 13px; }
.tt-chat__h > span:not(.tt-ava) { display: flex; flex-direction: column; min-width: 0; }
.tt-chat__h b { font-size: 13px; color: #fff; }
.tt-chat__h small { font-size: 11px; color: var(--tt-muted); }
.tt-chat__h > i { margin-left: auto; color: var(--tt-muted); }
.tt-chat__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 16px 14px 12px; overflow: hidden; }
.tt-chat__intro { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tt-chat__intro b { margin-top: 4px; font-size: 14px; color: #fff; }
.tt-chat__intro small { font-size: 11.5px; color: var(--tt-muted); }
.tt-chat__intro .tt-btn { margin-top: 6px; }
.tt-chat__msg { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; gap: 4px; max-width: 80%; margin-top: auto; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .35s ease; }
.tt-chat__msg.is-on { opacity: 1; transform: none; }
.tt-bubble { padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--tt-red); color: #fff; font-size: 12.5px; line-height: 1.4; }
.tt-chat__msg small { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--tt-muted); }
.tt-chat__msg small i { font-size: 9px; }
.tt-chat__in { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-top: 1px solid var(--tt-line); }
.tt-chat__f { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; min-width: 0; min-height: 36px; padding: 7px 14px; border-radius: 18px; background: var(--tt-panel2); font-size: 12.5px; line-height: 1.38; color: #fff; overflow-wrap: anywhere; }
.tt-chat__f em { font-style: normal; color: var(--tt-muted); }
.tt-chat__f.has-t em { display: none; }
.tt-chat__in > i { font-size: 16px; color: var(--tt-muted); }
.tt-chat__send { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #3a3a3c; color: #85858b; font-size: 12px; transition: background .2s ease, color .2s ease, transform .15s ease; }
.tt-chat__send.is-on { background: var(--tt-red); color: #fff; }
.tt-chat__send.is-press { transform: scale(.88); }

/* ======================= TIKTOK STUDIO ======================= */
.tt-studio { gap: 12px; }
.tt-st__head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tt-st__logo { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #000; color: #fff; font-size: 18px; }
.tt-st__logo i { text-shadow: -1.5px -1px 0 var(--tt-cyan), 1.5px 1px 0 var(--tt-red); }
.tt-st__name { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.tt-st__name b { font-size: 15px; font-weight: 800; color: var(--ink); }
.tt-st__name small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-st__tabs { display: flex; gap: 6px; }
.tt-st__tabs span { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tt-st__tabs .is-on { background: var(--ink); color: var(--surface); }
.tt-studio .ohs-win i { color: var(--tt-red); }

/* ---------------------------------------------------------------------
   MOBİL (≤620): TikTok uygulaması düzeni
   --------------------------------------------------------------------- */
@media (max-width: 620px) {
    .tt-v, .tt-p, .tt-s, .tt-cr, .tt-st, .tt-dm { gap: 10px; }
    .tt-app { flex-direction: column; border-radius: 12px; background: var(--tt-bg2); }
    .tt-side, .tt-dmlist { display: none; }
    .tt-main { background: var(--tt-bg); }

    /* Alt menü */
    .tt-nav { display: flex; flex: 0 0 46px; align-items: center; justify-content: space-around; border-top: 1px solid #1d1d1f; background: #000; }
    .tt-nav__i { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9.5px; color: #8e8e93; }
    .tt-nav__i i { font-size: 15px; }
    .tt-nav__i.is-on { color: #fff; }
    .tt-nav__plus { display: grid; place-items: center; width: 38px; height: 25px; border-radius: 7px; background: #fff; color: #000; font-size: 13px; box-shadow: -3px 0 0 var(--tt-cyan), 3px 0 0 var(--tt-red); }

    /* Video: tam ekran, sütun videonun üstünde */
    .tt-mtabs { position: absolute; left: 0; right: 0; top: 10px; z-index: 2; display: flex; justify-content: center; gap: 16px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .7); }
    .tt-mtabs .is-on { color: #fff; box-shadow: inset 0 -2px 0 #fff; padding-bottom: 4px; }
    .tt-mtabs i { position: absolute; right: 14px; top: 1px; color: #fff; font-size: 14px; }
    .tt-feed, .tt-vmain.is-side .tt-feed { top: 0; bottom: 0; left: 0; right: 0; transform: none; gap: 0; }
    .tt-vid { width: 100%; aspect-ratio: auto; border-radius: 0; }
    .tt-scene__txt { top: 15%; font-size: 14px; }
    .tt-scene__plate { top: 47%; width: 98px; height: 98px; }
    .tt-cap { right: 54px; bottom: 12px; }
    .tt-strip { max-width: 100%; }
    .tt-ptime { top: 40px; }
    .tt-rail { position: absolute; right: 4px; bottom: 12px; gap: 9px; padding-bottom: 0; }
    .tt-rail__ava .tt-ava { width: 38px; height: 38px; box-shadow: 0 0 0 1.5px #fff; }
    .tt-ra { gap: 1px; }
    .tt-ra__ic { width: 40px; height: 34px; background: none; font-size: 25px; }
    .tt-ra b { font-size: 10.5px; color: #fff; }
    .tt-disc { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; border: 7px solid #1c1c1e; border-radius: 50%; background: #5a3420; color: #fff; font-size: 8px; animation: tt-spin 5s linear infinite; }
    @keyframes tt-spin { to { transform: rotate(360deg); } }
    .tt-vplus1 { left: 40px; }

    /* Paneller alttan açılır */
    .tt-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 76%; border: 0; border-radius: 14px 14px 0 0; transform: translateY(100%); }
    .tt-vmain.is-cmt .tt-cmt,
    .tt-vmain.is-share .tt-share,
    .tt-smain.is-share .tt-share { transform: none; }
    .tt-panel__h { justify-content: center; padding: 10px 14px; }
    .tt-panel__h i { position: absolute; right: 14px; }
    .tt-clist { gap: 10px; padding: 10px 12px; }
    .tt-share__fr { padding: 0 12px; }
    .tt-share__opts { margin: 12px 12px 0; padding-top: 12px; }
    .tt-share__send { margin: auto 12px 12px; }
    .tt-panel.tt-share { height: 88%; }
    .tt-share__lbl { padding: 10px 12px 7px; }

    /* İzleme sayacı videonun üstünde, sütunu kapatmadan */
    .lws--tiktok .tt-hud { top: 40px; left: 10px; right: 56px; bottom: auto; width: auto; padding: 10px; transform: translateY(-6px); }
    .lws--tiktok .tt-vmain.is-hud .tt-hud { transform: none; }
    .tt-hud .ohs-hud__head { padding-bottom: 8px; }
    .tt-hud .ohs-hud__who small { overflow: hidden; text-overflow: ellipsis; }
    .tt-hud__marks { gap: 4px; margin-top: 8px; }
    .tt-hud__marks span { padding: 3px 6px; font-size: 10px; }

    /* Profil: ortalı başlık, 3 sütun ızgara */
    .tt-pmain { padding: 14px 0 0; }
    .tt-phead { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .tt-ava--xl { width: 66px; height: 66px; font-size: 25px; }
    .tt-pinfo { align-items: center; gap: 9px; }
    .tt-puser { order: 1; flex-direction: column; align-items: center; gap: 0; }
    .tt-puser b { font-size: 15px; }
    .tt-puser small { font-size: 11.5px; color: var(--tt-muted); }
    .tt-pstats { order: 2; gap: 22px; font-size: 11px; }
    .tt-pstats span { display: flex; flex-direction: column; align-items: center; }
    .tt-pstats b { margin: 0; font-size: 14px; }
    .tt-pbtns { order: 3; }
    .tt-pbtns .tt-btn--red { min-width: 124px; }
    .tt-pbio { display: none; }
    .tt-pplus { left: 50%; top: 10px; margin-left: 40px; }
    .tt-ptabs { justify-content: space-around; margin-top: 12px; }
    .tt-ptabs span { padding: 8px 10px; font-size: 0; }
    .tt-ptabs span i { font-size: 15px; }
    .tt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
    .tt-th { border-radius: 0; }
    .tt-th__ic { font-size: 22px; }
    .tt-pmain.is-scroll .tt-pscroll { transform: translateY(-212px); }
    .tt-ptabs--s span { padding: 8px 12px; font-size: 12.5px; }

    /* Ses sayfası */
    .tt-smain { padding: 14px 12px 0; }
    .tt-shead { gap: 12px; }
    .tt-scover { width: 76px; height: 76px; font-size: 30px; }
    .tt-sinfo > b { font-size: 17px; }
    .tt-sbtns { margin-top: 12px; }
    .tt-sbtns .tt-sfav { flex: 1 1 auto; }
    .tt-suse { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; height: 42px; }
    .tt-s .tt-nav { display: none; }
    .tt-grid--s { gap: 3px; margin-top: 4px; }

    /* Kamera: tam ekran; gönderi alttan */
    .tt-camapp { padding: 0; gap: 0; }
    .tt-cam { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
    .tt-post {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        border: 0;
        border-radius: 14px 14px 0 0;
        padding: 14px;
        gap: 9px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(40px);
    }
    .tt-camapp.is-post .tt-post { opacity: 1; visibility: visible; transform: none; }
    .tt-post__cap { min-height: 60px; }
    .tt-post__th { height: 60px; }

    /* Hikâye: tam ekran */
    .tt-storyapp { padding: 0; gap: 0; }
    .tt-story__nav, .tt-story__x { display: none; }
    .tt-story { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
    .tt-story__stk { font-size: 15px; }
    .lws--tiktok .tt-hud--story { position: absolute; top: auto; left: 10px; right: 10px; bottom: 54px; z-index: 3; width: auto; padding: 10px; }
    .tt-story:not(.is-emo) .tt-story__poll { display: none; }

    /* Mesajlar */
    .tt-dmapp .tt-chat { flex: 1 1 auto; min-height: 0; }

    /* Studio */
    .tt-st__tabs span { padding: 5px 9px; font-size: 11.5px; }
    .tt-st__logo { width: 34px; height: 34px; font-size: 16px; }
}

/* Masaüstü akış okları (önceki / sonraki video) — panel açılınca gizlenir */
.tt-arrows { position: absolute; right: 18px; top: 50%; display: flex; flex-direction: column; gap: 12px; transform: translateY(-50%); transition: opacity .3s ease; }
.tt-arrows i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tt-panel2); color: #fff; font-size: 14px; }
.tt-vmain.is-side .tt-arrows { opacity: 0; }
@media (max-width: 620px) { .tt-arrows { display: none; } }

/* Sohbet başlığı ve yazma satırı sıkışmasın */
.tt-chat__h, .tt-chat__in, .tt-panel__h, .tt-cin { flex: 0 0 auto; }