/* ==========================================================================
   WHITOO SAHNE — 2026-08-28
   Ses yarismasi sahne ekraninin rol tabanli yerlesimi.

   NEDEN AYRI DOSYA: sahne kurallari index.css icinde 2319. satirdan itibaren
   182 kural halinde duruyor. Oraya yazmak cakisma ve geri donusu zor bir yama
   demekti. Butun yeni kurallar `.wsx` koku altinda; tek sinif oncelikli eski
   kurallari (0,1,0) iki sinifla (0,2,0) gecerler, !important gerekmez.

   ROLLER: data-role="host|jury|star|crowd"
   FAZLAR: data-phase="idle|ready|announce|perform|score|done"
   RAY:    data-rail="chat|console"     (JS koyar)
   ========================================================================== */

.wsx {
    /* rol renkleri — ikisi sayfada zaten vardi (gul + turkuaz), ikisi yeni */
    --wsx-host:  #f43f5e;   /* sunucu     */
    --wsx-star:  #ffc861;   /* yarismaci  */
    --wsx-jury:  #b79bff;   /* juri       */
    --wsx-crowd: #18c7b8;   /* izleyici   */

    --wsx-host-s:  rgba(244, 63, 94, .14);
    --wsx-star-s:  rgba(255, 200, 97, .14);
    --wsx-jury-s:  rgba(183, 155, 255, .14);
    --wsx-crowd-s: rgba(24, 199, 184, .14);

    --wsx-ground: rgba(4, 11, 20, .98);
    --wsx-panel:  rgba(9, 17, 31, .92);
    --wsx-sunk:   rgba(3, 8, 16, .72);
    --wsx-edge:   rgba(148, 175, 210, .14);
    --wsx-edge-2: rgba(148, 175, 210, .07);
    --wsx-ink:    #eaf2ff;
    --wsx-ink-2:  #a9bcd6;
    --wsx-dim:    #7b8ca6;

    --wsx-rail: 288px;
    --wsx-gap: 14px;
    --wsx-r: 16px;
}

/* ==========================================================================
   1) KABUK — main | ray(sohbet/konsol)
   ========================================================================== */

.wsx .wsx-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wsx-rail);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "main tabs"
        "main rail";
    gap: var(--wsx-gap);
    align-items: start;
}

.wsx .woo-stage-main  { grid-area: main; min-width: 0; }
.wsx .wsx-rail-tabs   { grid-area: tabs; }
.wsx .woo-stage-side  { grid-area: rail; min-width: 0; }
.wsx .wsx-chat        { grid-area: rail; min-width: 0; }

/* ray sekmeleri (JS basar) */
.wsx .wsx-rail-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--wsx-edge);
    border-radius: 12px;
    background: var(--wsx-sunk);
}

.wsx .wsx-rail-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wsx-dim);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.wsx .wsx-rail-tabs button:hover { color: var(--wsx-ink-2); }

.wsx .wsx-rail-tabs button[aria-selected="true"] {
    background: var(--wsx-panel);
    color: var(--wsx-ink);
    box-shadow: inset 0 0 0 1px var(--wsx-edge);
}

.wsx .wsx-rail-tabs button i { font-size: 14px; }

/* sekme secimi: ayni hucrede duran iki panelden birini gizler */
.wsx[data-rail="chat"]    .woo-stage-side { display: none; }
.wsx[data-rail="console"] .wsx-chat       { display: none; }

/* konsolu olmayan rolde sekme cubugu hic cizilmez (JS karar verir) */
.wsx .wsx-rail-tabs[hidden] { display: none; }

/* ==========================================================================
   2) FAZ SERIDI
   ========================================================================== */

.wsx .wsx-phases {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 var(--wsx-gap);
    padding: 5px;
    border: 1px solid var(--wsx-edge);
    border-radius: 13px;
    background: var(--wsx-sunk);
}

.wsx .wsx-phases span {
    display: grid;
    place-items: center;
    padding: 8px 6px;
    border-radius: 8px;
    background: transparent;
    transition: background .2s ease, color .2s ease;
}

.wsx .wsx-phases b {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wsx-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color .2s ease;
}

/* gecilmis fazlar soluk-beyaz, siradaki gri, gecerli faz renkli */
.wsx .wsx-phases span.is-past b { color: var(--wsx-ink-2); }

.wsx .wsx-phases span.is-now {
    background: var(--wsx-star-s);
    box-shadow: inset 0 0 0 1px rgba(255, 200, 97, .32);
}

.wsx .wsx-phases span.is-now b { color: var(--wsx-star); }

/* ==========================================================================
   3) SAHNE ALANI — yarismaci karti tek basina, tam genislik
   ========================================================================== */

.wsx .woo-stage-layout {
    display: block;          /* eski 1.35fr / .65fr ikili izgara kalkti */
}

.wsx .woo-stage-contestant {
    position: relative;
    width: 100%;
    min-height: min(58vh, 560px);
    padding: 22px 24px;
    border-radius: var(--wsx-r);
    overflow: hidden;
}

