/* =====================================================
   WATCH PARTY — sitenin temasını izler, göz yormaz
   - Saf beyaz / saf siyah metin yok, düşük kontrastlı yüzeyler
   - Vurgu renkleri temanın kendisinden, ama doygunluğu kısılmış
   - Odaya girince ışıklar kısılır (sinema modu): Şafak'ta da ekran
     çevresi koyulaşır ki film izlerken göz parlak alana alışmak zorunda kalmasın
   - Bu dosyadaki her şey #wp ve .wpOpen altında; sitenin geri kalanına dokunmaz
   ===================================================== */

/* ---------- İlk ekrandaki düğme ----------
   Kenarında dönen bir ışık, arkada nefes alan bir parıltı, "dokun bana" diyen
   oynat halkası ve ara sıra üstünden geçen bir parlama. Sadece transform /
   opacity canlandırılır: telefonda akıcı, pili yormaz. Renkler temadan gelir. */
.wpOpen{
  position:relative;isolation:isolate;
  margin-top:22px;display:inline-flex;align-items:center;gap:12px;
  padding:9px 24px 9px 9px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--text);text-align:left;
  -webkit-tap-highlight-color:transparent;
  animation:wpEnter .8s cubic-bezier(.2,.8,.2,1) .45s both;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.wpOpen:hover{transform:translateY(-2px) scale(1.02)}
.wpOpen:active{transform:scale(.96);transition-duration:.08s}
.wpOpen:focus-visible{outline:2px solid var(--accentSoft);outline-offset:5px}

/* Arkadaki yumuşak parıltı */
.wpOpen-glow{
  position:absolute;inset:-8px;z-index:-2;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 90% at 30% 50%, var(--accent), transparent 70%),
             radial-gradient(60% 90% at 75% 50%, var(--accentSoft), transparent 70%);
  filter:blur(16px);opacity:.45;
  animation:wpGlow 3.2s ease-in-out infinite;
}
/* Kenar: sabit ince çizgi + üzerinde dönen ışık kuyruğu */
.wpOpen-ring{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:var(--line2);
}
.wpOpen-ring::before{
  content:'';position:absolute;inset:-200%;
  background:conic-gradient(from 0deg, transparent 0 62%, var(--accentSoft) 78%, var(--accent) 86%, transparent 94%);
  animation:wpSpin 3.6s linear infinite;
}
.wpOpen-ring::after{
  content:'';position:absolute;inset:1.5px;border-radius:inherit;
  background:var(--bg2);
  background:color-mix(in srgb, var(--bg2) 86%, var(--accent) 14%);
}
/* Ara sıra üstünden geçen parlama */
.wpOpen-shine{
  position:absolute;top:0;bottom:0;left:0;width:38%;z-index:1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:translateX(-140%) skewX(-18deg);
  animation:wpShine 5.5s ease-in-out 1.6s infinite;
}

/* Oynat düğmesi + dışa yayılan halka */
.wpOpen-play{
  position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--accentSoft), var(--accent) 55%, var(--accent2));
  color:var(--onAccent);box-shadow:0 6px 18px var(--shadow);
}
.wpOpen-play svg{width:20px;height:20px;fill:currentColor;margin-left:2px}
.wpOpen-play::before, .wpOpen-play::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--accentSoft);opacity:0;pointer-events:none;
  animation:wpRipple 2.6s cubic-bezier(.2,.6,.3,1) 1.2s infinite;
}
.wpOpen-play::after{animation-delay:2.5s}

.wpOpen-txt{display:flex;flex-direction:column;line-height:1.15;position:relative;z-index:2}
.wpOpen-txt b{
  font-family:'Playfair Display',"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",serif;
  font-size:19px;font-weight:700;letter-spacing:.2px;
}
.wpOpen-txt small{margin-top:3px;font-size:12px;color:var(--muted);letter-spacing:.4px}

