/* Twitch Chat Overlay v2 — motorun sohbet kutusu (.cb-*; önizleme, küçük resimler ve OBS görünümü AYNI kurallar) + araca özel arayüz (.bvk-t-twitch-chat-overlay; kit üstüne). Kurallar: vh/sticky/fixed yok (gömülü panel); altın yalnız birincil eylem + seçili + odak; arayüz token'ları kitten (--kzk-*). Sohbet kutusunun renkleri durumdan (--c1, --card…). */ /* ═════════════════════ OBS görünümü (?view=1) ═════════════════════ */ html.tco-view,html.tco-view body{background:transparent!important;color-scheme:normal!important;margin:0!important;padding:0!important;overflow:hidden!important;min-height:0!important;height:100%} html.tco-view body>*:not(.tco-viewRoot):not(.tco-viewChip):not(.tco-viewNote){display:none!important} html.tco-view .tco-viewRoot{position:absolute;inset:0} html.tco-view .tco-viewRoot>.cb-box{position:absolute;inset:0} /* Bağlantı normal tarayıcıda açılınca (OBS değil): sohbet bir yayın sahnesinin üstünde görünsün (koyu kartlar koyu damada kayboluyordu) + köşede bilgi çipi. OBS'te ikisi de yok. */ html.tco-view.tco-view--browser,html.tco-view.tco-view--browser body{background:linear-gradient(rgba(12,9,20,.18),rgba(12,9,20,.18)),url("/kuzgun-welcome-landscape.webp") center/cover no-repeat fixed,#1a1428!important} html.tco-view .tco-viewChip{position:fixed;right:10px;top:10px;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 8px;max-width:min(360px,calc(100% - 20px));padding:8px 12px;border-radius:12px;background:rgba(14,12,22,.9);border:1px solid rgba(255,255,255,.14);color:#e9e4f5;font:600 12px/1.35 Inter,system-ui,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.45)} html.tco-view .tco-viewChip>span:nth-of-type(2){grid-column:2/-1;font-weight:500;font-size:11.5px;color:#b9b0cc} html.tco-view .tco-viewChip a{grid-column:3;grid-row:1;color:#c4a1ff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(196,161,255,.4);white-space:nowrap} html.tco-view .tco-viewChip i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9c93b0} html.tco-view .tco-viewChip[data-st=live] i{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22)} html.tco-view .tco-viewChip[data-st=warn] i{background:#fbbf24} html.tco-view .tco-viewChip[data-at=b]{top:auto;bottom:10px} /* Tarayıcıda deneme (&try=1): kutu OBS kaynağı boyunda (W × H), pencereye sığacak kadar küçültülmüş, kesikli sınırla — satırlar OBS'teki gibi kaynak genişliğinde kırılır. OBS'te ve diğer yayın yazılımlarında tam kaynak (inset:0). */ html.tco-view.tco-view--browser .tco-viewRoot{inset:auto;left:50%;top:calc(50% + var(--tco-vy,0px));width:var(--tco-vw,420px);height:var(--tco-vh,760px);transform:translate(-50%,-50%) scale(var(--tco-vs,1));outline:calc(2px / var(--tco-vs,1)) dashed rgba(255,255,255,.42);border-radius:2px} html.tco-view .tco-viewWait{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);padding:calc(10px / var(--tco-vs,1)) calc(14px / var(--tco-vs,1));border-radius:calc(12px / var(--tco-vs,1));background:rgba(14,12,22,.84);border:1px solid rgba(255,255,255,.14);color:#e9e4f5;font:500 calc(13px / var(--tco-vs,1))/1.45 Inter,system-ui,sans-serif;text-align:center} /* Eski bağlantılar (#s= yok): eski görünümün 20 px kenar boşluğu — yerleşimini piksel piksel kurmuş yayıncının sohbeti kaymasın */ html.tco-view .tco-viewRoot.tco-legacy>.cb-box .cb-list{left:20px;right:20px;bottom:20px;max-height:calc(100% - 40px)} html.tco-view .tco-viewRoot.tco-legacy>.cb-box[data-pos^=t] .cb-list{bottom:auto;top:20px} html.tco-view .tco-viewNote{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;max-width:min(420px,calc(100% - 32px));padding:14px 18px;border-radius:14px;background:rgba(14,12,22,.86);border:1px solid rgba(255,255,255,.14);color:#e9e4f5;font:500 14px/1.45 Inter,system-ui,sans-serif;text-align:center} /* ═════════════════════ MOTOR: sohbet kutusu ═════════════════════ */ .cb-box{position:relative;overflow:hidden;font-family:var(--ff,"Inter",system-ui,sans-serif);font-size:calc(var(--cs,17px) * var(--fk,1));line-height:var(--lh,1.42);letter-spacing:var(--ls,0);color:var(--txt,#fff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;text-align:left;font-kerning:normal} .cb-box,.cb-box *,.cb-box *::before,.cb-box *::after{box-sizing:border-box} /* Liste: yüksekliği içerik kadar, en çok kutu kadar. Yeni mesaj sonda ise içerik yukarı taşar (en yeni hep görünür). */ .cb-list{position:absolute;left:12px;right:12px;bottom:12px;max-height:calc(100% - 24px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:var(--gap,4px)} .cb-box[data-pos^=t] .cb-list{bottom:auto;top:12px} .cb-box[data-order=top] .cb-list{justify-content:flex-start} .cb-box[data-pos$=c] .cb-list{align-items:center} .cb-box[data-pos$=r] .cb-list{align-items:flex-end} .cb-box[data-fill=full] .cb-list{align-items:stretch} .cb-box[data-pos$=c][data-card=none] .cb-row{text-align:center} .cb-box[data-pos$=r][data-card=none] .cb-row{text-align:right} /* Kenarda yumuşak solma (yalnız liste taştığında; JS .cb-over) */ .cb-box[data-fade="1"] .cb-list.cb-over{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3.4em);mask-image:linear-gradient(to bottom,transparent 0,#000 3.4em)} .cb-box[data-fade="1"][data-order=top] .cb-list.cb-over{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 3.4em);mask-image:linear-gradient(to top,transparent 0,#000 3.4em)} /* Maske listenin kutusu dışını keser: solma açıkken liste .8em büyür, içerik aynı yerde kalır (iç boşluk) — en yeni kartın gölgesi, çizgi roman kuyruğu, ışıması ve süsü kesilmez. Twitch sohbeti stili listeyi panel olarak kullanır: hariç. */ .cb-box[data-fade="1"]:not([data-style=native]) .cb-list{margin:-.8em;padding:.8em;max-height:calc(100% - 24px + 1.6em)} .cb-box[data-fade="1"]:not([data-style=native])[data-frame=header] .cb-list{max-height:calc(100% - 24px - 2.27em + 1.6em)} .cb-box[data-fade="1"]:not([data-style=native])[data-layout=ticker] .cb-list{max-height:none} .cb-box[data-fade="1"]:not([data-style=native]) .cb-list.cb-over{-webkit-mask-image:linear-gradient(to bottom,transparent .8em,#000 4.2em);mask-image:linear-gradient(to bottom,transparent .8em,#000 4.2em)} .cb-box[data-fade="1"]:not([data-style=native])[data-order=top] .cb-list.cb-over{-webkit-mask-image:linear-gradient(to top,transparent .8em,#000 4.2em);mask-image:linear-gradient(to top,transparent .8em,#000 4.2em)} /* Satır */ .cb-row{position:relative;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:normal;text-shadow:var(--ts,none);flex:none} /* En uzun satır (yazıya göre satırlar, liste/baloncuk): geniş kaynakta uzun mesaj kenardan kenara uzamasın */ .cb-box[data-fill=fit][data-rowmax]:is([data-layout=stack],[data-layout=bubbles]) .cb-list>.cb-row{max-width:var(--rowmax,100%)} .cb-body{min-width:0;position:relative;z-index:1} .cb-meta{display:inline} .cb-name{font-weight:var(--nw,800);color:var(--nc,#a6b0bd);overflow-wrap:anywhere} .cb-box[data-upper="1"] .cb-name{text-transform:uppercase;letter-spacing:calc(var(--ls,0px) + .03em)} .cb-colon{color:var(--muted,rgba(255,255,255,.62));margin:0 .02em 0 .04em} .cb-box[data-sep=colon] .cb-colon{margin-left:0} .cb-box[data-sep=arrow] .cb-colon,.cb-box[data-sep=dash] .cb-colon{margin:0 .1em 0 .3em} .cb-time{color:var(--muted);font-size:.76em;font-weight:500;margin-right:.5em;font-variant-numeric:tabular-nums;letter-spacing:0} .cb-badges{display:inline-flex;gap:.2em;margin-right:.32em;vertical-align:-.17em} .cb-badge{display:inline-block;width:1.1em;height:1.1em;flex:none} .cb-badge svg{display:block;width:100%;height:100%;overflow:visible} .cb-bbg{fill:var(--bc,var(--c1,#a855f7))} .cb-box[data-badges=mono] .cb-bfg{fill:var(--on1,#fff)} .cb-box[data-badges=mono] .cb-bfg [stroke="#fff"]{stroke:var(--on1,#fff)} .cb-badge svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))} .cb-box[data-light="1"] .cb-badge svg{filter:none} .cb-tag{display:inline-block;margin-left:.45em;padding:.1em .45em .08em;border-radius:.35em;background:var(--c2);color:var(--on2);font-size:.6em;font-weight:800;letter-spacing:.05em;text-transform:uppercase;vertical-align:.2em;line-height:1.35;text-shadow:none;white-space:nowrap} .cb-msg{color:var(--txt)} .cb-action .cb-msg{font-style:italic;color:var(--nc)} .cb-at{font-weight:700} .cb-mask{letter-spacing:.12em;opacity:.65} .cb-emote{display:inline-block;height:calc(1.62em * var(--em,1));width:auto;vertical-align:middle;margin:-.32em .07em -.24em;image-rendering:auto} .cb-emote-txt{font-weight:700;color:var(--nc);opacity:.92} .cb-big .cb-emote{height:calc(2.5em * var(--em,1));margin:.04em .1em} .cb-zw{position:relative;display:inline-block;vertical-align:middle;line-height:0} .cb-zw>.cb-emote{margin-top:0;margin-bottom:0} .cb-zw>.cb-zwi{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0} .cb-bits{display:inline-flex;align-items:center;gap:.1em;color:var(--bt);font-weight:800;vertical-align:-.12em;white-space:nowrap} .cb-bits svg{width:1.15em;height:1.15em;fill:currentColor} .cb-reply{display:block;max-width:100%;margin:0 0 .16em;font-size:.76em;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cb-reply svg{display:inline-block;width:1.05em;height:1.05em;margin-right:.25em;vertical-align:-.18em} .cb-reply b{font-weight:700;color:var(--txt);opacity:.85} .cb-av{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--nc);color:var(--nfg);font-size:.9em;font-weight:800;line-height:1;text-shadow:none;box-shadow:0 0 0 .12em rgba(255,255,255,.16),0 .15em .4em rgba(0,0,0,.25)} .cb-hasav{display:flex;align-items:flex-start;gap:.55em} .cb-hasav>.cb-av{margin-top:.05em} .cb-box[data-sep=above] .cb-meta,.cb-box[data-layout=bubbles] .cb-meta,.cb-box[data-layout=spotlight] .cb-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0 .1em;font-size:.84em;margin-bottom:.08em;line-height:1.3} .cb-box[data-sep=above] .cb-colon,.cb-box[data-layout=bubbles] .cb-colon,.cb-box[data-layout=spotlight] .cb-colon{display:none} .cb-box[data-pos$=r][data-card=none][data-sep=above] .cb-meta{justify-content:flex-end} .cb-box[data-pos$=c][data-sep=above][data-card=none] .cb-meta{justify-content:center} /* Kart (stil derisi bu öğeye): balonda gövde, diğer düzenlerde satır */ .cb-card{position:relative;padding:calc(.34em * var(--pad,1)) calc(.68em * var(--pad,1));border-radius:var(--r,11px);background:var(--card);border:var(--bw,0) solid var(--c1a);box-shadow:var(--csh,none)} .cb-acc{position:absolute;left:0;top:.38em;bottom:.38em;width:.2em;border-radius:0 .2em .2em 0;background:var(--acc);z-index:2;box-shadow:0 0 .5em var(--acc)} .cb-tint{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--c1g),var(--c1s));z-index:0;pointer-events:none} .cb-tint--role{background:linear-gradient(90deg,var(--rt),transparent 82%)} /* Tekrar sayacı (×N) */ .cb-combo{display:inline-block;margin-left:.4em;padding:.07em .44em .05em;border-radius:.62em;background:var(--c2);color:var(--on2);font-size:.74em;font-weight:900;line-height:1.3;letter-spacing:.02em;vertical-align:.1em;text-shadow:none;white-space:nowrap;font-variant-numeric:tabular-nums;font-style:normal} .cb-combo.cb-bump{animation:cbCombo .42s cubic-bezier(.34,1.56,.64,1)} @keyframes cbCombo{0%{transform:scale(.6)}55%{transform:scale(1.28)}100%{transform:none}} .cb-box[data-still="1"] .cb-combo{animation:none} /* Platform simgesi (adın önünde) */ .cb-pf{display:inline-grid;place-items:center;width:1.16em;height:1.16em;margin-right:.36em;border-radius:.28em;background:#9146ff;vertical-align:-.2em;box-shadow:0 1px 2px rgba(0,0,0,.28);text-shadow:none} .cb-pf svg{display:block;width:.7em;height:.7em;fill:#fff} .cb-box[data-light="1"] .cb-pf{box-shadow:none} .cb-box:is([data-sep=above],[data-layout=bubbles],[data-layout=spotlight],[data-layout=columns]) .cb-pf{margin-right:.28em;vertical-align:0} /* Süs: kartın köşesinde küçük çıkartma (maske + renk; gölge kapta, maske ::before'da). Başlık çubuğunda Twitch glifinin yerine aynı glif. Olay kartlarında, alt bantta ve tek panelli Twitch sohbetinde kart süsü yok. */ .cb-orn{position:absolute;z-index:3;top:-.56em;right:-.46em;width:1.34em;height:1.34em;pointer-events:none;transform:rotate(var(--orot,8deg));filter:drop-shadow(0 .05em .07em rgba(0,0,0,.5))} .cb-orn::before{content:"";position:absolute;inset:0;background:var(--c2);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .cb-box[data-pos$=r] .cb-orn{right:auto;left:-.46em} .cb-box[data-light="1"] .cb-orn{filter:drop-shadow(0 .05em .06em rgba(0,0,0,.22))} .cb-box[data-style=native] .cb-row>.cb-orn{display:none} .cb-box[data-style=hud]:not([data-orn=none]) .cb-card{padding-right:calc(.68em * var(--pad,1) + .95em)} .cb-box[data-style=hud] .cb-orn{top:auto;bottom:.2em;right:.26em;width:.8em;height:.8em} .cb-box[data-style=hud][data-pos$=r] .cb-orn{left:auto;right:.26em} .cb-box:is([data-orn=hearts],[data-orn=petals]) .cb-orn::before{background:var(--c1)} .cb-box[data-orn=snow] .cb-orn::before{background:#fff} .cb-box[data-orn=snow][data-light="1"] .cb-orn::before{background:var(--c1)} .cb-box[data-orn=sun] .cb-orn::before{background:radial-gradient(circle at 50% 50%,#ffe066 0 .2em,#fbbf24 .21em)} .cb-box[data-orn=lantern] .cb-orn::before{background:linear-gradient(180deg,#fbbf24 0 19%,#e5322d 19% 73%,#fbbf24 73%)} .cb-box[data-orn=holly] .cb-orn::before{background:radial-gradient(circle .1em at 41.7% 59.2%,#e11d48 92%,transparent 100%),radial-gradient(circle .1em at 58.3% 59.2%,#e11d48 92%,transparent 100%),radial-gradient(circle .1em at 50% 73.3%,#e11d48 92%,transparent 100%),#1fa64f} .cb-box[data-orn=rainbow] .cb-orn::before{background:radial-gradient(circle at 50% 77.1%,#3a86ff 0 .17em,#ffb703 .17em .32em,#ff4d6d .32em)} .cb-head>.cb-orn{display:none} .cb-box[data-frame=header]:not([data-orn=none])>.cb-head>svg{display:none} .cb-box[data-frame=header]:not([data-orn=none])>.cb-head>.cb-orn{display:block;position:relative;inset:auto;flex:none;width:1.32em;height:1.32em;transform:none;filter:none} .cb-box[data-orn=sparkle] .cb-orn::before,.tco-ornG[data-o=sparkle]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2c.7 4.6 2.5 7.1 8 9.5-5.5 2.4-7.3 4.9-8 9.5-.7-4.6-2.5-7.1-8-9.5 5.5-2.4 7.3-4.9 8-9.5z'/%3E%3Cpath d='M19 1.5c.3 1.9 1 2.9 3.3 3.9-2.3 1-3 2-3.3 3.9-.3-1.9-1-2.9-3.3-3.9 2.3-1 3-2 3.3-3.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2c.7 4.6 2.5 7.1 8 9.5-5.5 2.4-7.3 4.9-8 9.5-.7-4.6-2.5-7.1-8-9.5 5.5-2.4 7.3-4.9 8-9.5z'/%3E%3Cpath d='M19 1.5c.3 1.9 1 2.9 3.3 3.9-2.3 1-3 2-3.3 3.9-.3-1.9-1-2.9-3.3-3.9 2.3-1 3-2 3.3-3.9z'/%3E%3C/svg%3E")} .cb-box[data-orn=hearts] .cb-orn::before,.tco-ornG[data-o=hearts]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2s-8-4.9-9.8-9.9C.9 7.6 3.2 4 6.8 4c2.2 0 3.9 1.2 5.2 3.2C13.3 5.2 15 4 17.2 4c3.6 0 5.9 3.6 4.6 7.3-1.8 5-9.8 9.9-9.8 9.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2s-8-4.9-9.8-9.9C.9 7.6 3.2 4 6.8 4c2.2 0 3.9 1.2 5.2 3.2C13.3 5.2 15 4 17.2 4c3.6 0 5.9 3.6 4.6 7.3-1.8 5-9.8 9.9-9.8 9.9z'/%3E%3C/svg%3E")} .cb-box[data-orn=petals] .cb-orn::before,.tco-ornG[data-o=petals]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12.4)'%3E%3Cpath transform='rotate(0)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(72)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(144)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(216)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(288)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12.4)'%3E%3Cpath transform='rotate(0)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(72)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(144)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(216)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3Cpath transform='rotate(288)' d='M0-1.2C-2.6-3.4-3.1-7.2-.9-10.6c.4.9.9 1.3.9 1.3s.5-.4.9-1.3C3.1-7.2 2.6-3.4 0-1.2z'/%3E%3C/g%3E%3C/svg%3E")} .cb-box[data-orn=sun] .cb-orn::before,.tco-ornG[data-o=sun]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 1.8v2.6M12 19.6v2.6M1.8 12h2.6M19.6 12h2.6M4.8 4.8l1.8 1.8M17.4 17.4l1.8 1.8M4.8 19.2l1.8-1.8M17.4 6.6l1.8-1.8'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 1.8v2.6M12 19.6v2.6M1.8 12h2.6M19.6 12h2.6M4.8 4.8l1.8 1.8M17.4 17.4l1.8 1.8M4.8 19.2l1.8-1.8M17.4 6.6l1.8-1.8'/%3E%3C/g%3E%3C/svg%3E")} .cb-box[data-orn=bats] .cb-orn::before,.tco-ornG[data-o=bats]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8.1 10.8 5.8l-.5 2.6C8.1 8.1 6 8.8 4.3 10.2c-.9-.9-2.3-1.3-3.8-.9 1.5 1.1 2.3 2.8 2.3 4.6 1.1-.8 2.5-1 3.7-.4.5 1.2 1.5 2 2.8 2.4L12 19l2.7-3.1c1.3-.4 2.3-1.2 2.8-2.4 1.2-.6 2.6-.4 3.7.4 0-1.8.8-3.5 2.3-4.6-1.5-.4-2.9 0-3.8.9-1.7-1.4-3.8-2.1-6-1.8l-.5-2.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8.1 10.8 5.8l-.5 2.6C8.1 8.1 6 8.8 4.3 10.2c-.9-.9-2.3-1.3-3.8-.9 1.5 1.1 2.3 2.8 2.3 4.6 1.1-.8 2.5-1 3.7-.4.5 1.2 1.5 2 2.8 2.4L12 19l2.7-3.1c1.3-.4 2.3-1.2 2.8-2.4 1.2-.6 2.6-.4 3.7.4 0-1.8.8-3.5 2.3-4.6-1.5-.4-2.9 0-3.8.9-1.7-1.4-3.8-2.1-6-1.8l-.5-2.6z'/%3E%3C/svg%3E")} .cb-box[data-orn=snow] .cb-orn::before,.tco-ornG[data-o=snow]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10'/%3E%3Cpath d='m9.2 3.6 2.8 2.6 2.8-2.6M9.2 20.4l2.8-2.6 2.8 2.6M3.5 10.4l3.6-1.2-.8-3.7M20.5 13.6l-3.6 1.2.8 3.7M6.3 18.5l.8-3.7-3.6-1.2M17.7 5.5l-.8 3.7 3.6 1.2'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10'/%3E%3Cpath d='m9.2 3.6 2.8 2.6 2.8-2.6M9.2 20.4l2.8-2.6 2.8 2.6M3.5 10.4l3.6-1.2-.8-3.7M20.5 13.6l-3.6 1.2.8 3.7M6.3 18.5l.8-3.7-3.6-1.2M17.7 5.5l-.8 3.7 3.6 1.2'/%3E%3C/g%3E%3C/svg%3E")} .cb-box[data-orn=holly] .cb-orn::before,.tco-ornG[data-o=holly]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 10.6C9.7 7.1 6.4 5.4 2.6 6.2c.9.8 1.1 1.8.6 2.8 1.2.1 2 .8 2.2 2-1.1.4-1.7 1.2-1.6 2.4 3.3.9 6.3-.3 7.6-2.8zM12.6 10.6c1.7-3.5 5-5.2 8.8-4.4-.9.8-1.1 1.8-.6 2.8-1.2.1-2 .8-2.2 2 1.1.4 1.7 1.2 1.6 2.4-3.3.9-6.3-.3-7.6-2.8z'/%3E%3Ccircle cx='10' cy='14.2' r='2.3'/%3E%3Ccircle cx='14' cy='14.2' r='2.3'/%3E%3Ccircle cx='12' cy='17.6' r='2.3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 10.6C9.7 7.1 6.4 5.4 2.6 6.2c.9.8 1.1 1.8.6 2.8 1.2.1 2 .8 2.2 2-1.1.4-1.7 1.2-1.6 2.4 3.3.9 6.3-.3 7.6-2.8zM12.6 10.6c1.7-3.5 5-5.2 8.8-4.4-.9.8-1.1 1.8-.6 2.8-1.2.1-2 .8-2.2 2 1.1.4 1.7 1.2 1.6 2.4-3.3.9-6.3-.3-7.6-2.8z'/%3E%3Ccircle cx='10' cy='14.2' r='2.3'/%3E%3Ccircle cx='14' cy='14.2' r='2.3'/%3E%3Ccircle cx='12' cy='17.6' r='2.3'/%3E%3C/svg%3E")} .cb-box[data-orn=lantern] .cb-orn::before,.tco-ornG[data-o=lantern]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='2.4' rx='.8'/%3E%3Cpath d='M12 4.2c4.6 0 7.4 3 7.4 6.8s-2.8 6.8-7.4 6.8-7.4-3-7.4-6.8 2.8-6.8 7.4-6.8z'/%3E%3Crect x='9' y='17.2' width='6' height='2.2' rx='.8'/%3E%3Cpath d='M12 19.2v3.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='2.4' rx='.8'/%3E%3Cpath d='M12 4.2c4.6 0 7.4 3 7.4 6.8s-2.8 6.8-7.4 6.8-7.4-3-7.4-6.8 2.8-6.8 7.4-6.8z'/%3E%3Crect x='9' y='17.2' width='6' height='2.2' rx='.8'/%3E%3Cpath d='M12 19.2v3.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")} .cb-box[data-orn=rainbow] .cb-orn::before,.tco-ornG[data-o=rainbow]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M2.5 18.5a9.5 9.5 0 0 1 19 0'/%3E%3Cpath d='M6.2 18.5a5.8 5.8 0 0 1 11.6 0'/%3E%3Cpath d='M9.6 18.5a2.4 2.4 0 0 1 4.8 0'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M2.5 18.5a9.5 9.5 0 0 1 19 0'/%3E%3Cpath d='M6.2 18.5a5.8 5.8 0 0 1 11.6 0'/%3E%3Cpath d='M9.6 18.5a2.4 2.4 0 0 1 4.8 0'/%3E%3C/g%3E%3C/svg%3E")} /* ── Düzenler ── */ .cb-box[data-layout=bubbles] .cb-row{display:flex;align-items:flex-end;gap:.5em;max-width:100%} .cb-box[data-layout=bubbles][data-pos$=r] .cb-row{flex-direction:row-reverse} .cb-box[data-layout=bubbles] .cb-row>.cb-av{margin-bottom:.1em} .cb-box[data-layout=bubbles] .cb-body.cb-card{padding:calc(.4em * var(--pad,1)) calc(.78em * var(--pad,1)) calc(.44em * var(--pad,1))} .cb-box[data-layout=columns] .cb-row:not(.cb-ev){display:grid;grid-template-columns:minmax(0,min(var(--colw,8.6em),46%)) minmax(0,1fr);column-gap:.75em;align-items:baseline} .cb-box[data-layout=columns] .cb-row>.cb-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 .25em;text-align:right;white-space:nowrap;overflow:hidden;min-width:0} /* ad sütununa sığmayan uzun adda saat ve rozetler üst satırda kalır, ad alt satırda TAM görünür (skor tablosu 'BREG…' kesmesin); yalnız sütundan uzun bir ad üç noktayla biter */ .cb-box[data-layout=columns] .cb-row>.cb-meta>.cb-name{overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%} .cb-box[data-layout=columns] .cb-row>.cb-meta>.cb-badges{margin-right:0} .cb-box[data-layout=columns] .cb-row>.cb-meta>.cb-av{width:1.5em;height:1.5em;font-size:.8em} .cb-box[data-layout=columns] .cb-row>.cb-meta>.cb-time{margin-right:.2em} .cb-box[data-layout=ticker] .cb-list{top:12px;bottom:12px;max-height:none;flex-direction:row;align-items:center;justify-content:flex-end;gap:calc(var(--gap,4px) + .7em)} .cb-box[data-layout=ticker][data-pos^=t] .cb-list{align-items:flex-start} .cb-box[data-layout=ticker][data-pos^=b] .cb-list{align-items:flex-end} /* şerit (kısa kaynak): mesajlar bandın ortasında — alt kenara yapışık çipler ve boş kalan bant yok */ .cb-box[data-layout=ticker][data-band="1"] .cb-list{align-items:center} .cb-box[data-layout=ticker] .cb-row{white-space:nowrap;max-width:min(72%,36em);overflow:hidden;text-overflow:ellipsis;text-align:left!important} .cb-box[data-layout=ticker] .cb-row>.cb-body{display:inline} .cb-box[data-layout=ticker] .cb-big .cb-emote{height:calc(1.9em * var(--em,1))} .cb-box[data-layout=ticker][data-fade="1"] .cb-list.cb-over{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 4em);mask-image:linear-gradient(to right,transparent 0,#000 4em)} .cb-box[data-layout=ticker][data-fade="1"]:not([data-style=native]) .cb-list.cb-over{-webkit-mask-image:linear-gradient(to right,transparent .8em,#000 4.8em);mask-image:linear-gradient(to right,transparent .8em,#000 4.8em)} .cb-box[data-layout=spotlight]{font-size:calc(var(--cs,17px) * var(--fk,1) * 1.2)} .cb-box[data-layout=spotlight] .cb-list{max-height:calc(100% - 24px)} .cb-box[data-layout=spotlight] .cb-row{max-width:100%} .cb-box[data-layout=spotlight] .cb-card{padding:calc(.62em * var(--pad,1)) calc(.95em * var(--pad,1))} .cb-box[data-style=native] .cb-list{top:12px;bottom:12px;max-height:none;padding:.5em .15em;background:var(--card);border-radius:var(--r,6px);border:var(--bw,0) solid var(--c1a);box-shadow:var(--csh,none)} /* ── Stiller ── */ /* Gölgeli yazı: kart yok, güçlü yazı gölgesi (eski 'transparent') */ .cb-box[data-style=transparent] .cb-card{background:none;border:0;box-shadow:none;border-radius:.3em;padding:calc(.14em * var(--pad,1)) calc(.32em * var(--pad,1))} /* Buzlu cam: yarı saydam kart + ışık kenarı (OBS sahneyi bulanıklaştıramaz: blur sözü verilmez) */ .cb-box[data-style=glass] .cb-card{background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.04) 58%,rgba(255,255,255,.08)),var(--card);border:max(1px,var(--bw)) solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),var(--csh,none)} /* Konuşma balonu + kuyruk (kenarın dışında, üst üste binmez) */ .cb-box[data-style=bubble] .cb-card{border-radius:max(var(--r,11px),1em);border-bottom-left-radius:.3em} .cb-box[data-style=bubble] .cb-card::before{content:"";position:absolute;left:-.42em;bottom:0;width:.42em;height:.6em;background:var(--card);clip-path:polygon(100% 0,100% 100%,0 100%);border-radius:0 0 0 .1em} .cb-box[data-style=bubble][data-pos$=r] .cb-card{border-bottom-left-radius:max(var(--r,11px),1em);border-bottom-right-radius:.3em} .cb-box[data-style=bubble][data-pos$=r] .cb-card::before{left:auto;right:-.42em;clip-path:polygon(0 0,100% 100%,0 100%)} .cb-box[data-style=bubble] .cb-ev::before{display:none} /* Neon kenar (eski 'cyberpunk') */ .cb-box[data-style=cyberpunk] .cb-card{background:linear-gradient(90deg,var(--card),var(--card2,var(--card)));border:0;border-left:max(3px,var(--bw)) solid var(--c1);border-radius:0 var(--r,9px) var(--r,9px) 0;box-shadow:0 0 14px var(--c1s),var(--csh,none)} .cb-box[data-style=cyberpunk] .cb-name{text-shadow:0 0 9px currentColor} .cb-box[data-style=cyberpunk][data-pos$=r] .cb-card{border-left:0;border-right:max(3px,var(--bw)) solid var(--c1);border-radius:var(--r,9px) 0 0 var(--r,9px)} /* Ad etiketi: ad kendi renginde bir blok */ .cb-box[data-style=split] .cb-name{display:inline-block;padding:.04em .42em .06em;margin-right:.12em;border-radius:max(.25em,calc(var(--r,11px) * .55));background:var(--nc);color:var(--nfg);text-shadow:none;line-height:1.3} .cb-box[data-style=split] .cb-colon{display:none} .cb-box[data-style=split] .cb-card{padding-left:calc(.4em * var(--pad,1))} /* Dış hat: kenar adın renginde */ .cb-box[data-style=outline] .cb-card{background:var(--cardO);border:max(1.5px,var(--bw)) solid var(--nc)} .cb-box[data-style=outline] .cb-ev{border-color:var(--c1)} /* Kapsül */ .cb-box[data-style=pill] .cb-card{border-radius:1.35em;padding:calc(.3em * var(--pad,1)) calc(.95em * var(--pad,1))} .cb-box[data-style=pill] .cb-hasav{padding-left:calc(.3em * var(--pad,1))} /* İnce çizgi: adın renginde yan çizgi, kart yok */ .cb-box[data-style=line] .cb-card{background:linear-gradient(90deg,var(--cardO),transparent 92%);border:0;border-left:max(2px,var(--bw)) solid var(--nc);border-radius:0;box-shadow:none;padding-left:calc(.6em * var(--pad,1))} .cb-box[data-style=line][data-pos$=r] .cb-card{border-left:0;border-right:max(2px,var(--bw)) solid var(--nc);background:linear-gradient(270deg,var(--cardO),transparent 92%)} .cb-box[data-style=line] .cb-ev{border-color:var(--c1)} /* Gradyan kart */ .cb-box[data-style=gradient] .cb-card{background:linear-gradient(118deg,var(--g1),var(--g2));border:var(--bw,0) solid rgba(255,255,255,.4)} /* Holografik: akan gökkuşağı kenar (yalnız ::before'da tek CSS animasyonu) */ .cb-box[data-style=holo] .cb-card{border:0} .cb-box[data-style=holo] .cb-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:max(2px,var(--bw));background:linear-gradient(100deg,var(--c1),var(--c2),#fff,var(--c1),var(--c2),#fff,var(--c1));background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cbHolo 5s linear infinite;pointer-events:none;z-index:0} @keyframes cbHolo{to{background-position:300% 0}} /* Aurora: akan gradyan kart (yalnız ::before'da; giriş animasyonu satırın kendisinde kalır) */ .cb-box[data-style=aurora] .cb-card{background:var(--cardO);border:var(--bw,0) solid rgba(255,255,255,.35)} .cb-box[data-style=aurora] .cb-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,var(--g1),var(--g2),var(--g1));background-size:200% 100%;animation:cbAurora 9s linear infinite;pointer-events:none;z-index:0} .cb-box[data-style=aurora] .cb-card>*{position:relative;z-index:1} .cb-box[data-style=aurora] .cb-card>.cb-acc{position:absolute;z-index:2} .cb-box[data-style=aurora] .cb-card>.cb-tint,.cb-box[data-style=aurora] .cb-card>.cb-shine,.cb-box[data-style=aurora] .cb-card>.cb-fxl,.cb-box[data-style=aurora] .cb-card>.cb-orn{position:absolute} @keyframes cbAurora{to{background-position:-200% 0}} /* Neon nabız: ince neon kenar + nefes alan ışık (yalnız opaklık animasyonu: OBS'te ucuz) */ .cb-box[data-style=pulse] .cb-card{border:max(1.5px,var(--bw)) solid var(--c1);box-shadow:inset 0 0 .9em var(--c1s),var(--csh,none)} .cb-box[data-style=pulse] .cb-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 .55em var(--c1g),0 0 1.5em var(--c1s);animation:cbPulse 2.6s ease-in-out infinite;pointer-events:none} .cb-box[data-style=pulse] .cb-name{text-shadow:0 0 .45em var(--c1s)} @keyframes cbPulse{0%,100%{opacity:.25}50%{opacity:1}} .cb-box[data-still="1"] .cb-card::before,.cb-box[data-still="1"] .cb-card::after{animation:none} /* Yumuşak pastel */ .cb-box[data-style=soft] .cb-card{border-radius:max(var(--r,11px),.95em);box-shadow:0 .25em .9em var(--c1s),inset 0 0 0 1px rgba(255,255,255,.5);border:0} .cb-box[data-style=soft][data-light="0"] .cb-card{box-shadow:0 .25em .9em var(--c1s),inset 0 0 0 1px rgba(255,255,255,.12)} /* Kâğıt etiket: opak kart, beyaz kesim kenarı, hafif eğim (rotate özelliği; eski CEF'te düz kalır) */ .cb-box[data-style=sticker] .cb-card{background:var(--cardS);border:max(.14em,var(--bw)) solid #fff;border-radius:var(--r,11px);box-shadow:0 .12em 0 rgba(0,0,0,.12),0 .35em .8em rgba(0,0,0,.3)} .cb-box[data-style=sticker] .cb-list>.cb-row:nth-child(odd)>.cb-card,.cb-box[data-style=sticker] .cb-list>.cb-row.cb-card:nth-child(odd){rotate:-.7deg} .cb-box[data-style=sticker] .cb-list>.cb-row:nth-child(even)>.cb-card,.cb-box[data-style=sticker] .cb-list>.cb-row.cb-card:nth-child(even){rotate:.6deg} /* OBS 28–30 (CEF 103) 'rotate' özelliğini tanımıyor: eğim transform ile (giriş animasyonu 'from' karesinden bu eğime akar) */ @supports not (rotate:0deg){ .cb-box[data-style=sticker] .cb-list>.cb-row:nth-child(odd)>.cb-card,.cb-box[data-style=sticker] .cb-list>.cb-row.cb-card:nth-child(odd){transform:rotate(-.7deg)} .cb-box[data-style=sticker] .cb-list>.cb-row:nth-child(even)>.cb-card,.cb-box[data-style=sticker] .cb-list>.cb-row.cb-card:nth-child(even){transform:rotate(.6deg)} } /* Çizgi roman: kalın siyah kontur, sert gölge, kuyruk */ .cb-box[data-style=comic] .cb-card{background:var(--cardS);border:max(.13em,var(--bw)) solid #111;border-radius:max(var(--r,11px),.9em);box-shadow:.2em .2em 0 #111} .cb-box[data-style=comic] .cb-card::before{content:"";position:absolute;left:.9em;bottom:-.62em;width:.75em;height:.62em;background:#111;clip-path:polygon(0 0,100% 0,10% 100%)} .cb-box[data-style=comic] .cb-card::after{content:"";position:absolute;left:calc(.9em + .2em);bottom:-.36em;width:.48em;height:.42em;background:var(--cardS);clip-path:polygon(0 0,100% 0,8% 100%)} .cb-box[data-style=comic] .cb-list{gap:calc(var(--gap,4px) + .6em)} .cb-box[data-style=comic] .cb-ev::before,.cb-box[data-style=comic] .cb-ev::after{display:none} /* E-spor HUD: kesik köşe, vurgu çubuğu */ .cb-box[data-style=hud] .cb-card{--cut:.62em;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));background:linear-gradient(var(--c1),var(--c1)) left top/max(3px,var(--bw)) 100% no-repeat,linear-gradient(90deg,var(--c1s),transparent 60%),var(--card);border:0;border-radius:0;box-shadow:none;padding-left:calc(.8em * var(--pad,1))} .cb-box[data-style=hud] .cb-acc{left:auto;right:0;border-radius:.2em 0 0 .2em} /* 8-bit: basamaklı piksel kenar (çapraz kutu gölgesi) */ .cb-box[data-style=pixel] .cb-card{--px:max(3px,var(--bw));margin:var(--px);border:0;border-radius:0;background:var(--card);box-shadow:0 calc(var(--px) * -1) 0 0 var(--c1),0 var(--px) 0 0 var(--c1),calc(var(--px) * -1) 0 0 0 var(--c1),var(--px) 0 0 0 var(--c1),var(--px) calc(var(--px) * 2) 0 0 rgba(0,0,0,.45)} /* Terminal (eski 'retro'): tarama çizgisi */ .cb-box[data-style=retro] .cb-card{background-color:var(--card);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);border:max(1px,var(--bw)) solid var(--c1t);border-radius:min(var(--r,4px),8px)} .cb-box[data-style=retro] .cb-name{text-shadow:0 0 .4em var(--c1s)} /* Twitch sohbeti: tek koyu panel, satır kartı yok */ .cb-box[data-style=native] .cb-card{background:none;border:0;box-shadow:none;border-radius:.25em;padding:calc(.2em * var(--pad,1)) calc(.6em * var(--pad,1))} .cb-box[data-style=native] .cb-ev{background:var(--c1s);margin:.15em .3em} /* ── Olay kartı (abonelik, hediye, baskın, bits, duyuru) ── */ .cb-ev{display:flex!important;align-items:center;gap:.62em;overflow:hidden;box-shadow:inset 0 0 0 max(1.5px,var(--bw,0px)) var(--c1a),0 0 1.1em var(--c1s),var(--csh,none);white-space:normal!important} .cb-box[data-card=none] .cb-ev{background:linear-gradient(90deg,rgba(10,8,18,.62),rgba(10,8,18,.28));border-radius:max(var(--r,11px),.6em);padding:.45em .8em} .cb-box[data-style=hud] .cb-ev{box-shadow:none} .cb-evic{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:2.05em;height:2.05em;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--on1);box-shadow:0 0 0 .13em rgba(255,255,255,.14),0 .2em .7em var(--c1g)} .cb-evic svg{width:1.22em;height:1.22em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))} .cb-ev[data-ev=raid] .cb-evic{background:linear-gradient(135deg,var(--c2),var(--c1));color:var(--on2)} .cb-ev[data-ev=cheer] .cb-evic{background:linear-gradient(135deg,#a970ff,#9146ff 60%,#5c16c5);color:#fff} .cb-evbody{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;line-height:1.25} .cb-evt{font-weight:var(--nw,800);overflow-wrap:anywhere} .cb-evs{font-size:.8em;font-weight:600;color:var(--muted)} .cb-evm{display:block;margin-top:.22em;font-size:.94em;line-height:var(--lh,1.42)} .cb-evname{font-weight:var(--nw,800);color:var(--nc)} .cb-shine{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden} .cb-shine::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);animation:cbShine 1.5s .25s ease-out 2 both} .cb-box[data-still="1"] .cb-shine::before{animation:none;opacity:0} @keyframes cbShine{from{left:-60%}to{left:130%}} .cb-box[data-layout=ticker] .cb-ev{display:inline-flex!important;white-space:nowrap!important} .cb-box[data-layout=ticker] .cb-evbody{flex-direction:row;align-items:baseline;gap:.5em} .cb-box[data-layout=ticker] .cb-evm{margin:0} /* ── Çerçeve: sohbetin arkasında panel; başlıkta Twitch glifi + başlık ve vurgu çizgisi ── */ .cb-box>.cb-head{display:none} .cb-box:is([data-frame=panel],[data-frame=header]):not([data-style=native])::before{content:"";position:absolute;inset:0;border-radius:calc(var(--r,11px) + .3em);background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%),var(--panel);border:max(2px,var(--bw,0px)) solid var(--c1a);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--csh,none);pointer-events:none} .cb-box[data-frame=header]>.cb-head{display:flex;align-items:center;gap:.5em;position:absolute;left:0;right:0;top:0;z-index:1;height:2.7em;padding:0 1.05em;font-size:.84em;font-weight:var(--nw,800);letter-spacing:.07em;text-transform:uppercase;line-height:1;color:var(--txt);white-space:nowrap;overflow:hidden} .cb-box[data-frame=header]>.cb-head::after{content:"";position:absolute;left:1.05em;right:1.05em;bottom:0;height:.16em;border-radius:.1em;background:linear-gradient(90deg,var(--c1),var(--c2))} .cb-box[data-frame=header]>.cb-head>svg{flex:none;width:1.2em;height:1.2em;fill:var(--c1)} .cb-box[data-frame=header]>.cb-head>.cb-htxt{min-width:0;overflow:hidden;text-overflow:ellipsis} .cb-box[data-frame=header] .cb-list{max-height:calc(100% - 24px - 2.27em);clip-path:inset(0 -3em -3em -3em)} .cb-box[data-frame=header]:is([data-pos^=t],[data-style=native]) .cb-list{top:calc(12px + 2.27em)} /* alt bantta başlık solda dikey bir etiket; mesajlar onun sağında akar */ .cb-box[data-frame=header][data-layout=ticker]>.cb-head{right:auto;bottom:0;width:10.4em;height:auto;justify-content:flex-start;flex-direction:row;transform:translateX(var(--tco-pin,0px))} .cb-box[data-frame=header][data-layout=ticker]>.cb-head::after{left:auto;right:0;top:.9em;bottom:.9em;width:.16em;height:auto} .cb-box[data-frame=header][data-layout=ticker] .cb-list{left:calc(8.74em + 12px);max-height:none;clip-path:inset(-3em -3em -3em var(--tco-pin,0px))} .cb-box[data-pos$=r][data-frame=header]>.cb-head{flex-direction:row-reverse} .cb-box[data-pos$=c][data-frame=header]>.cb-head{justify-content:center} /* ── Varış efekti (bir kez): parlama süzülmesi ya da vurgu ışığı ── */ .cb-fxl{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3} .cb-box[data-fx=shine] .cb-fxl::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:46%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);animation:cbShine 1s calc(var(--dur,280ms) * .55) ease-out both} .cb-box[data-fx=glow] .cb-fxl{overflow:visible;box-shadow:0 0 0 max(1.5px,var(--bw,0px)) var(--c1),0 0 1.1em var(--c1g),inset 0 0 .8em var(--c1s);animation:cbFlash 1.5s calc(var(--dur,280ms) * .4) ease-out both} @keyframes cbFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}} .cb-box[data-still="1"] .cb-fxl{display:none} /* ── Ad efektleri ── */ .cb-box[data-namefx=gradient] .cb-name{background:linear-gradient(90deg,var(--nc),var(--nc2,var(--c2)));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))} .cb-box[data-namefx=gradient][data-light="1"] .cb-name{filter:none} .cb-box[data-style=split][data-namefx=gradient] .cb-name{background:linear-gradient(90deg,var(--nc),var(--nc2,var(--c2)));-webkit-background-clip:border-box;background-clip:border-box;color:var(--nfg);-webkit-text-fill-color:currentColor;filter:none} .cb-box[data-namefx=glow] .cb-name{text-shadow:0 0 .32em var(--ncg,var(--nc)),0 0 .9em var(--ncg,var(--nc))} /* açık kartta tek, dar ve soluk hale (adın kendi parlak rengi) */ .cb-box[data-namefx=glow][data-light="1"] .cb-name{text-shadow:0 0 .45em var(--ncg,transparent)} /* Ad boyaları (7TV boyaları gibi): herkese aynı boya; açık kartta koyu tonlar */ .cb-box[data-namefx=rainbow]{--paint:linear-gradient(90deg,#ff5f6d,#ffc371 26%,#4be38f 50%,#3fa7ff 74%,#c77dff)} .cb-box[data-namefx=rainbow][data-light="1"]{--paint:linear-gradient(90deg,#e11d48,#d9480f 26%,#15803d 50%,#1d4ed8 74%,#7e22ce)} .cb-box[data-namefx=chrome]{--paint:linear-gradient(180deg,#fff 10%,#cdd4de 42%,#6e7989 55%,#e8edf3 72%,#a6afbd)} .cb-box[data-namefx=chrome][data-light="1"]{--paint:linear-gradient(180deg,#6b7585 8%,#2a313c 50%,#5a6371 64%,#1f252e)} .cb-box[data-namefx=gold]{--paint:linear-gradient(180deg,#fff4c8 8%,#f7ca4b 40%,#b7860b 56%,#ffe08a 74%,#d9a51c)} .cb-box[data-namefx=gold][data-light="1"]{--paint:linear-gradient(180deg,#c48f0d 8%,#8a5a00 52%,#b17b06 68%,#7a4f00)} .cb-box[data-namefx=sunset]{--paint:linear-gradient(90deg,#ff5e7e,#ff8a4c 50%,#ffc85c)} .cb-box[data-namefx=sunset][data-light="1"]{--paint:linear-gradient(90deg,#d6284b,#df5420 50%,#b86e00)} /* Buz: buzlu mavi → lavanta (7TV'nin sevilen soğuk boyası); açık kartta derin camgöbeği → çivit */ .cb-box[data-namefx=ice]{--paint:linear-gradient(90deg,#e0f7ff,#7dd3fc 48%,#a5b4fc)} .cb-box[data-namefx=ice][data-light="1"]{--paint:linear-gradient(90deg,#0e7490,#0369a1 50%,#4338ca)} .cb-box:is([data-namefx=rainbow],[data-namefx=chrome],[data-namefx=gold],[data-namefx=sunset],[data-namefx=ice]) .cb-name{background:var(--paint);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))} .cb-box:is([data-namefx=rainbow],[data-namefx=chrome],[data-namefx=gold],[data-namefx=sunset],[data-namefx=ice])[data-light="1"] .cb-name{filter:none} .cb-box[data-style=split]:is([data-namefx=rainbow],[data-namefx=chrome],[data-namefx=gold],[data-namefx=sunset],[data-namefx=ice]) .cb-name{-webkit-background-clip:border-box;background-clip:border-box;color:#14101f;-webkit-text-fill-color:currentColor;filter:none} .cb-box[data-style=split]:is([data-namefx=chrome],[data-namefx=gold],[data-namefx=ice])[data-light="1"] .cb-name{color:#fff} /* ── Satır sınırı (en çok N satır, sonu …) ── */ .cb-box[data-lines] .cb-row:not(.cb-ev)>.cb-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);overflow:hidden;padding:.14em 0;margin:-.14em 0} .cb-box[data-lines]:is([data-sep=above],[data-layout=bubbles],[data-layout=spotlight]) .cb-row:not(.cb-ev)>.cb-body{display:block;-webkit-line-clamp:none;overflow:visible;padding:0;margin:0} .cb-box[data-lines][data-layout=bubbles] .cb-row:not(.cb-ev)>.cb-body.cb-card{padding:calc(.4em * var(--pad,1)) calc(.78em * var(--pad,1)) calc(.44em * var(--pad,1))} .cb-box[data-lines]:is([data-sep=above],[data-layout=bubbles],[data-layout=spotlight]) .cb-row:not(.cb-ev) .cb-msg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);overflow:hidden;padding:.14em 0;margin:-.14em 0} .cb-box[data-layout=columns] .cb-body>.cb-tag{margin:0 .45em 0 0} /* ── Vurgular ── */ .cb-box[data-card=card] .cb-hl-mention.cb-card,.cb-box[data-card=card] .cb-hl-mention>.cb-card{outline:max(2px,var(--bw,0px)) solid var(--c2);outline-offset:calc(max(2px,var(--bw,0px)) * -1)} .cb-box[data-card=none] .cb-hl-mention.cb-card,.cb-box[data-card=none] .cb-hl-mention>.cb-card{background:linear-gradient(90deg,var(--c2s),transparent 92%);border-radius:.3em} .cb-hl-first.cb-card,.cb-hl-first>.cb-card{box-shadow:0 0 0 1px var(--c2s),0 0 .9em var(--c2s),var(--csh,none)} /* ── Giriş animasyonları ── */ .cb-box[data-pos$=l] .cb-row{transform-origin:0 100%} .cb-box[data-pos$=c] .cb-row{transform-origin:50% 100%} .cb-box[data-pos$=r] .cb-row{transform-origin:100% 100%} .cb-box .cb-in{animation-duration:var(--dur,280ms);animation-timing-function:var(--ease,ease);animation-fill-mode:both} .cb-box[data-anim=fade] .cb-in{animation-name:cbFade} .cb-box[data-anim=up] .cb-in{animation-name:cbUp} .cb-box[data-anim=left] .cb-in{animation-name:cbLeft} .cb-box[data-anim=right] .cb-in{animation-name:cbRight} .cb-box[data-anim=pop] .cb-in{animation-name:cbPop} .cb-box[data-anim=bounce] .cb-in{animation-name:cbBounce;animation-timing-function:ease-out} .cb-box[data-anim=blur] .cb-in{animation-name:cbBlur} .cb-box[data-anim=flip] .cb-in{animation-name:cbFlip} .cb-box[data-anim=glitch] .cb-in{animation-name:cbGlitch;animation-timing-function:steps(1,end)} .cb-box[data-anim=type] .cb-in{animation-name:cbFade;animation-duration:calc(var(--dur,280ms) * .6)} .cb-typing .cb-msg::after{content:"▍";margin-left:.05em;opacity:.8;animation:cbCaret .6s steps(1) infinite} @keyframes cbCaret{50%{opacity:0}} @keyframes cbFade{from{opacity:0}} @keyframes cbUp{from{opacity:0;transform:translateY(.85em)}} @keyframes cbLeft{from{opacity:0;transform:translateX(-1.8em)}} @keyframes cbRight{from{opacity:0;transform:translateX(1.8em)}} @keyframes cbPop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.045)}100%{transform:none}} @keyframes cbBounce{0%{opacity:0;transform:translateY(1.5em)}45%{opacity:1;transform:translateY(-.35em)}70%{transform:translateY(.12em)}88%{transform:translateY(-.04em)}100%{transform:none}} @keyframes cbBlur{from{opacity:0;filter:blur(9px);transform:scale(1.05)}} @keyframes cbFlip{from{opacity:0;transform:perspective(40em) rotateX(-82deg)}60%{opacity:1}} .cb-box[data-anim=wipe] .cb-in{animation-name:cbWipe} .cb-box[data-anim=wipe][data-pos$=r] .cb-in{animation-name:cbWipeR} @keyframes cbWipe{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}} @keyframes cbWipeR{from{clip-path:inset(0 0 0 100%);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}} @keyframes cbGlitch{0%{opacity:0;transform:translateX(-.4em);clip-path:inset(0 0 62% 0);text-shadow:-.12em 0 #ff2a6d,.12em 0 #05d9e8}15%{opacity:1;transform:translateX(.3em);clip-path:inset(38% 0 0 0)}30%{transform:translateX(-.18em);clip-path:inset(0 0 28% 0);text-shadow:.1em 0 #ff2a6d,-.1em 0 #05d9e8}45%{transform:translateX(.12em);clip-path:inset(18% 0 12% 0)}60%{transform:none;clip-path:inset(0);text-shadow:-.05em 0 #ff2a6d,.05em 0 #05d9e8}80%,100%{transform:none;clip-path:none;text-shadow:var(--ts,none)}} /* çıkış */ .cb-out{pointer-events:none;animation-fill-mode:forwards;animation-timing-function:ease} .cb-out-fade{animation-name:cbOutFade} .cb-out-slide{animation-name:cbOutSlide} .cb-box[data-pos$=r] .cb-out-slide{animation-name:cbOutSlideR} .cb-box[data-layout=ticker] .cb-out-slide{animation-name:cbOutSlide} @keyframes cbOutFade{to{opacity:0}} @keyframes cbOutSlide{to{opacity:0;transform:translateX(-2.4em)}} @keyframes cbOutSlideR{to{opacity:0;transform:translateX(2.4em)}} /* ═════════════════════ ARAYÜZ ═════════════════════ */ .bvk-t-twitch-chat-overlay{--tco-ease:var(--kzk-ease,cubic-bezier(.2,.8,.3,1))} .bvk-t-twitch-chat-overlay .tco-mt{margin-top:12px} .bvk-t-twitch-chat-overlay .tco-aside{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-g{display:block;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .bvk-t-twitch-chat-overlay .tco-g .tco-f{fill:currentColor;stroke:none} .bvk-t-twitch-chat-overlay .tco-g .tco-f2{fill:color-mix(in srgb,currentColor 28%,transparent);stroke:currentColor;stroke-width:1.3} /* Glifli seçim ızgaraları */ .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs{gap:6px;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))} .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs.tco-g3{grid-template-columns:repeat(3,minmax(0,1fr))} .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs>button{flex-direction:column;gap:6px;min-height:60px;padding:9px 3px 7px;font-size:11.5px;line-height:1.15} .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs>button>span{display:block;max-width:100%;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;text-align:center} .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs>button:not(.on) :is(.tco-g,b,.tco-nm){color:var(--kzk-muted)} .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs>button:not(.on):hover :is(.tco-g,b){color:var(--kzk-text-2)} /* 5 seçenek: 3 + 2 (geniş panelde tek satır) */ .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs.tco-g5{grid-template-columns:repeat(6,minmax(0,1fr))} .bvk-t-twitch-chat-overlay .kzk-seg.tco-g5>button{grid-column:span 2} .bvk-t-twitch-chat-overlay .kzk-seg.tco-g5>button:nth-child(n+4){grid-column:span 3} @container kzkc (min-width:520px){ .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs.tco-g5{grid-template-columns:repeat(5,minmax(0,1fr))} .bvk-t-twitch-chat-overlay .kzk-seg.tco-g5>button,.bvk-t-twitch-chat-overlay .kzk-seg.tco-g5>button:nth-child(n+4){grid-column:auto} } .bvk-t-twitch-chat-overlay .tco-seps b{display:grid;place-items:center;height:22px;font:800 19px/1 var(--kzk-font)} /* Ad efekti döşemeleri: 'Aa' kendi efektiyle */ .bvk-t-twitch-chat-overlay .tco-nfx{display:grid;place-items:center;height:22px;font:800 20px/1 var(--kzk-font);color:var(--kzk-text)} .bvk-t-twitch-chat-overlay .tco-nfx--grad{background:linear-gradient(90deg,#ff5fa2,#7c6cff 55%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .bvk-t-twitch-chat-overlay .tco-nfx--glow{color:#c084fc;text-shadow:0 0 6px #a855f7,0 0 14px rgba(168,85,247,.7)} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-nfx--glow{color:#7c3aed;text-shadow:0 0 6px rgba(124,58,237,.55)} .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs>button:not(.on) .tco-nfx--grad{opacity:.8} .bvk-t-twitch-chat-overlay :is(.tco-nfx--rainbow,.tco-nfx--chrome,.tco-nfx--gold,.tco-nfx--sunset){-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .bvk-t-twitch-chat-overlay .tco-nfx--rainbow{background-image:linear-gradient(90deg,#ff5f6d,#ffc371 26%,#4be38f 50%,#3fa7ff 74%,#c77dff)} .bvk-t-twitch-chat-overlay .tco-nfx--chrome{background-image:linear-gradient(180deg,#fff 10%,#cdd4de 42%,#6e7989 55%,#e8edf3 72%,#a6afbd)} .bvk-t-twitch-chat-overlay .tco-nfx--gold{background-image:linear-gradient(180deg,#fff4c8 8%,#f7ca4b 40%,#b7860b 56%,#ffe08a 74%,#d9a51c)} .bvk-t-twitch-chat-overlay .tco-nfx--sunset{background-image:linear-gradient(90deg,#ff5e7e,#ff8a4c 50%,#ffc85c)} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-nfx--rainbow{background-image:linear-gradient(90deg,#e11d48,#d9480f 26%,#15803d 50%,#1d4ed8 74%,#7e22ce)} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-nfx--chrome{background-image:linear-gradient(180deg,#6b7585 8%,#2a313c 50%,#5a6371 64%,#1f252e)} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-nfx--gold{background-image:linear-gradient(180deg,#c48f0d 8%,#8a5a00 52%,#b17b06 68%,#7a4f00)} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-nfx--sunset{background-image:linear-gradient(90deg,#d6284b,#df5420 50%,#b86e00)} /* Süs seçici: 10 seçenek, 5'li iki satır */ .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs.tco-g10{grid-template-columns:repeat(5,minmax(0,1fr))} .bvk-t-twitch-chat-overlay .kzk-seg.tco-g10>button{min-height:58px;padding:8px 2px 6px;font-size:11px} .bvk-t-twitch-chat-overlay .kzk-seg.tco-g10>button>span{white-space:nowrap;overflow:hidden;-webkit-hyphens:manual;hyphens:manual} .bvk-t-twitch-chat-overlay .kzk-seg.tco-g10>button:not(.on) .tco-ornG{color:var(--kzk-muted)} .bvk-t-twitch-chat-overlay .tco-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* OBS boyutu hazırları */ .bvk-t-twitch-chat-overlay .kzk-seg.tco-sizes{gap:6px;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))} .bvk-t-twitch-chat-overlay .tco-sizes>button{flex-direction:column;gap:3px;min-height:70px;padding:8px 3px 6px;font-size:11.5px;line-height:1.15} .bvk-t-twitch-chat-overlay .tco-sizes>button>span{text-align:center;overflow-wrap:break-word} .bvk-t-twitch-chat-overlay .tco-sizes>button>small{font:500 10.5px/1.1 var(--kzk-mono,ui-monospace,monospace);color:var(--kzk-muted);white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-sizes>button.on>small{color:inherit;opacity:.8} .bvk-t-twitch-chat-overlay .tco-ar{display:block;width:var(--w);height:var(--h);margin:auto 0 3px;border:1.8px solid currentColor;border-radius:3px} .bvk-t-twitch-chat-overlay .tco-sizes>button:not(.on) .tco-ar{color:var(--kzk-muted)} .bvk-t-twitch-chat-overlay .tco-sizes>button.on .tco-ar{background:color-mix(in srgb,currentColor 16%,transparent)} @container kzkc (min-width:560px){.bvk-t-twitch-chat-overlay .kzk-seg.tco-sizes{grid-template-columns:repeat(6,minmax(0,1fr))}} .bvk-t-twitch-chat-overlay .kzk-row.tco-wh{margin-top:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} /* Konum 3×2 */ .bvk-t-twitch-chat-overlay .kzk-seg.tco-pos6{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .bvk-t-twitch-chat-overlay .tco-pos6>button{min-height:42px;padding:4px} .bvk-t-twitch-chat-overlay .tco-pos6>button .tco-g{width:26px;height:26px} .bvk-t-twitch-chat-overlay .tco-pos6>button:not(.on) .tco-g{color:var(--kzk-muted)} /* Etiket + iz seçici satırı */ .bvk-t-twitch-chat-overlay .tco-inl{display:flex;align-items:center;gap:10px;min-width:0} .bvk-t-twitch-chat-overlay .tco-inl+.tco-inl{margin-top:10px} .bvk-t-twitch-chat-overlay .tco-inl>.kzk-label{flex:0 0 auto;width:104px;margin:0;font-size:12.5px;color:var(--kzk-text-2);overflow-wrap:break-word} .bvk-t-twitch-chat-overlay .tco-inl>.kzk-seg{flex:1 1 auto;min-width:0} .bvk-t-twitch-chat-overlay .tco-inl>.kzk-seg>button{min-height:32px;padding:2px 6px;font-size:12px;min-width:0;white-space:normal;line-height:1.15} @container kzkc (max-width:380px){ .bvk-t-twitch-chat-overlay .tco-inl{flex-direction:column;align-items:stretch;gap:6px} .bvk-t-twitch-chat-overlay .tco-inl>.kzk-label{width:auto} } .bvk-t-twitch-chat-overlay .tco-sw{margin-top:10px} .bvk-t-twitch-chat-overlay .tco-sw+.tco-sw{margin-top:12px} .bvk-t-twitch-chat-overlay .tco-sw.tco-mt{margin-top:14px} /* Stil ve animasyon döşemeleri: gerçek sohbet kutusu (DOM) */ .bvk-t-twitch-chat-overlay .tco-tiles{--kzk-tile-min:104px;--kzk-thumb-h:74px} .bvk-t-twitch-chat-overlay .tco-tiles .kzk-tile-thumb{background:#15111f} .bvk-t-twitch-chat-overlay .tco-tiles--anim{--kzk-tile-min:96px;--kzk-thumb-h:58px} @container kzkc (min-width:540px){.bvk-t-twitch-chat-overlay .tco-tiles{--kzk-tile-min:112px;--kzk-thumb-h:80px}.bvk-t-twitch-chat-overlay .tco-tiles--anim{--kzk-tile-min:104px;--kzk-thumb-h:62px}} .bvk-t-twitch-chat-overlay .kzk-tile-label,.bvk-t-twitch-chat-overlay .kzk-tcard-title{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto} .bvk-t-twitch-chat-overlay .tco-th{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit} .bvk-t-twitch-chat-overlay .tco-th>.tco-thBg{position:absolute;inset:0;background:linear-gradient(rgba(14,10,24,.42),rgba(14,10,24,.56)),url("/kuzgun-welcome-landscape.webp") center/cover no-repeat,#1a1428} /* Stil döşemeleri: orta tonlu sahne (koyu kartlar kaybolmasın; stiller bir bakışta ayırt edilsin) */ .bvk-t-twitch-chat-overlay .tco-tiles:not(.tco-tiles--anim) .tco-th>.tco-thBg{background:linear-gradient(rgba(150,128,214,.26),rgba(112,92,180,.34)),url("/kuzgun-welcome-landscape.webp") center 30%/cover no-repeat,#3a2d5c} .bvk-t-twitch-chat-overlay .tco-th>.cb-box{position:absolute;left:0;top:0;transform-origin:0 0} /* stil döşemeleri: örnek satırlar dikeyde ortada (üstte boş gökyüzü kalmasın); telefonda iki sütun */ .bvk-t-twitch-chat-overlay .tco-tiles:not(.tco-tiles--anim) .tco-th>.cb-box>.cb-list{top:50%;bottom:auto;transform:translateY(-50%)} /* stil döşemesi örnek satırları tek satır: doğal genişlik en geniş satıra göre ölçülür, kartlar döşemeyi doldurur */ .bvk-t-twitch-chat-overlay .tco-tiles:not(.tco-tiles--anim) .tco-th .cb-row{white-space:nowrap;max-width:none} /* küçük resimde üst kenarda yarısı kesilen satır gizli (bir satır ya tam ya hiç) */ .bvk-t-twitch-chat-overlay .tco-th .cb-row.tco-cut{opacity:0!important;transition:opacity .22s ease} @container kzkc (min-width:328px) and (max-width:420px){.bvk-t-twitch-chat-overlay .tco-tiles:not(.tco-tiles--anim){--kzk-tile-min:140px;--kzk-thumb-h:92px}} /* hareket döşemeleri: türünü gösteren küçük köşe glifi (durağanken de ayırt edilsin; dokunmatikte üzerine gelme yok) */ .bvk-t-twitch-chat-overlay .tco-akind{position:absolute;right:5px;top:5px;z-index:2;display:grid;place-items:center;width:19px;height:19px;border-radius:6px;background:rgba(14,10,24,.66);color:#efe9fb;box-shadow:0 0 0 1px rgba(255,255,255,.12);pointer-events:none} .bvk-t-twitch-chat-overlay .tco-akind svg{display:block;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} /* seçili döşemede glif nötr: seçimi kitin altın işareti ve kenarı söyler (seçim başına tek altın) */ .bvk-t-twitch-chat-overlay .kzk-tile[aria-checked=true] .tco-akind{background:var(--kzk-card-2);color:var(--kzk-text);box-shadow:0 0 0 1px var(--kzk-line-2)} /* Süs seçici glifleri (aynı maskeler) */ .bvk-t-twitch-chat-overlay .tco-ornG{display:block;width:22px;height:22px;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .bvk-t-twitch-chat-overlay .tco-ornG[data-o=none]{-webkit-mask-image:none;mask-image:none;background:none;border:1.7px dashed currentColor;border-radius:50%;width:18px;height:18px;margin:2px;opacity:.7} .bvk-t-twitch-chat-overlay .kzk-tile-thumb>canvas,.bvk-t-twitch-chat-overlay .kzk-tcard-thumb>canvas{position:relative;z-index:0} /* Paletler */ .bvk-t-twitch-chat-overlay .tco-pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} @container kzkc (min-width:520px){.bvk-t-twitch-chat-overlay .tco-pals{grid-template-columns:repeat(5,minmax(0,1fr))}} .bvk-t-twitch-chat-overlay .tco-pal{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:6px 6px 7px;border-radius:var(--kzk-r-md);border:1px solid var(--kzk-line-2);background:var(--kzk-field);color:var(--kzk-text-2);font:600 11.5px/1.2 var(--kzk-font);text-align:left;cursor:pointer;transition:border-color .16s,background-color .16s,color .16s,transform .16s var(--tco-ease)} .bvk-t-twitch-chat-overlay .tco-pal:hover{border-color:var(--kzk-line-hover);color:var(--kzk-text)} @media (prefers-reduced-motion:no-preference){.bvk-t-twitch-chat-overlay .tco-pal:hover{transform:translateY(-1px)}} .bvk-t-twitch-chat-overlay .tco-pal>i{position:relative;display:block;height:22px;border-radius:5px;background:var(--k);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .bvk-t-twitch-chat-overlay .tco-pal>i::before{content:"";position:absolute;left:5px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--a);box-shadow:15px 0 0 var(--b)} .bvk-t-twitch-chat-overlay .tco-pal>i::after{content:"";position:absolute;right:6px;top:8px;width:34%;height:6px;border-radius:3px;background:var(--t);opacity:.85} .bvk-t-twitch-chat-overlay .tco-pal>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 1px} .bvk-t-twitch-chat-overlay .tco-pal[aria-pressed=true]{border-color:var(--kzk-gold-line);background:var(--kzk-sel-bg);color:var(--kzk-gold);box-shadow:inset 0 0 0 .5px var(--kzk-gold-line)} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-pal>i{box-shadow:inset 0 0 0 1px rgba(20,16,40,.16)} /* Ad rengi kipleri */ .bvk-t-twitch-chat-overlay .tco-nm{display:flex;gap:2px;height:20px;align-items:center} .bvk-t-twitch-chat-overlay .tco-nm::before,.bvk-t-twitch-chat-overlay .tco-nm::after{content:"";display:block;width:12px;height:12px;border-radius:50%} .bvk-t-twitch-chat-overlay .tco-nm--tw::before{background:#ff69b4;box-shadow:16px 0 0 #1e90ff} .bvk-t-twitch-chat-overlay .tco-nm--tw::after{margin-left:14px;background:#9acd32} .bvk-t-twitch-chat-overlay .tco-nm--pal::before{background:var(--c1v,#a855f7);box-shadow:16px 0 0 var(--c2v,#fbbf24)} .bvk-t-twitch-chat-overlay .tco-nm--pal::after{margin-left:14px;background:var(--c3v,#d08ab0)} .bvk-t-twitch-chat-overlay .tco-nm--one::before{background:var(--c1v,#a855f7);box-shadow:16px 0 0 var(--c1v,#a855f7)} .bvk-t-twitch-chat-overlay .tco-nm--one::after{margin-left:14px;background:var(--c1v,#a855f7)} .bvk-t-twitch-chat-overlay .tco-nm--txt::before{background:var(--txv,#fff);box-shadow:16px 0 0 var(--txv,#fff),inset 0 0 0 1px rgba(0,0,0,.2)} .bvk-t-twitch-chat-overlay .tco-nm--txt::after{margin-left:14px;background:var(--txv,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)} .bvk-t-twitch-chat-overlay .kzk-seg.tco-glyphs>button:not(.on)>.tco-nm{opacity:.75} .bvk-t-twitch-chat-overlay .kzk-row.tco-crow{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @container kzkc (min-width:560px){.bvk-t-twitch-chat-overlay .kzk-row.tco-crow{grid-template-columns:repeat(4,minmax(0,1fr))}} .bvk-t-twitch-chat-overlay .kzk-sec-head>#tco-swap{margin-left:auto} .bvk-t-twitch-chat-overlay #tco-contrastHint{color:var(--kzk-warn)} .bvk-t-twitch-chat-overlay #tco-contrastHint[hidden]{display:none} /* Yazı tipleri */ .bvk-t-twitch-chat-overlay .kzk-seg.tco-fonts{gap:6px;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))} /* 15 yazı tipi: iki sütunda sonuncusu (okunurluk yazı tipi) tam genişlik — tek başına yarım satır kalmasın; üç sütunda 5 × 3 */ .bvk-t-twitch-chat-overlay .kzk-seg.tco-fonts>button[data-v=atkinson]{grid-column:1/-1} @container kzkc (min-width:520px){.bvk-t-twitch-chat-overlay .kzk-seg.tco-fonts{grid-template-columns:repeat(3,minmax(0,1fr))}.bvk-t-twitch-chat-overlay .kzk-seg.tco-fonts>button[data-v=atkinson]{grid-column:auto}} .bvk-t-twitch-chat-overlay .tco-fonts>button{flex-direction:column;align-items:stretch;gap:2px;min-height:58px;padding:7px 8px 6px;text-align:left;justify-content:center} .bvk-t-twitch-chat-overlay .tco-fonts>button>.tco-fs{display:block;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--kzk-text)} .bvk-t-twitch-chat-overlay .tco-fonts>button>.tco-fn{display:block;font:500 10.5px/1.2 var(--kzk-font);color:var(--kzk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bvk-t-twitch-chat-overlay .tco-fonts>button.on>.tco-fs{color:inherit} .bvk-t-twitch-chat-overlay .tco-fonts>button[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-wseg>button{min-height:32px;padding:2px 4px;font-size:12px} .bvk-t-twitch-chat-overlay .tco-wseg>button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Rozet örnek satırı, olaylar, dene */ .bvk-t-twitch-chat-overlay .tco-badgeDemo{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px 114px;min-height:20px} .bvk-t-twitch-chat-overlay .tco-badgeDemo .cb-badge{width:20px;height:20px} .bvk-t-twitch-chat-overlay .tco-badgeDemo[hidden]{display:none} @container kzkc (max-width:380px){.bvk-t-twitch-chat-overlay .tco-badgeDemo{margin-left:0}} .bvk-t-twitch-chat-overlay .tco-evs{display:flex;flex-wrap:wrap;gap:8px 14px;margin:12px 0 0;padding:10px 12px;border-radius:var(--kzk-r-md);background:var(--kzk-field);border:1px solid var(--kzk-line)} .bvk-t-twitch-chat-overlay .tco-evs .kzk-check{font-size:12.5px} .bvk-t-twitch-chat-overlay .tco-evs[data-off]{opacity:.5} /* 'Önizlemede dene' olay düğmeleri: glif döşemeleri (3 + 2; geniş panelde 5'li tek satır) */ .bvk-t-twitch-chat-overlay .tco-tryWrap{margin-top:12px} .bvk-t-twitch-chat-overlay .tco-tryWrap>.kzk-label{display:block;margin:0 0 6px;font-size:12px;color:var(--kzk-muted)} .bvk-t-twitch-chat-overlay .tco-try{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px} .bvk-t-twitch-chat-overlay .tco-try>button{grid-column:span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:56px;padding:8px 3px 6px;border-radius:var(--kzk-r-md);border:1px solid var(--kzk-line-2);background:var(--kzk-field);color:var(--kzk-text-2);font:600 11.5px/1.15 var(--kzk-font);cursor:pointer;transition:border-color .16s,background-color .16s,color .16s,transform .16s var(--tco-ease)} .bvk-t-twitch-chat-overlay .tco-try>button:nth-child(n+4){grid-column:span 3} .bvk-t-twitch-chat-overlay .tco-try>button>svg{width:20px;height:20px;fill:var(--kzk-lilac)} .bvk-t-twitch-chat-overlay .tco-try>button>span{max-width:100%;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;text-align:center} .bvk-t-twitch-chat-overlay .tco-try>button:hover{border-color:var(--kzk-lilac);color:var(--kzk-text)} .bvk-t-twitch-chat-overlay .tco-try>button:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:2px} @media (prefers-reduced-motion:no-preference){.bvk-t-twitch-chat-overlay .tco-try>button:active{transform:scale(.97)}} @container kzkc (min-width:520px){.bvk-t-twitch-chat-overlay .tco-try{grid-template-columns:repeat(5,minmax(0,1fr))}.bvk-t-twitch-chat-overlay .tco-try>button,.bvk-t-twitch-chat-overlay .tco-try>button:nth-child(n+4){grid-column:auto}} .bvk-t-twitch-chat-overlay .tco-whoSeg{margin-top:2px} .bvk-t-twitch-chat-overlay .tco-whoSeg>button{min-height:32px;padding:2px 4px;font-size:12px;white-space:nowrap} .bvk-t-twitch-chat-overlay #tco-botsWrap[data-off]{opacity:.55} /* ───────── Önizleme ───────── */ .bvk-t-twitch-chat-overlay .tco-tools{display:flex;align-items:center;gap:6px;margin-left:auto} .bvk-t-twitch-chat-overlay .tco-rnd{gap:6px} .bvk-t-twitch-chat-overlay #tco-prevTag{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bvk-t-twitch-chat-overlay #tco-prevTag:empty{display:none} .bvk-t-twitch-chat-overlay #tco-prevTag.tco-trying{color:var(--kzk-text)} .bvk-t-twitch-chat-overlay #tco-prevTag.tco-trying::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--kzk-lilac);vertical-align:1px} @container kzkc (max-width:520px){ .bvk-t-twitch-chat-overlay .tco-rnd>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-rnd{padding:0 8px} .bvk-t-twitch-chat-overlay #tco-prevTag{display:none} } @container kzkc (max-width:440px){.bvk-t-twitch-chat-overlay .tco-prev .kzk-prev-head>:is(.kzk-size,.tco-sizeCtx){display:none}} @container kzkc (max-width:620px){.bvk-t-twitch-chat-overlay .tco-prev .kzk-prev-head>.tco-sizeCtx{display:none}} /* Kanal çubuğu */ .bvk-t-twitch-chat-overlay .tco-chan{display:flex;align-items:center;gap:0;min-width:0;height:42px;margin:0 0 10px;padding:0 6px 0 10px;border-radius:var(--kzk-r-md);background:var(--kzk-field);border:1px solid var(--kzk-line-2);transition:border-color .16s,box-shadow .16s} .bvk-t-twitch-chat-overlay .tco-chan:focus-within{border-color:var(--kzk-lilac);box-shadow:0 0 0 3px var(--kzk-ring-lilac,rgba(168,85,247,.25))} .bvk-t-twitch-chat-overlay .tco-chan[data-err]{border-color:var(--kzk-warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--kzk-warn) 22%,transparent)} .bvk-t-twitch-chat-overlay .tco-chanLbl{display:flex;align-items:center;gap:7px;flex:none;margin:0;color:var(--kzk-muted);font:500 13px/1 var(--kzk-font);cursor:text} .bvk-t-twitch-chat-overlay .tco-tw{width:16px;height:16px;fill:#a970ff;flex:none} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-tw{fill:#7c3aed} .bvk-t-twitch-chat-overlay .tco-chan>input#channel{flex:1 1 auto;min-width:40px;height:100%;padding:0 6px 0 1px;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;color:var(--kzk-text);font:600 14px/1 var(--kzk-font)} .bvk-t-twitch-chat-overlay .tco-chan>input#channel::placeholder{color:var(--kzk-faint);font-weight:500} .bvk-t-twitch-chat-overlay .tco-status{flex:none;display:inline-flex;align-items:center;gap:6px;max-width:48%;padding:4px 10px;border-radius:999px;background:var(--kzk-card-3);color:var(--kzk-muted);font:600 11.5px/1.2 var(--kzk-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bvk-t-twitch-chat-overlay .tco-status:empty{display:none} .bvk-t-twitch-chat-overlay .tco-status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75} .bvk-t-twitch-chat-overlay .tco-status.on{color:#4ade80;background:color-mix(in srgb,#4ade80 13%,transparent)} .bvk-t-twitch-chat-overlay .tco-status.on::before{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,#4ade80 25%,transparent)} .bvk-t-twitch-chat-overlay .tco-status.wait::before{animation:tcoPulse 1s ease-in-out infinite} .bvk-t-twitch-chat-overlay .tco-status.warn{color:var(--kzk-warn);background:color-mix(in srgb,var(--kzk-warn) 12%,transparent)} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-status.on{color:#15803d} @keyframes tcoPulse{50%{opacity:.25}} /* Sahne + ölçek vekili (kitin yakınlaştırması .tco-frame'in genişliğini ayarlar; içerik JS ile ölçeklenir) */ .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage{--kzk-stage-pad:14px;min-height:300px} @container kzkc (max-width:520px){.bvk-t-twitch-chat-overlay .tco-prev .kzk-stage{min-height:200px}} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage[data-scene=scene]{background:linear-gradient(rgba(12,9,20,.38),rgba(12,9,20,.38)),var(--kzk-scene-img,url("/kuzgun-welcome-landscape.webp")) center/cover no-repeat,#1a1428} .bvk-t-twitch-chat-overlay .tco-frame{position:relative;width:min(100%,calc(var(--tco-maxh,560px) * var(--tco-ar,.55)));aspect-ratio:var(--tco-ar,.55);flex:none} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage[data-zoom]:not([data-zoom=fit]) .tco-frame{max-width:none} .bvk-t-twitch-chat-overlay .tco-scaler{position:absolute;left:0;top:0;transform-origin:0 0} .bvk-t-twitch-chat-overlay .tco-sceneImg{display:none} .bvk-t-twitch-chat-overlay .tco-boxWrap{position:absolute;left:0;top:0;width:100%;height:100%} .bvk-t-twitch-chat-overlay .tco-boxWrap>.cb-box{position:absolute;inset:0} .bvk-t-twitch-chat-overlay .tco-bounds{position:absolute;inset:0;border:2px dashed rgba(255,255,255,.34);border-radius:4px;pointer-events:none} .bvk-t-twitch-chat-overlay .kzk-stage[data-scene=light] .tco-bounds,.bvk-t-twitch-chat-overlay .kzk-stage[data-scene=green] .tco-bounds{border-color:rgba(20,10,40,.4)} /* Boyut etiketi yalnız 'Yayında': kutunun üst kenarının DIŞINDA (mesajları örtmez); kutu sahnenin tepesindeyse içeride */ .bvk-t-twitch-chat-overlay .tco-boundsTag{display:none;position:absolute;right:0;bottom:100%;padding:3px 8px;border-radius:6px;background:rgba(14,12,22,.78);color:#e9e4f5;font:600 calc(11px * var(--tco-inv,1))/1.2 var(--kzk-mono,ui-monospace,monospace);white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-onStream .tco-boundsTag{display:block} .bvk-t-twitch-chat-overlay .tco-onStream .tco-boundsTag.tco-tagIn{bottom:auto;top:var(--tco-tagIn,6px);right:var(--tco-tagIn,6px);margin:0!important} /* Çok geniş kaynak (alt bant): şerit sahnenin altına oturur */ .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage[data-wide]{min-height:250px} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage[data-wide] .kzk-stage-in{align-items:end;padding-bottom:26px} /* Yayında: 1920×1080 sahne, kutu köşede gerçek oranda */ .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage.tco-onStream{--kzk-stage-pad:0px} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage.tco-onStream[data-scene=scene]{background:#0b0814} .bvk-t-twitch-chat-overlay .tco-onStream[data-scene=scene] .tco-sceneImg{display:block;position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,18,.05),rgba(10,8,18,.35)),url("/kuzgun-welcome-landscape.webp") center/cover no-repeat,#1a1428} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage.tco-onStream:not([data-scene=scene]) .tco-frame{outline:1px solid rgba(255,255,255,.18)} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage.tco-onStream:is([data-scene=light],[data-scene=green]) .tco-frame{outline-color:rgba(20,10,40,.3)} .bvk-t-twitch-chat-overlay .tco-onStream .tco-boxWrap{width:auto;height:auto} .bvk-t-twitch-chat-overlay .tco-onStream .tco-bounds{border-width:3px;border-color:rgba(255,255,255,.28)} /* Canlı bekleme notu (sahnenin içinde, satır içi absolute) */ .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage{position:relative} .bvk-t-twitch-chat-overlay .tco-wait{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;max-width:calc(100% - 28px);padding:6px 6px 6px 12px;border-radius:999px;background:rgba(14,12,22,.86);border:1px solid rgba(255,255,255,.14);color:#e9e4f5;font:500 12.5px/1.3 var(--kzk-font);box-shadow:0 8px 28px rgba(0,0,0,.4)} .bvk-t-twitch-chat-overlay .tco-wait[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-wait>span:not(.tco-waitDot){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-waitDot{flex:none;width:8px;height:8px;border-radius:50%;background:#4ade80;animation:tcoPulse 1.1s ease-in-out infinite} .bvk-t-twitch-chat-overlay .tco-wait>.kzk-btn{flex:none;color:#e9e4f5;border-color:rgba(255,255,255,.18)} /* Dok: örnek/canlı, oynat, hız, yayında */ .bvk-t-twitch-chat-overlay .tco-prev .kzk-dock{gap:6px} .bvk-t-twitch-chat-overlay .tco-dockGrp{display:inline-flex;align-items:center;gap:6px;min-width:0} .bvk-t-twitch-chat-overlay .tco-src>button{gap:6px;min-height:32px;padding:2px 10px;font-size:12px;white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-src>button>i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55} .bvk-t-twitch-chat-overlay .tco-src>button[value=live].on>i{background:#ff4d6a;opacity:1;box-shadow:0 0 0 3px rgba(255,77,106,.25)} .bvk-t-twitch-chat-overlay .tco-pace>button{min-height:32px;min-width:32px;padding:0 4px} .bvk-t-twitch-chat-overlay .tco-pace>button .kzk-i{width:17px;height:17px} .bvk-t-twitch-chat-overlay .tco-pace[hidden],.bvk-t-twitch-chat-overlay .tco-play[hidden],.bvk-t-twitch-chat-overlay .tco-paceLbl[hidden]{display:none} /* akış hızı: etkin hızın adı çubukların yanında (sinyal gücü gibi okunmasın; dokunmatikte title görünmez) */ .bvk-t-twitch-chat-overlay .tco-paceLbl{font:500 12px/1.2 var(--kzk-font);color:var(--kzk-muted);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} .bvk-t-twitch-chat-overlay .tco-sizeCtx{font:500 12px/1.2 var(--kzk-font);color:var(--kzk-muted);white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-sizeCtx:empty,.bvk-t-twitch-chat-overlay .tco-sizeCtx[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-play{width:36px;height:36px} .bvk-t-twitch-chat-overlay .tco-streamBtn{gap:7px;min-height:36px;padding:0 10px;border:1px solid var(--kzk-line-2)} .bvk-t-twitch-chat-overlay .tco-streamBtn .tco-tgl{position:relative;display:block;width:26px;height:15px;border-radius:999px;background:var(--kzk-line-2);transition:background-color .16s} .bvk-t-twitch-chat-overlay .tco-streamBtn .tco-tgl::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--kzk-text-2);transition:transform .16s var(--tco-ease),background-color .16s} .bvk-t-twitch-chat-overlay .tco-streamBtn[aria-pressed=true]{color:var(--kzk-text);border-color:var(--kzk-hl-line);background:var(--kzk-hl-bg)} .bvk-t-twitch-chat-overlay .tco-streamBtn[aria-pressed=true] .tco-tgl{background:var(--kzk-lilac)} .bvk-t-twitch-chat-overlay .tco-streamBtn[aria-pressed=true] .tco-tgl::after{transform:translateX(11px);background:#fff} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage:is([data-zoom=fit],:not([data-zoom])) ~ .kzk-dock .kzk-zoom-val{font-size:0} .bvk-t-twitch-chat-overlay .tco-prev .kzk-stage:is([data-zoom=fit],:not([data-zoom])) ~ .kzk-dock .kzk-zoom-val::after{content:var(--tco-fit,"Fit");font-size:12.5px} @container kzkc (max-width:820px){ .bvk-t-twitch-chat-overlay .tco-prev .kzk-dock>.tco-dockGrp{order:3;flex:1 1 100%} .bvk-t-twitch-chat-overlay .tco-dockGrp>.tco-src{flex:1 1 auto} .bvk-t-twitch-chat-overlay .tco-dockGrp>.tco-src>button{flex:1 1 0;justify-content:center} } @container kzkc (max-width:600px){ .bvk-t-twitch-chat-overlay .tco-prev .kzk-dock>.kzk-scenes{flex:1 1 auto;justify-content:flex-start} .bvk-t-twitch-chat-overlay .tco-prev .kzk-dock>.kzk-zoom{flex:0 0 auto;margin-left:auto} .bvk-t-twitch-chat-overlay .tco-prev .kzk-zoom [data-z="-"],.bvk-t-twitch-chat-overlay .tco-prev .kzk-zoom [data-z="+"]{display:none} .bvk-t-twitch-chat-overlay .tco-dockGrp{flex-wrap:wrap} .bvk-t-twitch-chat-overlay .tco-dockGrp>.tco-src{flex:1 1 100%} .bvk-t-twitch-chat-overlay .tco-dockGrp>.tco-streamBtn{flex:1 1 auto;justify-content:center} } @container kzkc (max-width:460px){.bvk-t-twitch-chat-overlay .tco-prev .kzk-stage{--kzk-stage-pad:8px}} /* Taslak notu */ .bvk-t-twitch-chat-overlay .tco-draft{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 6px 6px 10px;border-radius:var(--kzk-r-md);background:var(--kzk-hl-bg);border:1px solid var(--kzk-hl-line);color:var(--kzk-text-2);font-size:12.5px} .bvk-t-twitch-chat-overlay .tco-draft[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-draft>svg{color:var(--kzk-lilac);flex:none} .bvk-t-twitch-chat-overlay .tco-draft>span{flex:1 1 auto;min-width:0} .bvk-t-twitch-chat-overlay .tco-draft>.kzk-btn{flex:none} /* Örnek/canlı kaynak notu (önizlemenin altında tek satır; sohbetin üstünü örtmez) */ .bvk-t-twitch-chat-overlay :is(.tco-srcNote,.tco-mNote){display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:7px 12px;border-radius:var(--kzk-r-md);background:var(--kzk-field);border:1px solid var(--kzk-line);font:500 12.5px/1.4 var(--kzk-font);color:var(--kzk-text-2)} .bvk-t-twitch-chat-overlay :is(.tco-srcNote,.tco-mNote)[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-srcNote>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--kzk-lilac);opacity:.85} .bvk-t-twitch-chat-overlay .tco-srcNote[data-k=live]>i{background:#ff4d6a;box-shadow:0 0 0 3px rgba(255,77,106,.22)} .bvk-t-twitch-chat-overlay .tco-srcNote[data-k=warn]{border-color:color-mix(in srgb,var(--kzk-warn) 45%,transparent);color:var(--kzk-text)} .bvk-t-twitch-chat-overlay .tco-srcNote[data-k=warn]>i{background:var(--kzk-warn)} .bvk-t-twitch-chat-overlay .tco-srcNote>span{min-width:0} .bvk-t-twitch-chat-overlay .tco-sizeTip{padding-right:6px} .bvk-t-twitch-chat-overlay .tco-sizeTip>span{flex:1 1 auto} .bvk-t-twitch-chat-overlay .tco-sizeTip>.kzk-btn{flex:none;margin-left:auto;font-variant-numeric:tabular-nums} .bvk-t-twitch-chat-overlay .tco-srcNote+.tco-sizeTip{margin-top:6px} .bvk-t-twitch-chat-overlay .tco-mNote{border-color:color-mix(in srgb,var(--kzk-ok,#4ade80) 40%,transparent)} .bvk-t-twitch-chat-overlay .tco-mNote[data-k=warn]{border-color:color-mix(in srgb,var(--kzk-warn) 45%,transparent)} .bvk-t-twitch-chat-overlay .tco-mNote::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--kzk-ok,#4ade80)} .bvk-t-twitch-chat-overlay .tco-mNote[data-k=warn]::before{background:var(--kzk-warn)} /* Kopyalandı / tasarım değişti (yeniden kopyala) işaretleri */ .bvk-t-twitch-chat-overlay :is(#obsCopy,#tco-mLink){position:relative} .bvk-t-twitch-chat-overlay :is(#obsCopy,#tco-mLink).tco-stale::after{content:"";position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--kzk-on-gold,#1a1300);box-shadow:0 0 0 2px color-mix(in srgb,var(--kzk-on-gold,#1a1300) 25%,transparent)} /* Telefon eylem satırı + mini önizleme (yalnız tek sütunda) */ .bvk-t-twitch-chat-overlay .tco-mact{display:flex;gap:8px;margin-top:10px} .bvk-t-twitch-chat-overlay .tco-mact>.kzk-btn{flex:1 1 0;justify-content:center;min-height:44px;min-width:0} .bvk-t-twitch-chat-overlay .tco-mact>.kzk-btn>span{min-width:0;white-space:normal;text-align:center;line-height:1.15;overflow-wrap:break-word} /* 'Gönder' yalnız simge (etiket aria-label'da): iki ana düğmeye yer kalsın */ .bvk-t-twitch-chat-overlay .tco-mact>.tco-mShare{flex:0 0 44px;width:44px;padding:0} .bvk-t-twitch-chat-overlay .tco-mact>.tco-mShare>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-mact>.tco-mShare[hidden]{display:none} @container kzk (min-width:860px){.bvk-t-twitch-chat-overlay .tco-mact{display:none}} .bvk-t-twitch-chat-overlay .tco-mini{display:none} @container kzk (max-width:859px){ .bvk-t-twitch-chat-overlay .tco-mini{display:block;flex:0 0 auto;position:relative;height:132px;margin:12px 12px 0;border-radius:var(--kzk-r-md);overflow:hidden;border:1px solid var(--kzk-line);background:linear-gradient(rgba(12,9,20,.5),rgba(12,9,20,.5)),url("/kuzgun-welcome-landscape.webp") center/cover no-repeat,#120f1b} .bvk-t-twitch-chat-overlay .tco-miniStage{position:absolute;left:0;top:0;transform-origin:0 0} .bvk-t-twitch-chat-overlay .tco-miniBox{position:absolute;inset:0} } /* ───────── Dışa aktarma ───────── */ .bvk-t-twitch-chat-overlay #tco-expCard{position:relative} .bvk-t-twitch-chat-overlay .tco-toasts{position:absolute;left:12px;right:12px;top:12px;z-index:5;pointer-events:none} .bvk-t-twitch-chat-overlay .tco-toasts>*{pointer-events:auto} .bvk-t-twitch-chat-overlay .tco-toasts .kzk-toasts{margin:0} .bvk-t-twitch-chat-overlay .tco-xhead{display:flex;flex-direction:column;gap:2px;margin:0 0 10px} .bvk-t-twitch-chat-overlay .tco-xtitle{font:700 13.5px/1.3 var(--kzk-font);color:var(--kzk-text)} .bvk-t-twitch-chat-overlay .tco-xsub{font:400 12px/1.4 var(--kzk-font);color:var(--kzk-muted)} .bvk-t-twitch-chat-overlay .tco-xchan{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 12px;padding:8px 10px;border-radius:var(--kzk-r-md);background:var(--kzk-field);border:1px solid var(--kzk-line);font:500 12.5px/1.3 var(--kzk-font);color:var(--kzk-text-2)} .bvk-t-twitch-chat-overlay .tco-xchan:empty{display:none} .bvk-t-twitch-chat-overlay .tco-xchan>svg{width:15px;height:15px;flex:none;fill:#a970ff} .bvk-t-twitch-chat-overlay .tco-xchan>b{color:var(--kzk-text);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-xchan>button{margin-left:auto;flex:none;padding:2px 0;border:0;background:none;color:var(--kzk-lilac);font:600 12px/1.3 var(--kzk-font);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--kzk-lilac) 40%,transparent)} .bvk-t-twitch-chat-overlay .tco-xchan[data-empty]{border-style:dashed;color:var(--kzk-muted)} /* boş ve dolu durum tek satır: kanal girilince çip yüksekliği değişip altındaki 'OBS bağlantısını kopyala' kaymasın */ .bvk-t-twitch-chat-overlay .tco-xchan>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-exp .kzk-exp-actions.tco-xact{display:flex;flex-direction:column;gap:10px} .bvk-t-twitch-chat-overlay .tco-xact>#obsCopy{width:100%;justify-content:center;min-height:50px;height:auto;padding-left:12px;padding-right:12px} .bvk-t-twitch-chat-overlay .tco-xact>#obsCopy .kzk-btn-sub{white-space:normal;overflow-wrap:anywhere} .bvk-t-twitch-chat-overlay .tco-open{align-self:center;gap:6px;color:var(--kzk-text-2)} .bvk-t-twitch-chat-overlay .tco-linkOut{display:flex;flex-direction:column;gap:8px} .bvk-t-twitch-chat-overlay .tco-linkOut[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-linkRow{display:flex;align-items:center;gap:4px;min-width:0;height:38px;padding:0 3px 0 10px;border-radius:var(--kzk-r-md);background:var(--kzk-field);border:1px solid var(--kzk-line-2)} .bvk-t-twitch-chat-overlay .tco-linkRow:focus-within{border-color:var(--kzk-lilac);box-shadow:0 0 0 3px var(--kzk-ring-lilac,rgba(168,85,247,.25))} .bvk-t-twitch-chat-overlay .kzk-card .tco-linkRow>input.tco-linkIn{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;background:transparent;box-shadow:none!important;color:var(--kzk-lilac);font:500 12px/1 var(--kzk-mono,ui-monospace,monospace);text-overflow:ellipsis} .bvk-t-twitch-chat-overlay .tco-linkRow .kzk-icon-btn{width:30px;height:30px} .bvk-t-twitch-chat-overlay .tco-dims{display:flex;gap:6px} .bvk-t-twitch-chat-overlay .tco-dim{flex:1 1 0;display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;min-height:32px;padding:0 10px;border-radius:var(--kzk-r-md);border:1px dashed var(--kzk-line-2);background:transparent;color:var(--kzk-muted);font:500 12px/1 var(--kzk-font);cursor:copy} .bvk-t-twitch-chat-overlay .tco-dim>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-dim>b{color:var(--kzk-text);font:600 12.5px/1 var(--kzk-mono,ui-monospace,monospace)} .bvk-t-twitch-chat-overlay .tco-dim:hover{border-color:var(--kzk-lilac);color:var(--kzk-text-2)} .bvk-t-twitch-chat-overlay .tco-xact>.kzk-hint{margin:0;font-size:11.5px;line-height:1.45} .bvk-t-twitch-chat-overlay .tco-exp .kzk-lock{margin-top:0} .bvk-t-twitch-chat-overlay .tco-steps{margin-top:12px} .bvk-t-twitch-chat-overlay .tco-steps>summary>span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bvk-t-twitch-chat-overlay .tco-stepList{margin:0 0 10px;padding:0;list-style:none;counter-reset:tco;display:flex;flex-direction:column;gap:8px} .bvk-t-twitch-chat-overlay .tco-stepList>li{position:relative;padding-left:28px;font:400 12.5px/1.5 var(--kzk-font);color:var(--kzk-text-2);counter-increment:tco} .bvk-t-twitch-chat-overlay .tco-stepList>li::before{content:counter(tco);position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--kzk-hl-bg);border:1px solid var(--kzk-hl-line);color:var(--kzk-lilac);font:700 11px/1 var(--kzk-font)} .bvk-t-twitch-chat-overlay .tco-stepList b{color:var(--kzk-text);font-weight:600} .bvk-t-twitch-chat-overlay .tco-copySteps{gap:6px} /* geniş düzende ilk açılış: ilk 4 adım + 'Tüm 8 adım' (iç kaydırma kutusu yok, cümle ortasında kesilmez) */ .bvk-t-twitch-chat-overlay .tco-steps[data-short] .tco-stepList>li:nth-child(n+5){display:none} .bvk-t-twitch-chat-overlay .tco-stepBtns{display:flex;flex-wrap:wrap;gap:6px} .bvk-t-twitch-chat-overlay .tco-allSteps{gap:6px} .bvk-t-twitch-chat-overlay .tco-steps:not([data-short]) .tco-allSteps{display:none} @container kzkc (min-width:640px){ .bvk-t-twitch-chat-overlay .tco-exp .kzk-exp-actions.tco-xact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px 16px;align-items:start} .bvk-t-twitch-chat-overlay .tco-xact>#obsCopy{grid-column:1;grid-row:1} .bvk-t-twitch-chat-overlay .tco-xact>.tco-dims{grid-column:2;grid-row:1;align-self:center} .bvk-t-twitch-chat-overlay .tco-xact>.tco-open{grid-column:1;justify-self:start} .bvk-t-twitch-chat-overlay .tco-xact>.tco-linkOut,.bvk-t-twitch-chat-overlay .tco-xact>.kzk-hint,.bvk-t-twitch-chat-overlay .tco-xact>.kzk-lock{grid-column:1/-1} } /* ≥1380: dışa aktarma sütunu satırı uzatmaz (contain:size; satırın boyunu önizleme belirler). Açık 'OBS'te kur' adımları kalan yere sığar ve içeride kayar (JS fitExp: gövdeye en çok yükseklik + sütuna en az yükseklik) — önizlemenin altında boşluk kalmaz, Görünümler hemen önizlemenin altından başlar. */ @container kzk (min-width:1380px){ .bvk-t-twitch-chat-overlay .kzk-col-exp{align-self:stretch;contain:size;min-height:var(--tco-expMin,0px)} .bvk-t-twitch-chat-overlay .tco-exp{height:100%;display:flex;flex-direction:column} .bvk-t-twitch-chat-overlay .tco-exp>.tco-steps{margin-top:14px} .bvk-t-twitch-chat-overlay .tco-steps>.kzk-details-body.tco-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--kzk-line-2) transparent} .bvk-t-twitch-chat-overlay .tco-steps>.kzk-details-body.tco-scroll.tco-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)} } /* ───────── Görünümler ───────── */ .bvk-t-twitch-chat-overlay .tco-looksCard{position:relative} .bvk-t-twitch-chat-overlay .kzk-sec-head>.tco-saveLook{margin-left:auto;gap:6px} .bvk-t-twitch-chat-overlay .tco-ltabsWrap{position:relative;margin:0 0 12px} .bvk-t-twitch-chat-overlay .tco-ltabs{margin:0 -2px;gap:5px} .bvk-t-twitch-chat-overlay .kzk-seg--chips.tco-ltabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px} .bvk-t-twitch-chat-overlay .kzk-seg--chips.tco-ltabs::-webkit-scrollbar{display:none} .bvk-t-twitch-chat-overlay .kzk-seg--chips.tco-ltabs.tco-ovf{padding-right:30px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)} .bvk-t-twitch-chat-overlay .tco-ltabs>button{flex:0 0 auto;min-height:30px;padding:3px 10px;font-size:12.5px} .bvk-t-twitch-chat-overlay .tco-ltabs>button .tco-n{margin-left:5px;font-weight:500;color:var(--kzk-muted);font-variant-numeric:tabular-nums} .bvk-t-twitch-chat-overlay .tco-ltabs>button.on .tco-n{color:inherit;opacity:.8} .bvk-t-twitch-chat-overlay .tco-ltabsNext{position:absolute;right:-2px;top:50%;transform:translateY(-50%);z-index:1;background:var(--kzk-card-2);border:1px solid var(--kzk-line-2);box-shadow:0 2px 10px rgba(0,0,0,.3)} .bvk-t-twitch-chat-overlay .tco-ltabsNext[hidden]{display:none} @container kzkc (min-width:820px){ .bvk-t-twitch-chat-overlay .kzk-seg--chips.tco-ltabs{flex-wrap:wrap;overflow:visible} .bvk-t-twitch-chat-overlay .kzk-seg--chips.tco-ltabs.tco-ovf{padding-right:2px;-webkit-mask-image:none;mask-image:none} .bvk-t-twitch-chat-overlay .tco-ltabsNext{display:none} } .bvk-t-twitch-chat-overlay .tco-looks{--kzk-ar:4/3} .bvk-t-twitch-chat-overlay .kzk-cards.tco-looks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} @container kzkc (min-width:452px){.bvk-t-twitch-chat-overlay .kzk-cards.tco-looks{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}} @container kzkc (min-width:700px){.bvk-t-twitch-chat-overlay .kzk-cards.tco-looks{grid-template-columns:repeat(4,minmax(0,1fr))}} @container kzkc (min-width:920px){.bvk-t-twitch-chat-overlay .kzk-cards.tco-looks{grid-template-columns:repeat(6,minmax(0,1fr))}} .bvk-t-twitch-chat-overlay .tco-looks .kzk-tcard-thumb{background:#120f1c} /* animasyonlu görünüm: küçük resmin köşesinde kendini anlatan çip (açıklamasız nokta yerine) */ .bvk-t-twitch-chat-overlay .tco-animChip{position:absolute;left:6px;top:6px;z-index:2;display:inline-flex;align-items:center;gap:4px;max-width:calc(100% - 12px);padding:2px 7px 2px 5px;border-radius:999px;background:rgba(14,10,24,.74);color:#efe9fb;font:600 10.5px/1.35 var(--kzk-font);box-shadow:0 0 0 1px rgba(255,255,255,.14);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bvk-t-twitch-chat-overlay .tco-animChip>svg{flex:none;width:11px;height:11px;fill:none;stroke:#d8b4fe;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .bvk-t-twitch-chat-overlay .tco-animChip[hidden]{display:none} /* KİT EKSİĞİ (kzk 1.2, kzk.css:543): 'Daha az' açıkken ok yalnız .kzk-tiles'ta döner; 'cards' galerisinde de dönsün */ .bvk-t-twitch-chat-overlay .kzk-cards.is-open>.kzk-more-btn svg{transform:rotate(180deg)} /* Görünümü dene: önizleme ekranda değilken kartın yanında büyütülmüş canlı önizleme (kart içinde absolute; gömülüde güvenli) */ .bvk-t-twitch-chat-overlay .tco-peek{position:absolute;z-index:6;padding:6px 6px 8px;border-radius:var(--kzk-r-card);background:var(--kzk-card-2);border:1px solid var(--kzk-line-2);box-shadow:0 18px 50px rgba(0,0,0,.5);pointer-events:none} .bvk-t-twitch-chat-overlay .tco-peek[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-peekTh{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:var(--kzk-r-md);overflow:hidden;background:#120f1c} .bvk-t-twitch-chat-overlay .tco-peekName{display:block;margin:7px 4px 0;font:600 12.5px/1.2 var(--kzk-font);color:var(--kzk-text)} @media (prefers-reduced-motion:no-preference){.bvk-t-twitch-chat-overlay .tco-peek:not([hidden]){animation:tcoPeek .16s var(--tco-ease)}} @keyframes tcoPeek{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}} html[data-theme=light] .bvk-t-twitch-chat-overlay .tco-peek{box-shadow:0 18px 50px rgba(30,20,60,.25)} /* KİT EKSİĞİ (kzk 1.2.0): 'cards' galerisinde 'Daha fazla' arkasındakiler CSS ile gizlenmiyor */ .bvk-t-twitch-chat-overlay .kzk-cards:not(.is-open)>[data-more]{display:none} .bvk-t-twitch-chat-overlay .kzk-cards>.kzk-more-btn{grid-column:1/-1} .bvk-t-twitch-chat-overlay .tco-looksFoot{display:flex;align-items:center;gap:10px;margin-top:12px} .bvk-t-twitch-chat-overlay .tco-looksFoot>.kzk-hint{flex:1 1 auto;margin:0} .bvk-t-twitch-chat-overlay .tco-looksFoot>.kzk-btn{flex:none;gap:6px} .bvk-t-twitch-chat-overlay .tco-looksFoot>.kzk-btn[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-looksFoot>.kzk-btn.tco-confirm{color:var(--kzk-warn);border-color:color-mix(in srgb,var(--kzk-warn) 50%,transparent)} @container kzkc (max-width:420px){.bvk-t-twitch-chat-overlay .tco-looksTag{display:none}} html[data-theme=light] .bvk-t-twitch-chat-overlay :is(.tco-tiles .kzk-tile-thumb,.tco-looks .kzk-tcard-thumb){background:#2b2541} /* ───────── Düzen ───────── */ /* Ray: uzun çeviriler (Bewegung, Mouvement) sığsın; kalan taşmayı JS yazı boyunu küçülterek giderir */ .bvk-t-twitch-chat-overlay .kzk-railwrap{grid-template-columns:72px minmax(0,1fr)} @container kzk (max-width:599px){.bvk-t-twitch-chat-overlay .kzk-railwrap{grid-template-columns:minmax(0,1fr)} /* KİT EKSİĞİ (kzk 1.2): yatay rayda düğme en az 54 px — 7 sekme 390'da sığmıyordu (son sekme kayıyordu); burada eşit pay */ .bvk-t-twitch-chat-overlay .kzk-rail-btn{flex:1 1 0;min-width:0}} .bvk-t-twitch-chat-overlay .kzk-col-prev>.tco-prev,.bvk-t-twitch-chat-overlay .kzk-col-prev>.tco-looksCard,.bvk-t-twitch-chat-overlay .kzk-col-more>.tco-looksCard{flex:0 0 auto} .bvk-t-twitch-chat-overlay .kzk-num:focus-within{box-shadow:0 0 0 2px var(--kzk-gold);border-color:var(--kzk-gold-line)} /* <860 (telefon, gömülü 770): tek sütun; KİT EKSİĞİ: railwrap mini önizleme kardeşiyle kartı taşırıyordu → kapalı. Seçenek panelleri sabit yükseklikte içeride kayar (sekme değişince sayfa/iframe boyu zıplamasın). */ @container kzk (max-width:859px){ .bvk-t-twitch-chat-overlay .tco-opts>.kzk-railwrap{min-height:0;flex:0 0 auto} .bvk-t-twitch-chat-overlay .tco-opts .kzk-panes{min-height:0!important;height:clamp(420px,62cqw + 200px,640px);overflow:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:var(--kzk-line-2) transparent} .bvk-t-twitch-chat-overlay .tco-opts .kzk-panes.tco-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)} } /* 860–1379: seçenekler | önizleme, seçenekler | dışa aktarma, altta tam genişlik görünümler. ≥1380: seçenekler | önizleme | dışa aktarma, altta görünümler. Seçenek kartı ızgarayı uzatmaz (contain:size). */ @container kzk (min-width:860px){ .bvk-t-twitch-chat-overlay .kzk-ws.kzk-ws--rail{grid-template-columns:minmax(360px,392px) minmax(0,1fr);grid-template-areas:"opts prev" "opts exp" "more more";grid-template-rows:auto 1fr auto} .bvk-t-twitch-chat-overlay .kzk-col-opts{contain:size;min-height:660px} .bvk-t-twitch-chat-overlay .kzk-col-opts>.tco-opts{flex:1 1 auto;min-height:0;height:100%} .bvk-t-twitch-chat-overlay .tco-opts>.kzk-railwrap{min-height:0;height:100%;grid-template-rows:minmax(0,1fr)} .bvk-t-twitch-chat-overlay .tco-opts .kzk-panes{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--kzk-line-2) transparent} .bvk-t-twitch-chat-overlay .tco-opts .kzk-panes.tco-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent)} .bvk-t-twitch-chat-overlay .kzk-col-more{align-self:start} .bvk-t-twitch-chat-overlay .kzk-col-exp{align-self:stretch} .bvk-t-twitch-chat-overlay .kzk-col-exp>.tco-exp{flex:1 1 auto} } @container kzk (min-width:1380px){ .bvk-t-twitch-chat-overlay .kzk-ws.kzk-ws--rail{grid-template-columns:minmax(372px,404px) minmax(0,1fr) minmax(262px,292px);grid-template-areas:"opts prev exp" "opts more more";grid-template-rows:auto 1fr} } /* Hareket azaltılmış: önizlemede animasyon yok (OBS görünümü bu sorguyu taşımaz) */ @media (prefers-reduced-motion:reduce){ .bvk-t-twitch-chat-overlay .cb-box *,.bvk-t-twitch-chat-overlay .cb-box *::before{animation-duration:.01ms!important;animation-iteration-count:1!important} .bvk-t-twitch-chat-overlay .cb-list{transition:none!important} } .bvk-t-twitch-chat-overlay .tco-chanErr{margin:-4px 0 10px} .bvk-t-twitch-chat-overlay .tco-chanErr[hidden]{display:none} .bvk-t-twitch-chat-overlay .tco-badgeDemo:not([hidden])+.tco-inl{margin-top:12px} .bvk-t-twitch-chat-overlay .tco-nm--txt{filter:drop-shadow(0 0 .6px rgba(20,16,40,.75))}