/* isik huzmesi: ustten inen sicak parilti, cok yavas nefes alir */
.wsx .woo-stage-light {
    position: absolute;
    left: 14%;
    right: 14%;
    top: -34%;
    height: 68%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 100%,
                rgba(255, 200, 97, .20), rgba(255, 200, 97, .06) 46%, transparent 72%);
    filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}

.wsx[data-phase="perform"] .woo-stage-light,
.wsx[data-phase="announce"] .woo-stage-light {
    opacity: 1;
    animation: wsx-breathe 6.5s ease-in-out infinite;
}

@keyframes wsx-breathe {
    0%, 100% { opacity: .78; transform: scaleX(1); }
    50%      { opacity: 1;   transform: scaleX(1.05); }
}

/* --- sayac halkasi (sag ust) --- */
.wsx .wsx-ring {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
}

.wsx .wsx-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wsx .wsx-ring circle {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
}

.wsx .wsx-ring-bg { stroke: rgba(148, 175, 210, .18); }

.wsx .wsx-ring-fg {
    stroke: var(--wsx-star);
    stroke-dasharray: 119.4;   /* 2*pi*19 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .95s linear, stroke .3s ease;
}

.wsx .wsx-ring b {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--wsx-ink);
    letter-spacing: -.01em;
}

/* son 10 saniye: halka kizarir, kart kenari nabiz atar */
.wsx .wsx-ring.is-urgent .wsx-ring-fg { stroke: var(--wsx-host); }
.wsx .wsx-ring.is-urgent b { color: var(--wsx-host); }

.wsx .woo-stage-contestant.is-urgent {
    animation: wsx-pulse 1s ease-in-out infinite;
}

@keyframes wsx-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .30), inset 0 -120px 90px rgba(2, 6, 23, .58); }
    50%      { box-shadow: inset 0 0 0 2px rgba(244, 63, 94, .70), inset 0 -120px 90px rgba(2, 6, 23, .58); }
}

/* --- alkis olceri (sol kenar) --- */
.wsx .wsx-applause {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 4;
    width: 5px;
    height: 130px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(148, 175, 210, .13);
    overflow: hidden;
}

.wsx .wsx-applause i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    border-radius: 999px;
    background: linear-gradient(0deg, var(--wsx-crowd), var(--wsx-star));
    transition: height .45s cubic-bezier(.2, .8, .3, 1);
}

/* --- canli dalga formu (alt kenar) --- */
.wsx .wsx-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 48px;
    opacity: .85;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
    mask-image: linear-gradient(180deg, transparent, #000 60%);
}

/* --- suzulen tepkiler --- */
.wsx .wsx-reactions {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.wsx .wsx-reactions span {
    position: absolute;
    bottom: 8%;
    font-size: 22px;
    line-height: 1;
    opacity: 0;
    animation: wsx-float 2.6s cubic-bezier(.25, .6, .3, 1) forwards;
    will-change: transform, opacity;
}

@keyframes wsx-float {
    0%   { opacity: 0;   transform: translateY(0) scale(.6); }
    12%  { opacity: 1;   transform: translateY(-18px) scale(1.1); }
    72%  { opacity: .85; }
    100% { opacity: 0;   transform: translateY(-210px) scale(.9); }
}

/* --- isim levhasi --- */
.wsx .woo-stage-contestant [data-stage-active-name] {
    position: relative;
    z-index: 4;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--wsx-ink);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}

.wsx .woo-stage-contestant [data-stage-media-status] {
    position: relative;
    z-index: 4;
    color: var(--wsx-ink-2);
}

.wsx .woo-stage-contestant > i.ti-microphone-2 {
    position: relative;
    z-index: 4;
    color: var(--wsx-star);
    opacity: .9;
}

.wsx .woo-stage-contestant video { border-radius: var(--wsx-r); }