@keyframes wpEnter{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes wpSpin{to{transform:rotate(1turn)}}
@keyframes wpGlow{0%,100%{opacity:.32;transform:scale(.97)}50%{opacity:.62;transform:scale(1.04)}}
@keyframes wpShine{0%,62%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes wpRipple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .wpOpen, .wpOpen-glow, .wpOpen-ring::before, .wpOpen-shine, .wpOpen-play::before, .wpOpen-play::after{animation:none}
  .wpOpen-ring::before{opacity:.6}
}

/* ---------- Renkler (her tema için) ---------- */
/* Gece — koyu bordo */
#wp{
  --wp-bg:#140a10; --wp-bg2:#1b0d15;
  --wp-panel:#1c1018; --wp-panel2:#251620; --wp-panel3:#2e1b27;
  --wp-line:rgba(255,214,232,.08); --wp-line2:rgba(255,214,232,.14);
  --wp-text:#ecdde4; --wp-muted:#a8909c;
  --wp-accent:#d77a9e; --wp-accent2:#e391b3; --wp-onAccent:#2a0f1d;
  --wp-glow:rgba(215,122,158,.10);
  --wp-ok:#78b994; --wp-danger:#d47a85; --wp-dangerBg:rgba(212,122,133,.14); --wp-gold:#d6b27a;
  --wp-video:#000; --wp-shadow:rgba(0,0,0,.45);
  --wp-avatar-s:28%; --wp-avatar-l:38%;
}
/* Lavanta — mor akşam */
[data-theme="lavanta"] #wp{
  --wp-bg:#13111a; --wp-bg2:#191523;
  --wp-panel:#1b1724; --wp-panel2:#231e2f; --wp-panel3:#2c2639;
  --wp-line:rgba(221,201,228,.08); --wp-line2:rgba(221,201,228,.14);
  --wp-text:#e7e0ed; --wp-muted:#9e94ab;
  --wp-accent:#c49abd; --wp-accent2:#d4afcd; --wp-onAccent:#241a2c;
  --wp-glow:rgba(196,154,189,.10);
}
/* Şafak — oda: sıcak, kısık ışık (krem tonlarından türetilmiş koyu mocha) */
[data-theme="safak"] #wp{
  --wp-bg:#191413; --wp-bg2:#201918;
  --wp-panel:#211a19; --wp-panel2:#2a2220; --wp-panel3:#342a28;
  --wp-line:rgba(255,228,220,.08); --wp-line2:rgba(255,228,220,.14);
  --wp-text:#efe4e0; --wp-muted:#ab9a95;
  --wp-accent:#dc9eab; --wp-accent2:#e7b2bc; --wp-onAccent:#2b1a1e;
  --wp-glow:rgba(220,158,171,.10);
}
/* Şafak — lobi: sitenin aydınlık hali, ama beyaz değil krem */
[data-theme="safak"] #wp:not(.inRoom){
  --wp-bg:#f8eee9; --wp-bg2:#f3e3df;
  --wp-panel:#fbf5f2; --wp-panel2:#f4e9e5; --wp-panel3:#eddcd7;
  --wp-line:rgba(74,43,51,.10); --wp-line2:rgba(74,43,51,.16);
  --wp-text:#4a2b33; --wp-muted:#8c6b72;
  --wp-accent:#c97a8d; --wp-accent2:#b9687c; --wp-onAccent:#fff8f6;
  --wp-glow:rgba(201,122,141,.12);
  --wp-danger:#b5545f; --wp-dangerBg:rgba(181,84,95,.10);
  --wp-shadow:rgba(168,120,130,.22);
  --wp-avatar-s:30%; --wp-avatar-l:58%;
}

/* ---------- Kabuk ---------- */
body.wpOn{overflow:hidden}
body.wpOn #hearts, body.wpOn #themePick, body.wpOn #music, body.wpOn #conf{display:none !important}

#wp{
  position:fixed;inset:0;z-index:100;
  background:radial-gradient(120% 90% at 50% -10%, var(--wp-bg2) 0%, var(--wp-bg) 60%);
  color:var(--wp-text);
  font-size:14px;line-height:1.5;
  -webkit-user-select:text;user-select:text;
  transition:background-color .6s ease, color .6s ease;
  animation:wpIn .35s ease both;
}
#wp[hidden], #wp [hidden]{display:none !important}
@keyframes wpIn{from{opacity:0}to{opacity:1}}
/* :where → bu temel kurallar aşağıdaki sınıfları ezmesin */
:where(#wp) *{box-sizing:border-box}
:where(#wp) :is(button, input, select){font:inherit;color:inherit}
:where(#wp) svg{width:20px;height:20px;flex:none}
#wp .wp-sprite{position:absolute;width:0;height:0;overflow:hidden}
#wp :focus-visible{outline:2px solid var(--wp-accent);outline-offset:2px}
.wp-spacer{flex:1}
.wp-hint{color:var(--wp-muted);font-size:12.5px;margin:12px 0 0;line-height:1.55}
.wp-status{
  margin:12px 0 0;padding:9px 12px;border-radius:12px;font-size:13px;
  color:var(--wp-text);background:var(--wp-panel2);border:1px solid var(--wp-line2);
}
.wp-status::before{content:'⏳ '}
.wp-error{
  color:var(--wp-danger);background:var(--wp-dangerBg);
  border:1px solid color-mix(in srgb, var(--wp-danger) 30%, transparent);
  padding:9px 12px;border-radius:12px;margin:12px 0 0;font-size:13px;
}

/* ---------- Düğmeler ---------- */
.wp-btn{
  border:1px solid transparent;border-radius:12px;padding:10px 16px;
  cursor:pointer;font-weight:650;transition:background .2s, border-color .2s, transform .05s, opacity .2s;
}
.wp-btn:active{transform:translateY(1px)}
.wp-btn:disabled{opacity:.6;cursor:progress}
.wp-lg{padding:13px 20px;width:100%;font-size:15px}
.wp-primary{background:var(--wp-accent);color:var(--wp-onAccent)}
.wp-primary:hover{background:var(--wp-accent2)}
.wp-ghost{background:var(--wp-panel2);border-color:var(--wp-line2)}
.wp-ghost:hover{border-color:var(--wp-accent)}

.wp-iconbtn{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;border:0;background:transparent;cursor:pointer;color:var(--wp-text);opacity:.85;
  transition:background .15s, opacity .15s;
}
.wp-iconbtn:hover{background:var(--wp-line2);opacity:1}
.wp-iconbtn.on, .wp-iconbtn[aria-pressed="true"]{color:var(--wp-accent2);opacity:1}

.wp-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border-radius:999px;background:var(--wp-panel2);border:1px solid var(--wp-line);
  font-size:13px;white-space:nowrap;
}
.wp-chip svg{width:16px;height:16px;opacity:.8}
button.wp-chip{cursor:pointer}
button.wp-chip:hover{border-color:var(--wp-accent)}
.wp-chip b{letter-spacing:.12em}
.wp-chip-gold{color:var(--wp-gold);border-color:color-mix(in srgb, var(--wp-gold) 30%, transparent);background:color-mix(in srgb, var(--wp-gold) 9%, transparent)}

/* ---------- Form ---------- */
#wp input:not([type=range]):not([type=checkbox]), #wp select{
  width:100%;background:var(--wp-panel2);border:1px solid var(--wp-line2);
  border-radius:12px;padding:11px 13px;outline:none;font-size:16px; /* 16px: iPhone yakınlaştırmasın */
  transition:border-color .2s;
}
#wp input::placeholder{color:var(--wp-muted);opacity:.8}
#wp input:not([type=range]):not([type=checkbox]):focus, #wp select:focus{border-color:var(--wp-accent)}
#wp select option{background:var(--wp-panel);color:var(--wp-text)}
.wp-field{display:grid;gap:7px;margin:0 0 15px}
.wp-field > span{color:var(--wp-muted);font-size:13px}

.wp-range{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--wp-line2);outline:none;cursor:pointer;width:100%}
.wp-range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--wp-text);border:0}
.wp-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--wp-text);border:0}