/* medya kontrolleri tek satir, kartin altinda */
.wsx .woo-stage-media-controls {
    position: relative;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

/* ==========================================================================
   4) JURI SERIDI — sahnenin altinda yatay, sayisi degiskenden gelir
   ========================================================================== */

.wsx .woo-stage-jury-wall {
    display: grid;
    grid-template-columns: repeat(var(--jury-n, 3), minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.wsx .woo-stage-jury-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 11px;
    min-height: 0;
    padding: 12px 14px;
    border: 1px solid var(--wsx-edge);
    border-radius: 13px;
    background: var(--wsx-panel);
    overflow: hidden;
}

.wsx .woo-stage-jury-tile > i {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--wsx-jury-s);
    color: var(--wsx-jury);
    font-size: 17px;
}

.wsx .woo-stage-jury-tile strong {
    grid-column: 2;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--wsx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsx .woo-stage-jury-tile > span {
    grid-column: 2;
    font-size: 11px;
    color: var(--wsx-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsx .woo-stage-jury-tile video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

.wsx .woo-stage-jury-tile video:not([hidden]) ~ * { position: relative; z-index: 2; }

.wsx .woo-stage-jury-tile.is-empty {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    border-style: dashed;
    opacity: .6;
}

.wsx .woo-stage-jury-tile.is-empty > i { grid-row: auto; }

/* juri kendi karosunu hemen bulsun: bir tik parlak, mor kenar */
.wsx .woo-stage-jury-tile.is-me {
    border-color: rgba(183, 155, 255, .5);
    background: linear-gradient(180deg, var(--wsx-jury-s), var(--wsx-panel));
}

/* muhurleme durumu */
.wsx .woo-stage-jury-tile[data-sealed="1"]::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wsx-jury);
    box-shadow: 0 0 0 3px rgba(183, 155, 255, .2);
}

.wsx .woo-stage-jury-tile .woo-stage-jury-controls {
    grid-column: 1 / -1;
    margin-top: 9px;
}

/* ==========================================================================
   5) SOHBET RAYI
   ========================================================================== */

.wsx .wsx-chat {
    display: grid;
    align-content: start;
    min-height: 0;
}

.wsx .wsx-chat .woo-stage-chat {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    height: min(72vh, 720px);
    margin: 0;
    padding: 14px;
    border: 1px solid var(--wsx-edge);
    border-radius: var(--wsx-r);
    background: var(--wsx-panel);
}

.wsx .wsx-chat [data-stage-chat-list] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.wsx .wsx-chat [data-stage-chat-list] p {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--wsx-ink-2);
    word-break: break-word;
}

.wsx .wsx-chat [data-stage-chat-list] p b {
    margin-right: 5px;
    font-weight: 600;
    color: var(--wsx-crowd);
}

.wsx .wsx-chat [data-stage-chat-list] p span { color: var(--wsx-ink-2); }

/* rol renkleri + jurinin/sunucunun mesaji akista kaybolmaz */
.wsx .wsx-chat [data-stage-chat-list] p[data-chat-role="jury"] {
    padding-left: 9px;
    border-left: 2px solid var(--wsx-jury);
}
.wsx .wsx-chat [data-stage-chat-list] p[data-chat-role="jury"] b { color: var(--wsx-jury); }

.wsx .wsx-chat [data-stage-chat-list] p[data-chat-role="host"] {
    padding-left: 9px;
    border-left: 2px solid var(--wsx-host);
}
.wsx .wsx-chat [data-stage-chat-list] p[data-chat-role="host"] b { color: var(--wsx-host); }

.wsx .wsx-chat [data-stage-chat-list] p[data-chat-role="star"] b { color: var(--wsx-star); }

/* sistem satirlari — gecenin ritmi sohbetten okunur */
.wsx .wsx-chat [data-stage-chat-list] p.wsx-sys {
    padding-left: 0;
    border: 0;
    font-size: 11px;
    font-style: normal;
    letter-spacing: .02em;
    color: var(--wsx-dim);
    opacity: .85;
}

.wsx .wsx-chat [data-stage-chat-list] p.wsx-sys b { display: none; }

/* sikayet bayragi yalniz uzerine gelince — akis temiz kalir */
.wsx .wsx-chat [data-stage-chat-list] p [data-stage-report-open] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1px 4px;
    border: 0;
    border-radius: 5px;
    background: var(--wsx-sunk);
    color: var(--wsx-dim);
    font-size: 11px;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, color .15s ease;
}

.wsx .wsx-chat [data-stage-chat-list] p:hover [data-stage-report-open],
.wsx .wsx-chat [data-stage-chat-list] p:focus-within [data-stage-report-open] {
    opacity: 1;
    pointer-events: auto;
}

.wsx .wsx-chat [data-stage-chat-list] p [data-stage-report-open]:hover { color: var(--wsx-host); }

@media (hover: none) {
    .wsx .wsx-chat [data-stage-chat-list] p [data-stage-report-open] {
        opacity: .55;
        pointer-events: auto;
    }
}

.wsx .wsx-chat [data-stage-chat-form] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

/* ==========================================================================
   6) TEPKI CUBUGU (JS basar) — alkis ve oy
   ========================================================================== */

.wsx .wsx-crowd-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.wsx .wsx-crowd-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 12px;
    border: 1px solid var(--wsx-edge);
    border-radius: 12px;
    background: var(--wsx-panel);
    color: var(--wsx-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, transform .12s ease;
}

.wsx .wsx-crowd-bar button:hover {
    border-color: rgba(24, 199, 184, .45);
    color: var(--wsx-ink);
}

.wsx .wsx-crowd-bar button:active { transform: scale(.97); }

.wsx .wsx-crowd-bar button i { font-size: 16px; color: var(--wsx-crowd); }

.wsx .wsx-crowd-bar button[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   7) KONSOL (yan panel) — ayarlar penceresi disinda kalan listeler
   ========================================================================== */

.wsx .woo-stage-side {
    display: grid;
    gap: 10px;
    align-content: start;
    max-height: min(72vh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.wsx .woo-stage-side .woo-stage-list { margin: 0; }

/* ==========================================================================
   8) ROL FARKLARI
   ========================================================================== */

/* --- izleyici: konsol yok, sahne + sohbet --- */
.wsx[data-role="crowd"] .woo-stage-director { display: none; }

/* --- yarismaci sahnedeyken: ekran sadelesir --- */
.wsx[data-role="star"][data-phase="perform"] { --wsx-rail: 232px; }

.wsx[data-role="star"][data-phase="perform"] .woo-stage-jury-wall { opacity: .72; }

/* --- juri: kendi karosu one cikar --- */
.wsx[data-role="jury"] .woo-stage-jury-tile.is-me { order: -1; }

/* --- sunucu: yonetmen seridi sahnenin hemen altinda --- */
.wsx[data-role="host"] .woo-stage-host-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

.wsx[data-role="host"] .woo-stage-host-actions form { margin: 0; }

.wsx[data-role="host"] .woo-stage-host-actions button { width: 100%; }

/* ==========================================================================
   9) PUANLAMA CEKMECESI
   ========================================================================== */

.wsx .woo-stage-score {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(183, 155, 255, .32);
    border-radius: var(--wsx-r);
    background: linear-gradient(180deg, var(--wsx-jury-s), var(--wsx-panel));
}

.wsx .woo-stage-score[hidden] { display: none; }

.wsx .woo-stage-score-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wsx .woo-stage-score-head strong { font-variant-numeric: tabular-nums; color: var(--wsx-jury); }

.wsx .woo-stage-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.wsx .woo-stage-score label {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--wsx-edge-2);
    border-radius: 11px;
    background: var(--wsx-sunk);
}

.wsx .woo-stage-score label > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wsx-ink-2);
}

.wsx .woo-stage-score label > span b {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--wsx-jury);
}

.wsx .woo-stage-score input[type="range"] { width: 100%; accent-color: var(--wsx-jury); }

.wsx .woo-stage-score button[type="submit"] {
    justify-self: stretch;
    background: var(--wsx-jury);
    border-color: var(--wsx-jury);
    color: #17102b;
    font-weight: 700;
}

/* ==========================================================================
   9b) HAZIRLIK PANELI — ses provasi
   ========================================================================== */

.wsx .wsx-prep {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 200, 97, .30);
    border-radius: var(--wsx-r);
    background: linear-gradient(180deg, var(--wsx-star-s), var(--wsx-panel));
}

.wsx .wsx-prep > header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.wsx .wsx-prep > header > i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--wsx-star-s);
    color: var(--wsx-star);
    font-size: 18px;
}

.wsx .wsx-prep > header strong {
    display: block;
    font-size: 15px;
    color: var(--wsx-ink);
}

.wsx .wsx-prep > header span {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--wsx-ink-2);
}

.wsx .wsx-prep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.wsx .wsx-prep-card {
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--wsx-edge);
    border-radius: 12px;
    background: var(--wsx-sunk);
}

.wsx .wsx-prep-card > b {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wsx-dim);
}

.wsx .wsx-prep-card small {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--wsx-dim);
}

.wsx .wsx-prep-card button,
.wsx .wsx-prep-card select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--wsx-edge);
    border-radius: 9px;
    background: var(--wsx-panel);
    color: var(--wsx-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.wsx .wsx-prep-card select { text-align: left; }

.wsx .wsx-prep-card button:hover { border-color: rgba(255, 200, 97, .5); }

.wsx .wsx-prep-meter {
    height: 7px;
    border-radius: 999px;
    background: rgba(148, 175, 210, .14);
    overflow: hidden;
}

.wsx .wsx-prep-meter i {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wsx-crowd), var(--wsx-star) 72%, var(--wsx-host));
    transition: width .1s linear;
}

.wsx .wsx-prep-check { cursor: pointer; }

.wsx .wsx-prep-check > span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--wsx-ink);
}

.wsx .wsx-prep-check input { width: 17px; height: 17px; accent-color: var(--wsx-star); }

.wsx .wsx-prep-go {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 0;
    border-radius: 11px;
    background: var(--wsx-star);
    color: #2a1c00;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.wsx .wsx-prep-go[disabled] {
    background: var(--wsx-sunk);
    color: var(--wsx-dim);
    box-shadow: inset 0 0 0 1px var(--wsx-edge);
    cursor: not-allowed;
}

.wsx .wsx-prep[data-done="1"] { border-color: rgba(24, 199, 184, .4); }
.wsx .wsx-prep[data-done="1"] .wsx-prep-go { background: var(--wsx-crowd); color: #04231f; }

/* --- muhurlu puan ve oy cipi (yarismaci listesi) --- */
.wsx [data-stage-contestant-list] small[data-wsx-sealed] {
    color: var(--wsx-jury);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* muhurlu iken "1/3" yazar — kac juri verdi, puanin kendisi degil */
.wsx [data-stage-contestant-list] small[data-wsx-sealed] {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--wsx-jury-s);
}

.wsx .wsx-vote-chip {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--wsx-crowd-s);
    color: var(--wsx-crowd);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   10) MOBIL — sahne yapiskan, alti sekmeli
   ========================================================================== */

@media (max-width: 1100px) {
    .wsx { --wsx-rail: 260px; }
    .wsx .woo-stage-contestant { min-height: min(50vh, 440px); }
}