/* ---------- Lobi ---------- */
.wp-lobby{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  display:grid;place-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 64px) 16px calc(env(safe-area-inset-bottom,0px) + 28px);
}
.wp-back{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;
  background:var(--wp-panel2);border:1px solid var(--wp-line);color:var(--wp-text);
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:650;cursor:pointer;
}
.wp-back:hover{border-color:var(--wp-accent)}
.wp-card{
  width:100%;max-width:430px;
  background:var(--wp-panel);border:1px solid var(--wp-line);
  border-radius:24px;padding:28px 24px;
  box-shadow:0 24px 70px var(--wp-shadow), 0 0 0 1px var(--wp-glow) inset;
}
.wp-kicker{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--wp-accent);font-weight:700}
.wp-title{
  font-family:'Playfair Display',"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",serif;
  font-size:clamp(28px,8vw,34px);font-weight:700;margin:6px 0 6px;line-height:1.15;
}
.wp-sub{color:var(--wp-muted);margin:0 0 22px;font-size:14.5px;line-height:1.6}
.wp-toggles{display:flex;gap:18px;margin:2px 0 18px;flex-wrap:wrap}
.wp-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--wp-muted);font-size:14px}
.wp-toggle input{width:17px;height:17px;accent-color:var(--wp-accent)}
.wp-divider{display:flex;align-items:center;gap:10px;color:var(--wp-muted);font-size:12px;margin:20px 0}
.wp-divider::before, .wp-divider::after{content:"";flex:1;height:1px;background:var(--wp-line2)}
.wp-joinrow{display:flex;gap:8px}
#wp .wp-joinrow input{text-transform:uppercase;letter-spacing:.18em}
.wp-joinrow .wp-btn{flex:none}

/* ---------- Oda ---------- */
.wp-room{
  position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
}
.wp-topbar{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--wp-line);flex-wrap:wrap;
}
.wp-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.wp-dot{width:9px;height:9px;border-radius:50%;background:var(--wp-accent);opacity:.9}
.wp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0}
.wp-room.cinema .wp-layout{grid-template-columns:minmax(0,1fr)}
.wp-room.cinema .wp-side{display:none}

.wp-stage{padding:14px;min-width:0;min-height:0;display:flex}
.wp-screen{
  position:relative;flex:1;background:var(--wp-video);border-radius:16px;overflow:hidden;
  border:1px solid var(--wp-line);display:grid;place-items:center;min-height:200px;
}
.wp-screen video{width:100%;height:100%;object-fit:contain;background:var(--wp-video);display:block}
.wp-screen:fullscreen{border-radius:0;border:0}
.wp-screen:-webkit-full-screen{border-radius:0;border:0;width:100%;height:100%}

.wp-empty{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  text-align:center;padding:24px;gap:6px;
  background:radial-gradient(60% 55% at 50% 42%, var(--wp-panel) 0%, #070506 100%);
  color:#e6dbe0;
}
.wp-empty h3{margin:10px 0 0;font-size:19px;font-weight:650}
.wp-empty p{margin:0 0 14px;max-width:420px;color:#a89aa1;font-size:14px}
.wp-empty .wp-lg{width:auto}
.wp-emptyicon{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--wp-accent) 14%, transparent);color:var(--wp-accent2);
}
.wp-emptyicon svg{width:28px;height:28px}