@media (max-width: 900px) {
    .wsx .wsx-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "main"
            "tabs"
            "rail";
    }

    .wsx .wsx-chat .woo-stage-chat,
    .wsx .woo-stage-side { height: auto; max-height: 58vh; }

    .wsx .woo-stage-jury-wall {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .wsx .wsx-phases {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }
}

@media (max-width: 640px) {
    .wsx .woo-stage-contestant {
        min-height: 0;
        aspect-ratio: 16 / 10;
        padding: 16px;
    }

    /* sahne hicbir zaman ekrandan cikmaz */
    .wsx .woo-stage-layout {
        position: sticky;
        top: 62px;
        z-index: 30;
    }

    .wsx .wsx-ring { width: 50px; height: 50px; top: 12px; right: 12px; }
    .wsx .wsx-ring b { font-size: 11px; }
    .wsx .wsx-applause { height: 84px; left: 10px; }
    .wsx .wsx-wave { height: 34px; }

    .wsx .wsx-phases b { font-size: 9.5px; letter-spacing: .06em; }
    .wsx .woo-stage-jury-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wsx .woo-stage-jury-tile { padding: 10px; }
    .wsx .woo-stage-jury-tile > i { width: 28px; height: 28px; font-size: 14px; }
    .wsx .woo-stage-jury-tile strong { font-size: 12px; }
}

/* ==========================================================================
   11) ERISILEBILIRLIK
   ========================================================================== */

.wsx :focus-visible {
    outline: 2px solid var(--wsx-star);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .wsx .woo-stage-light,
    .wsx .woo-stage-contestant.is-urgent,
    .wsx .wsx-reactions span {
        animation: none !important;
    }
    .wsx .wsx-ring-fg { transition: none; }
    .wsx .wsx-reactions span { opacity: 0; }
}

/* ses provasini tamamlayan yarismaci — sunucu listede gorur */
.wsx .wsx-ready-chip {
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--wsx-crowd-s);
    color: var(--wsx-crowd);
    font-size: 10.5px;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ==========================================================================
   12) AYARLAR PENCERESI
   Ayarlar canli ekrandan cikti. <details> ogesi korundu; acildiginda CSS onu
   ortalanmis bir pencereye cevirir. Ek JS yok, klavye erisimi <summary>
   uzerinden zaten calisiyor (Enter acar, Esc yok — kapatmak icin tekrar Enter).
   ========================================================================== */

.wsx .woo-stage-control.wsx-modal > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid var(--wsx-edge);
    border-radius: 12px;
    background: var(--wsx-panel);
    color: var(--wsx-ink-2);
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.wsx .woo-stage-control.wsx-modal > summary::-webkit-details-marker { display: none; }
.wsx .woo-stage-control.wsx-modal > summary::marker { content: ""; }
.wsx .woo-stage-control.wsx-modal > summary:hover { border-color: rgba(244, 63, 94, .45); color: var(--wsx-ink); }

/* --- acikken: tam ekran perde + ortada panel --- */
/* Sutun ACIKCA verilir. Tanimsiz birakilirsa auto sutun icerik genisligine
   duser ve panel hem daralir hem ortalanmaz — olculdu, oyle oldu. */
.wsx .woo-stage-control.wsx-modal[open] {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    grid-template-columns: min(480px, calc(100vw - 48px));
    justify-content: center;
    align-content: center;
    gap: 12px;
    padding: 24px;
    background: rgba(3, 8, 16, .74);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    overflow-y: auto;
}

/* acikken summary sag ustte kapatma dugmesi olur */
.wsx .woo-stage-control.wsx-modal[open] > summary {
    justify-self: end;
    align-self: start;
    position: fixed;
    top: 18px;
    right: 18px;
    border-color: rgba(244, 63, 94, .4);
    color: var(--wsx-host);
}

.wsx .woo-stage-control.wsx-modal[open] > summary::after {
    content: "\00d7";
    margin-left: 4px;
    font-size: 17px;
    line-height: 1;
}

.wsx .wsx-modal-body {
    display: none;
    width: 100%;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 22px 24px;
    border: 1px solid var(--wsx-edge);
    border-radius: var(--wsx-r);
    background: var(--wsx-ground);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .55);
}

.wsx .woo-stage-control.wsx-modal[open] .wsx-modal-body {
    display: grid;
    gap: 14px;
}

.wsx .wsx-modal-hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--wsx-dim);
}

.wsx .wsx-modal-body form { display: grid; gap: 10px; margin: 0; }

.wsx .wsx-modal-body .woo-stage-jury-add {
    padding-top: 14px;
    border-top: 1px solid var(--wsx-edge-2);
}

/* ==========================================================================
   13) PUAN ACILISI
   Muhur kalktigi an puan doner. Gecenin tasiyici ani bu.
   ========================================================================== */

@keyframes wsx-reveal {
    0%   { transform: rotateX(90deg) scale(.9); opacity: 0; }
    55%  { transform: rotateX(-12deg) scale(1.08); opacity: 1; }
    100% { transform: rotateX(0) scale(1); opacity: 1; }
}

.wsx [data-stage-contestant-list] small.is-revealing {
    display: inline-block;
    transform-origin: center;
    animation: wsx-reveal .85s cubic-bezier(.2, .75, .3, 1);
    color: var(--wsx-star);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .wsx [data-stage-contestant-list] small.is-revealing { animation: none; }
}

/* ==========================================================================
   14) YONETMEN SERIDI — sahnenin hemen altinda
   Canli yayinda sunucunun sekme degistirmesi gerekmez.
   ========================================================================== */

.wsx .wsx-director {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.wsx .wsx-director:empty { display: none; }

.wsx .wsx-director form { display: contents; }

.wsx .wsx-director button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(244, 63, 94, .38);
    border-radius: 12px;
    background: var(--wsx-host-s);
    color: var(--wsx-host);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, transform .12s ease;
}

.wsx .wsx-director button:hover { background: rgba(244, 63, 94, .22); }
.wsx .wsx-director button:active { transform: scale(.985); }
.wsx .wsx-director button i { font-size: 17px; }

/* ==========================================================================
   15) JURI PUANLAMA CEKMECESI — alttan yukselir
   Gosteri onu bekliyor; yirmi saniyede doldurulabilmeli, o yuzden ekranin
   altina sabitlenir ve kaydirma gerektirmez.
   ========================================================================== */

@media (min-width: 901px) {
    .wsx[data-role="jury"] .woo-stage-score:not([hidden]) {
        position: fixed;
        left: 50%;
        bottom: 16px;
        z-index: 2147481000;
        width: min(880px, calc(100vw - 40px));
        margin: 0;
        transform: translateX(-50%);
        box-shadow: 0 -8px 60px rgba(0, 0, 0, .5);
        animation: wsx-drawer .32s cubic-bezier(.2, .8, .3, 1);
    }

    /* cekmece acikken sayfanin alti kapanmasin */
    .wsx[data-role="jury"] .wsx-shell { padding-bottom: 220px; }
}

@keyframes wsx-drawer {
    from { transform: translate(-50%, 26px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wsx[data-role="jury"] .woo-stage-score:not([hidden]) { animation: none; }
}

/* ==========================================================================
   16) SIRALAMA — 2026-08-29
   Sahnede sonuc HIC gosterilmiyordu: juri puan veriyor, kimse kimin onde
   oldugunu bilmiyordu. Siralama sag raya, sohbetin ustune kondu.
   ========================================================================== */

.wsx .wsx-shell {
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
        "main tabs"
        "main sira"
        "main rail";
}

.wsx .wsx-standings { grid-area: sira; min-width: 0; }

.wsx .wsx-standings {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--wsx-edge);
    border-radius: var(--wsx-r);
    background: var(--wsx-panel);
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wsx .wsx-standings > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.wsx .wsx-standings > header strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--wsx-ink);
}

.wsx .wsx-round {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--wsx-star-s);
    color: var(--wsx-star);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.wsx .wsx-round.is-done { background: var(--wsx-crowd-s); color: var(--wsx-crowd); }

/* --- sira listesi --- */
.wsx .wsx-rank-list {
    list-style: none;
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.wsx .wsx-rank-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 9px;
    background: var(--wsx-sunk);
}

.wsx .wsx-rank-no {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(148, 175, 210, .1);
    color: var(--wsx-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.wsx .wsx-rank-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--wsx-ink-2);
}

.wsx .wsx-rank-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.wsx .wsx-rank-detail em {
    font-style: normal;
    color: var(--wsx-jury);
}

.wsx .wsx-rank-detail em.is-empty { color: var(--wsx-faint); }

.wsx .wsx-rank-detail i {
    font-style: normal;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--wsx-crowd-s);
    color: var(--wsx-crowd);
}

.wsx .wsx-rank-final {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--wsx-ink);
}

/* sahnedeki, elenen ve kazanan */
.wsx .wsx-rank-list li.is-live {
    background: linear-gradient(90deg, var(--wsx-star-s), var(--wsx-sunk));
    box-shadow: inset 2px 0 0 var(--wsx-star);
}

.wsx .wsx-rank-list li.is-out { opacity: .45; }
.wsx .wsx-rank-list li.is-out .wsx-rank-name { text-decoration: line-through; }

.wsx .wsx-rank-list li.is-winner {
    background: linear-gradient(90deg, rgba(255, 200, 97, .2), var(--wsx-sunk));
    box-shadow: inset 0 0 0 1px rgba(255, 200, 97, .4);
}

.wsx .wsx-rank-list li.is-winner .wsx-rank-no {
    background: var(--wsx-star);
    color: #2a1c00;
    font-weight: 800;
}

.wsx .wsx-rank-empty {
    grid-template-columns: 1fr !important;
    color: var(--wsx-dim);
    font-size: 12px;
    text-align: center;
}

.wsx .wsx-rank-note {
    margin: 0;
    color: var(--wsx-dim);
    font-size: 10.5px;
    line-height: 1.45;
}

/* --- tur kontrolleri (sunucu/moderator) --- */
.wsx .wsx-round-actions {
    display: grid;
    gap: 7px;
    padding-top: 9px;
    border-top: 1px solid var(--wsx-edge-2);
}