.wp-screenctl{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:28px 12px 10px;background:linear-gradient(transparent, rgba(0,0,0,.7));
  color:#e6dde1;opacity:0;transition:opacity .25s;
}
.wp-screenctl .wp-iconbtn{color:#e6dde1}
.wp-screenctl .wp-iconbtn:hover{background:rgba(255,255,255,.12)}
.wp-screen:hover .wp-screenctl, .wp-screenctl:focus-within, .wp-screen.showctl .wp-screenctl{opacity:1}
.wp-screen.nostream .wp-screenctl{display:none}
.wp-filevideo{width:100%;height:100%;object-fit:contain;background:var(--wp-video);display:block}
.wp-emptybtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wp-empty .wp-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#e6dbe0}
.wp-empty .wp-ghost:hover{border-color:var(--wp-accent)}
.wp-screen.idle{cursor:none}
.wp-screenctl .wp-range{width:130px;background:rgba(255,255,255,.25)}
.wp-screenctl .wp-range::-webkit-slider-thumb{background:#eee4e8}
.wp-screenctl .wp-range::-moz-range-thumb{background:#eee4e8}
.wp-vollabel{font-size:12px;color:#cfc4c9;width:44px;font-variant-numeric:tabular-nums}
.wp-live{
  background:color-mix(in srgb, var(--wp-danger) 85%, #000);color:#fff3f4;
  font-weight:700;font-size:10.5px;padding:3px 8px;border-radius:6px;letter-spacing:.08em;
}
.wp-stats{
  position:absolute;top:12px;left:12px;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.1);
  color:#ddd3d8;padding:8px 10px;border-radius:10px;font:12px/1.5 ui-monospace,Consolas,monospace;white-space:pre;
  pointer-events:none;max-width:calc(100% - 24px);overflow:hidden;
}
.wp-unmute{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;gap:8px;align-items:center;
  background:var(--wp-accent);color:var(--wp-onAccent);border:0;border-radius:999px;padding:12px 20px;font-weight:650;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:2;
}

/* ---------- Yüz baloncukları ----------
   Yan panel görünmüyorken (sinema modu, tam ekran, telefon yan) filmin köşesinde */
.wp-faces{
  position:absolute;top:12px;right:12px;z-index:3;
  display:none;flex-direction:column;gap:14px;pointer-events:none;
}
.wp-room.cinema .wp-faces,
.wp-screen:fullscreen .wp-faces,
.wp-screen:-webkit-full-screen .wp-faces{display:flex}
.wp-face{position:relative;width:68px;height:68px;flex:none;opacity:.94}
.wp-face video, .wp-faceav{
  position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  border:2px solid rgba(255,255,255,.16);box-shadow:0 4px 14px rgba(0,0,0,.5);
  transition:border-color .25s;
}
.wp-face video{object-fit:cover;background:#000;display:none}
.wp-face.cam-on video{display:block}
.wp-face.cam-on .wp-faceav{display:none}
.wp-face.self video{transform:scaleX(-1)}
.wp-faceav{
  display:grid;place-items:center;font-weight:700;font-size:22px;color:#f6eef1;
  background:hsl(var(--h, 330) var(--wp-avatar-s) var(--wp-avatar-l));
}
.wp-face.speaking video, .wp-face.speaking .wp-faceav{border-color:color-mix(in srgb, var(--wp-ok) 85%, transparent)}
.wp-facename{
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10.5px;font-weight:650;color:#efe6ea;background:rgba(0,0,0,.62);
  padding:1px 7px;border-radius:8px;
}
/* "Yüzler üstte" küçük penceresi */
.wp-pipdoc{display:flex;align-items:center;justify-content:center;animation:none}
.wp-faces.in-pip{
  display:flex !important;position:static;flex-direction:row;flex-wrap:wrap;
  justify-content:center;align-content:center;gap:18px 16px;padding:12px;width:100%;height:100%;
}
.wp-faces.in-pip .wp-face{width:96px;height:96px}
.wp-faces.in-pip .wp-facename{font-size:12px;bottom:-9px}
.wp-faces.in-pip .wp-faceav{font-size:30px}
/* Ekranı paylaşınca çıkan istem */
.wp-pipprompt{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--wp-accent);color:var(--wp-onAccent);border:0;border-radius:999px;
  padding:11px 18px;font-weight:650;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);
  animation:wpIn .3s ease both;
}
.wp-room.faces-off .wp-faces:not(.in-pip){display:none !important}

/* ---------- Film sesi kontrolü ---------- */
.wp-audiobadge{
  position:absolute;left:12px;top:12px;z-index:4;
  padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:650;
  background:rgba(0,0,0,.66);color:#efe6ea;border:1px solid rgba(255,255,255,.14);
  animation:wpIn .3s ease both;pointer-events:none;
}
.wp-audiobadge.ok{color:#bfe8cc;border-color:rgba(120,185,148,.5)}
.wp-audiobadge.warn{color:#f3c1c7;border-color:rgba(212,122,133,.55)}
.wp-audiocheck{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:min(440px, calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;
  background:var(--wp-panel);color:var(--wp-text);border:1px solid var(--wp-line2);
  border-radius:18px;padding:18px 18px 16px;box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:wpIn .25s ease both;
}
.wp-audiocheck-title{font-weight:700;font-size:16px;margin-bottom:8px}
.wp-audiocheck-text{font-size:13.5px;line-height:1.55;color:var(--wp-muted)}
.wp-audiocheck-text ol{margin:8px 0 0 18px;padding:0}
.wp-audiocheck-text li{margin:4px 0}
.wp-audiocheck-text b{color:var(--wp-text)}
.wp-audiocheck-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
@media (max-width:860px){
  .wp-audiocheck{padding:14px;border-radius:14px}
  .wp-audiocheck-text{font-size:12.5px}
}

/* ---------- Ses dengesi paneli ---------- */
.wp-mixrow{margin:0 0 16px}
.wp-mixhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;font-size:14px}
.wp-mixhead b{font-size:12.5px;font-weight:600;color:var(--wp-muted);font-variant-numeric:tabular-nums}
.wp-mixrow .wp-hint{margin-top:8px}
.wp-mixduck{margin:-2px 0 20px;font-size:13.5px}
.wp-mixempty{margin:0 0 16px}
.wp-range:disabled{opacity:.38;cursor:not-allowed}

/* ---------- Yan panel ---------- */
.wp-side{border-left:1px solid var(--wp-line);background:var(--wp-panel);display:flex;flex-direction:column;min-height:0}
.wp-tabs{display:flex;padding:8px;gap:6px;border-bottom:1px solid var(--wp-line)}
.wp-tab{
  flex:1;background:transparent;border:0;padding:9px;border-radius:10px;cursor:pointer;
  color:var(--wp-muted);font-weight:650;
}
.wp-tab.on{background:var(--wp-panel2);color:var(--wp-text)}
.wp-badge{
  display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;margin-left:4px;
  background:var(--wp-accent);color:var(--wp-onAccent);font-size:11px;line-height:18px;font-weight:700;
}
.wp-tabbody{flex:1;min-height:0;display:flex;flex-direction:column}

.wp-tiles{overflow-y:auto;padding:10px;display:grid;gap:10px;align-content:start}
.wp-tile{
  position:relative;border-radius:14px;overflow:hidden;background:var(--wp-panel2);
  border:2px solid transparent;transition:border-color .25s;
}
.wp-tile.speaking{border-color:color-mix(in srgb, var(--wp-ok) 75%, transparent)}
.wp-tile.connecting .wp-media{opacity:.55}
.wp-media{position:relative;aspect-ratio:16/9;background:#0c090b}
.wp-media video{width:100%;height:100%;object-fit:cover;display:block}
.wp-tile.self video{transform:scaleX(-1)}
.wp-avatar{position:absolute;inset:0;display:grid;place-items:center;background:var(--wp-panel3)}
.wp-avatar span{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:20px;
  background:hsl(var(--h, 330) var(--wp-avatar-s) var(--wp-avatar-l));color:#f6eef1;
}
.wp-tile.cam-on .wp-avatar{display:none}
.wp-name{
  position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.55);color:#efe6ea;padding:3px 8px;border-radius:8px;font-size:12px;font-weight:600;
  max-width:calc(100% - 16px);
}
.wp-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.wp-name svg{width:14px;height:14px}
.wp-name .wp-crown{color:var(--wp-gold)}
.wp-name .wp-micoff{color:#e3a1aa}
.wp-vol{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--wp-panel2)}
.wp-vol .wp-iconbtn{width:28px;height:28px}
.wp-vol .wp-iconbtn svg{width:16px;height:16px}
.wp-vol span{font-size:11px;color:var(--wp-muted);width:40px;text-align:right;font-variant-numeric:tabular-nums}
.wp-selfnote{padding:6px 10px;background:var(--wp-panel2);font-size:11.5px;color:var(--wp-muted)}

.wp-chatlog{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.wp-msg{background:var(--wp-panel2);border-radius:12px;padding:7px 11px;overflow-wrap:anywhere;max-width:92%}
.wp-msg b{color:var(--wp-accent2);font-size:12px;display:block;font-weight:650}
.wp-msg.mine{align-self:flex-end;background:var(--wp-panel3)}
.wp-msg.mine b{color:var(--wp-gold)}
.wp-msg.sys{background:transparent;color:var(--wp-muted);font-size:12px;text-align:center;padding:2px;align-self:center}
.wp-chatform{display:flex;gap:6px;padding:10px;border-top:1px solid var(--wp-line)}

/* ---------- Alt kontrol çubuğu ---------- */
.wp-controls{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid var(--wp-line);
}
.wp-ctrl{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;
  background:var(--wp-panel2);border:1px solid var(--wp-line);cursor:pointer;font-weight:650;
  transition:background .2s, border-color .2s, color .2s;
}
.wp-ctrl:hover{border-color:var(--wp-line2);background:var(--wp-panel3)}
.wp-ctrl.off{background:var(--wp-dangerBg);border-color:color-mix(in srgb, var(--wp-danger) 30%, transparent);color:var(--wp-danger)}
.wp-ctrl-accent{background:var(--wp-accent);border-color:var(--wp-accent);color:var(--wp-onAccent)}
.wp-ctrl-accent:hover{background:var(--wp-accent2);border-color:var(--wp-accent2)}
.wp-ctrl-accent.sharing{background:var(--wp-dangerBg);border-color:var(--wp-danger);color:var(--wp-danger)}
.wp-ctrl-danger{color:var(--wp-danger)}
.wp-ctrl-danger:hover{background:var(--wp-dangerBg);border-color:color-mix(in srgb, var(--wp-danger) 40%, transparent)}

/* ---------- Ayarlar ---------- */
.wp-modal{
  margin:auto;   /* sitenin genel *{margin:0} kuralı pencereyi sol üste itmesin */
  border:1px solid var(--wp-line2);border-radius:20px;background:var(--wp-panel);color:var(--wp-text);
  padding:0;width:min(460px, calc(100% - 32px));box-shadow:0 30px 80px var(--wp-shadow);
}
.wp-modal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.wp-modalin{padding:22px;max-height:85vh;overflow-y:auto}
.wp-modal h3{margin:0 0 16px;font-size:18px}
.wp-modal h4{margin:18px 0 12px;padding-top:14px;border-top:1px solid var(--wp-line);font-size:15px}
.wp-modalact{display:flex;justify-content:flex-end;margin-top:16px}
.wp-meter{height:6px;background:var(--wp-line2);border-radius:6px;overflow:hidden}
.wp-meter div{height:100%;width:0;background:linear-gradient(90deg, var(--wp-ok), #c9a85c 80%, var(--wp-danger));transition:width .08s}

.wp-toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);transform:translateX(-50%);
  background:var(--wp-panel3);color:var(--wp-text);border:1px solid var(--wp-line2);
  padding:10px 16px;border-radius:12px;box-shadow:0 10px 30px var(--wp-shadow);z-index:5;
  max-width:calc(100% - 32px);font-size:13.5px;text-align:center;
}

/* ---------- Telefon / dar ekran ---------- */
@media (max-width:860px){
  .wp-topbar{padding:8px 12px;gap:8px}
  .wp-hide-sm{display:none !important}
  .wp-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .wp-room.cinema .wp-side{display:flex}
  .wp-stage{padding:10px 10px 6px}
  .wp-screen{aspect-ratio:16/9;min-height:0;border-radius:14px}
  .wp-side{border-left:0;border-top:1px solid var(--wp-line);min-height:0}
  .wp-tiles{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))}
  .wp-screenctl{opacity:1;padding:20px 8px 6px}
  .wp-empty{gap:2px;padding:12px}
  .wp-emptyicon{display:none}
  .wp-empty h3{margin:0;font-size:16px}
  .wp-empty p{font-size:12.5px;margin:2px 0 8px;line-height:1.45}
  .wp-empty .wp-lg{padding:9px 14px;font-size:13.5px}
  .wp-emptybtns{gap:8px}
  .wp-screenctl{gap:4px}
  .wp-screenctl .wp-range{width:78px}
  .wp-screenctl .wp-iconbtn{width:34px;height:34px}
  .wp-vollabel{width:36px}
  #wpStatsBtn{display:none}   /* dar ekranda tam ekran düğmesine yer kalsın */
  .wp-controls{gap:8px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
  .wp-ctrl{padding:11px 14px}
  .wp-ctrl span{display:none}
  .wp-toast{bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}
}
/* Telefon dik tutulurken: yüzler filmin sağ üst köşesinde küçük bir sıra */
@media (max-width:860px){
  .wp-faces{display:flex;flex-direction:row;top:8px;right:8px;gap:6px}
  .wp-face{width:46px;height:46px}
  .wp-face video, .wp-faceav{border-width:1.5px}
  .wp-faceav{font-size:17px}
  .wp-facename{display:none}
  /* yayın yokken boş ekran yazısının üstüne binmesin */
  .wp-screen.nostream:not(.filemode) .wp-faces{display:none}
}

/* iPhone tam ekranı: Apple'ın oynatıcısı yerine sayfanın kendi tam ekranı,
   böylece yüzler ve kontroller filmin üstünde kalır */
.wp-room.fakefs .wp-screen{
  position:fixed;inset:0;z-index:30;width:100vw;height:100vh;height:100dvh;
  aspect-ratio:auto;border-radius:0;border:0;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background:#000;
}
.wp-room.fakefs .wp-faces{display:flex}
.wp-room.fakefs .wp-screenctl{opacity:1}

/* Telefon yan çevrilince: yayın tüm ekranı kaplasın */
@media (max-width:960px) and (max-height:500px) and (orientation:landscape){
  .wp-topbar, .wp-side{display:none !important}
  .wp-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .wp-stage{padding:0}
  .wp-screen{aspect-ratio:auto;border-radius:0;border:0}
  .wp-controls{position:absolute;right:8px;top:50%;transform:translateY(-50%);flex-direction:column;
    border:0;padding:6px;background:rgba(0,0,0,.35);border-radius:16px;opacity:.55;transition:opacity .2s}
  .wp-controls:hover, .wp-controls:focus-within{opacity:1}
  .wp-room{grid-template-rows:minmax(0,1fr)}
  .wp-faces{display:flex;flex-direction:column;top:12px;left:12px;right:auto;gap:12px}
  .wp-face{width:56px;height:56px}
  .wp-facename{display:block}
}

@media (prefers-reduced-motion:reduce){
  #wp{animation:none;transition:none}
  .wpOpen, .wp-btn, .wp-ctrl, .wp-tile, .wp-screenctl{transition:none}
}