.wsx .wsx-round-actions form { margin: 0; }

.wsx .wsx-round-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--wsx-edge);
    border-radius: 10px;
    background: var(--wsx-sunk);
    color: var(--wsx-ink-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.wsx .wsx-round-actions button:hover { border-color: rgba(255, 200, 97, .45); color: var(--wsx-star); }

.wsx .wsx-round-actions button.is-finish {
    border-color: rgba(255, 200, 97, .4);
    background: var(--wsx-star-s);
    color: var(--wsx-star);
}

@media (max-width: 900px) {
    .wsx .wsx-shell {
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "main" "tabs" "sira" "rail";
    }
    .wsx .wsx-standings { max-height: none; }
}

/* muhurlu satir: puan yerine kac juri verdigi ve nokta gosterilir */
.wsx .wsx-rank-detail em.is-sealed {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--wsx-jury-s);
    color: var(--wsx-jury);
}

.wsx .wsx-rank-final .is-locked {
    color: var(--wsx-jury);
    letter-spacing: 1px;
}

/* ==========================================================================
   17) DUZELTMELER — 2026-08-29
   Bildirilen sorunlar:
     a) Juri karolari "ince uzun" duruyordu: --jury-n 1 iken tek karo 1122px
        genislikte 60px yuksekliginde bir serit oluyordu; kamera acilinca
        goruntu eziliyordu.
     b) Alkis/tepki simgeleri sahnenin ORTASINDAN cikiyordu.
   ========================================================================== */

/* --- (a) juri seridi: karo genisligi sinirli, az kisiyken ortalanir --- */
.wsx .woo-stage-jury-wall {
    grid-template-columns: repeat(var(--jury-n, 3), minmax(0, 260px));
    justify-content: center;
}

/* juri karosu artik kartvizit gibi: ikon + isim ustte, alani sabit */
.wsx .woo-stage-jury-tile {
    min-height: 62px;
}

/* kamera/ekran acikken karo 16:9 olur, goruntu ezilmez */
.wsx .woo-stage-jury-tile:has(video:not([hidden])) {
    aspect-ratio: 16 / 9;
    min-height: 132px;
    align-content: end;
    padding-bottom: 10px;
}

.wsx .woo-stage-jury-tile:has(video:not([hidden])) > i { display: none; }

.wsx .woo-stage-jury-tile:has(video:not([hidden])) strong,
.wsx .woo-stage-jury-tile:has(video:not([hidden])) > span {
    grid-column: 1 / -1;
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

/* :has desteklemeyen tarayicida en azindan makul bir taban */
@supports not selector(:has(video)) {
    .wsx .woo-stage-jury-tile { min-height: 62px; }
}

/* cok juri varken sar, tasma olmasin */
@media (max-width: 1100px) {
    .wsx .woo-stage-jury-wall {
        grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
    }
}

/* --- (b) tepkiler KOSEDEN cikar --- */
.wsx .wsx-reactions span {
    bottom: 10%;
    left: auto;
    right: 5%;
    font-size: 24px;
    animation: wsx-float-corner 2.8s cubic-bezier(.25, .6, .3, 1) forwards;
}

@keyframes wsx-float-corner {
    0%   { opacity: 0;   transform: translate(0, 0) scale(.6); }
    12%  { opacity: 1;   transform: translate(-6px, -22px) scale(1.12); }
    70%  { opacity: .8;  transform: translate(-26px, -150px) scale(1); }
    100% { opacity: 0;   transform: translate(-14px, -240px) scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
    .wsx .wsx-reactions span { animation: none; opacity: 0; }
}

/* --- alkis cubugu goze carpsin --- */
.wsx .wsx-crowd-bar button {
    min-height: 46px;
    font-size: 13.5px;
}

.wsx .wsx-crowd-bar button[data-wsx-clap] {
    border-color: rgba(24, 199, 184, .34);
    background: linear-gradient(180deg, var(--wsx-crowd-s), var(--wsx-panel));
}

/* tepkiler koseden cikar; her biri hafif farkli yatay sapmayla (JS --wsx-sapma verir) */
.wsx .wsx-reactions span {
    right: calc(5% + var(--wsx-sapma, 0px));
}

/* oy verilmis durumu */
.wsx .wsx-crowd-bar button.is-voted {
    border-color: rgba(24, 199, 184, .5);
    background: var(--wsx-crowd-s);
    color: var(--wsx-crowd);
}

.wsx .wsx-crowd-bar button[hidden] { display: none; }

/* ==========================================================================
   DURAKLATMA — 2026-08-29
   Sayacin durmasi tek basina yetmez: duran sayac "yayin bozuldu mu"
   izlenimi verir. Bu yuzden duraklama KENDI rengiyle (kehribar) konusur:
   sahnede perde, halkada donmus yay, seritte sebep ve kalan hak.
   Kehribar bilerek secildi — kirmizi hata, yesil "her sey yolunda" der;
   duraklama ikisi de degil, bekleyen bir ara.
   ========================================================================== */

.wsx {
    --wsx-pause:   #f5b544;
    --wsx-pause-s: rgba(245, 181, 68, .13);
}

/* --- sahne kartindaki perde --- */
.wsx .wsx-pause-veil {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(245, 181, 68, .10), transparent 62%),
        rgba(3, 8, 16, .74);
    backdrop-filter: blur(2px);
}

.wsx .wsx-pause-veil[hidden] { display: none; }

.wsx .wsx-pause-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(245, 181, 68, .42);
    background: var(--wsx-pause-s);
    color: var(--wsx-pause);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .10em;
}

.wsx .wsx-pause-veil b {
    max-width: 34ch;
    color: var(--wsx-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}

.wsx .wsx-pause-veil small {
    color: var(--wsx-ink-2);
    font-size: 11.5px;
}

/* durakliyken halka kehribara doner ve nabiz atmayi birakir */
.wsx.is-paused .wsx-ring-fg {
    stroke: var(--wsx-pause);
    transition: none;               /* donmus yay: yumusak gecis yaniltir */
}

.wsx.is-paused .wsx-ring b { color: var(--wsx-pause); }
.wsx.is-paused .woo-stage-contestant { animation: none; }
.wsx.is-paused .wsx-wave,
.wsx.is-paused .wsx-meter { opacity: .35; }

/* --- yetkili serit --- */
.wsx .wsx-pause-bar {
    display: grid;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--wsx-edge);
    background: var(--wsx-panel);
}

.wsx .wsx-pause-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wsx .wsx-pause-actions form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.wsx .wsx-pause-actions form[hidden] { display: none; }

.wsx .wsx-pause-actions select {
    height: 34px;
    max-width: 190px;
    padding: 0 8px;
    border-radius: 9px;
    border: 1px solid var(--wsx-edge);
    background: var(--wsx-sunk);
    color: var(--wsx-ink);
    font-size: 12.5px;
}

.wsx .wsx-pause-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border-radius: 9px;
    border: 1px solid var(--wsx-edge);
    background: var(--wsx-sunk);
    color: var(--wsx-ink);      /* markadaki ciplak a{color} kurali buraya ulasmasin */
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.wsx .wsx-pause-actions button.is-pause {
    border-color: rgba(245, 181, 68, .40);
    background: var(--wsx-pause-s);
    color: var(--wsx-pause);
}

.wsx .wsx-pause-actions button.is-resume {
    border-color: rgba(24, 199, 184, .44);
    background: var(--wsx-crowd-s);
    color: var(--wsx-crowd);
}

.wsx .wsx-pause-actions button.is-skip {
    border-color: rgba(244, 63, 94, .38);
    background: var(--wsx-host-s);
    color: var(--wsx-host);
}

.wsx .wsx-pause-actions button:hover { border-color: rgba(148, 175, 210, .40); }

.wsx .wsx-pause-ask {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid rgba(245, 181, 68, .34);
    background: var(--wsx-pause-s);
    color: var(--wsx-pause);
    font-size: 12.5px;
    font-weight: 600;
}

.wsx .wsx-pause-ask[hidden] { display: none; }

.wsx .wsx-pause-note {
    color: var(--wsx-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* --- yarismacinin talep dugmesi --- */
.wsx .wsx-pause-request { margin: 0 0 8px; }

.wsx .wsx-pause-request button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px dashed rgba(245, 181, 68, .44);
    background: transparent;
    color: var(--wsx-pause);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.wsx .wsx-pause-request button:hover { background: var(--wsx-pause-s); }

@media (max-width: 720px) {
    .wsx .wsx-pause-actions select { max-width: 100%; flex: 1 1 140px; }
    .wsx .wsx-pause-actions form { flex-wrap: wrap; }
}


/* ==========================================================================
   SOHBET AC/KAPAT — 2026-08-30
   Kapatmak sohbeti SILMEZ; gecmis okunur, yalniz yeni mesaj durur.
   Kapali hal kirmizi degil KEHRIBAR: hata degil, yonetim karari.
   ========================================================================== */

.wsx .woo-stage-chat > strong {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wsx .woo-stage-chat > strong > span { flex: 1 1 auto; }

.wsx .wsx-chat-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(245, 181, 68, .40);
    background: var(--wsx-pause-s);
    color: var(--wsx-pause);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .08em;
}

.wsx .wsx-chat-state[hidden] { display: none; }

.wsx .wsx-chat-toggle { margin: 0; }

.wsx .wsx-chat-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--wsx-edge);
    background: var(--wsx-sunk);
    color: var(--wsx-ink-2);   /* markadaki ciplak a{color} buraya ulasmasin */
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.wsx .wsx-chat-toggle button:hover {
    border-color: rgba(245, 181, 68, .45);
    color: var(--wsx-pause);
}

.wsx .wsx-chat-closed {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(245, 181, 68, .38);
    background: var(--wsx-pause-s);
    color: var(--wsx-pause);
    font-size: 11.5px;
    line-height: 1.4;
}

.wsx .wsx-chat-closed[hidden] { display: none; }

/* kapaliyken baslik da sessizlesir */
.wsx.is-chat-closed .woo-stage-chat > strong > span { color: var(--wsx-dim); }