/* ===========================================================
   TOKENS
   bg: #14121f -> #1b1730 gradient, gece odası hissi
   accent (ekran ışığı): #f0a868   |  ikinci accent (sevgi/online): #e8849c
   online durumu: #7fd9c4 (fonksiyonel, tek amaçlı kullanım)
   =========================================================== */
:root{
  --bg-1:#100e1a;
  --bg-2:#1c1730;
  --panel: rgba(255,255,255,0.045);
  --panel-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.09);
  --text: #f3eef8;
  --text-muted:#a89fc0;
  --accent:#f0a868;
  --accent-soft: rgba(240,168,104,0.18);
  --rose:#e8849c;
  --online:#7fd9c4;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --font-display:'Fraunces', serif;
  --font-body:'Sora', sans-serif;
  --font-mono:'Space Mono', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background: radial-gradient(circle at 15% 0%, #221c3a 0%, var(--bg-1) 45%) , linear-gradient(160deg,var(--bg-1),var(--bg-2));
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}

::selection{ background:var(--accent-soft); }

/* ambient tv-glow blobs */
.glow{
  position:fixed; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none; opacity:.55;
}
.glow-a{ width:420px;height:420px; background:var(--accent); top:-120px; right:-120px; animation:drift 26s ease-in-out infinite alternate; }
.glow-b{ width:380px;height:380px; background:var(--rose); bottom:-140px; left:-100px; opacity:.35; animation:drift 32s ease-in-out infinite alternate-reverse; }
@keyframes drift{ from{ transform:translate(0,0); } to{ transform:translate(30px,-25px); } }
@media (prefers-reduced-motion: reduce){ .glow{ animation:none; } }

.conn-indicator{
  position:fixed; top:14px; right:16px; width:9px; height:9px; border-radius:50%;
  background:#5c5470; box-shadow:0 0 0 0 rgba(127,217,196,.5); z-index:50; transition:background .3s;
}
.conn-indicator.online{ background:var(--online); animation:pulseDot 2.2s ease-out infinite; }
@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(127,217,196,.45);} 70%{box-shadow:0 0 0 8px rgba(127,217,196,0);} 100%{box-shadow:0 0 0 0 rgba(127,217,196,0);} }

.hidden{ display:none !important; }

/* ===================== LANDING ===================== */
.view{ position:relative; z-index:1; }
.landing-view{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.landing-card{
  width:100%; max-width:420px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px 28px;
  backdrop-filter:blur(18px);
  animation:cardIn .5s ease both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.brand{ text-align:center; margin-bottom:26px; }
.brand-mark{ color:var(--accent); font-size:11px; vertical-align:middle; margin-right:6px; }
.brand h1{
  font-family:var(--font-display); font-weight:500; font-size:30px; margin:6px 0 4px;
  letter-spacing:.3px;
}
.brand-sub{ color:var(--text-muted); font-size:13px; margin:0; }

.field-label{ display:block; font-size:12px; color:var(--text-muted); margin:0 0 6px 2px; }

.text-input{
  width:100%; background:rgba(0,0,0,0.22); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); padding:12px 14px; font-family:var(--font-body); font-size:15px;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.text-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.code-input{ font-family:var(--font-mono); letter-spacing:3px; text-transform:uppercase; text-align:center; font-size:18px; }

.error-text{ color:var(--rose); font-size:12.5px; min-height:16px; margin:8px 2px 0; }
.loading-text{ color:var(--text-muted); font-size:13px; text-align:center; margin-top:14px; }

.choice-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.choice-card{
  background:rgba(0,0,0,0.18); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 12px; color:var(--text); cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:4px;
  font-family:var(--font-body); transition:border-color .2s, transform .15s, background .2s;
}
.choice-card:hover{ border-color:var(--accent); background:rgba(240,168,104,0.08); transform:translateY(-2px); }
.choice-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.choice-icon{ font-size:20px; color:var(--accent); }
.choice-title{ font-weight:600; font-size:14.5px; }
.choice-sub{ font-size:11.5px; color:var(--text-muted); }

.join-box{ margin-top:16px; display:flex; flex-direction:column; gap:10px; animation:cardIn .3s ease both; }

.btn-primary{
  background:var(--accent); color:#1c1407; border:none; border-radius:var(--radius-sm);
  padding:12px 16px; font-weight:600; font-size:14.5px; cursor:pointer; transition:filter .2s, transform .15s;
}
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-primary.full{ width:100%; }
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  border-radius:var(--radius-sm); padding:9px 14px; font-size:13px; cursor:pointer; transition:border-color .2s,color .2s;
}
.btn-ghost:hover{ border-color:var(--rose); color:var(--text); }

/* ===================== ROOM ===================== */
.room-view{ min-height:100vh; padding:18px 18px 28px; display:flex; flex-direction:column; gap:16px; }

.room-header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}

/* signature element: torn movie-ticket room code */
.ticket{
  display:flex; align-items:center; gap:10px; background:var(--panel-strong);
  border:1px solid var(--border); border-radius:50px; padding:8px 16px 8px 14px; cursor:pointer;
  position:relative; transition:border-color .2s;
}
.ticket:hover{ border-color:var(--accent); }
.ticket-label{ font-size:10px; letter-spacing:1.5px; color:var(--text-muted); }
.ticket-perf{
  width:1px; height:18px; background:repeating-linear-gradient(to bottom, var(--border) 0 4px, transparent 4px 8px);
}
.ticket-code{ font-family:var(--font-mono); font-size:16px; letter-spacing:3px; color:var(--accent); }

.presence-list{ display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.presence-pill{
  display:flex; align-items:center; gap:6px; background:rgba(0,0,0,0.2); border:1px solid var(--border);
  border-radius:50px; padding:5px 11px 5px 8px; font-size:12.5px; color:var(--text-muted);
}
.presence-dot{ width:7px; height:7px; border-radius:50%; background:#5c5470; }
.presence-pill.online .presence-dot{ background:var(--online); box-shadow:0 0 6px rgba(127,217,196,.7); }
.presence-pill.online{ color:var(--text); }

.room-layout{ display:grid; grid-template-columns:1fr; gap:16px; flex:1; min-height:0; }
@media (min-width:920px){
  .room-layout{ grid-template-columns:2.1fr 1fr; align-items:start; }
}

.player-section{ display:flex; flex-direction:column; gap:10px; }
.player-frame{
  position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius-md);
  overflow:hidden; box-shadow:0 0 60px -10px var(--accent-soft); border:1px solid var(--border);
}
.player-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text-muted); gap:4px; font-size:14px; text-align:center;
}
.player-empty-sub{ font-size:12px; opacity:.7; }
.player-stage{ position:absolute; inset:0; display:none; }
.player-stage.active{ display:block; }
#ytHost, #videoEl{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
#videoEl{ object-fit:contain; }

.control-bar{
  display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:9px 14px;
}
.play-btn{
  width:34px; height:34px; border-radius:50%; background:var(--accent); border:none; color:#1c1407;
  font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:filter .2s;
}
.play-btn:hover{ filter:brightness(1.1); }
.time-text{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); min-width:38px; }
.seek-range{
  flex:1; height:4px; -webkit-appearance:none; appearance:none; background:rgba(255,255,255,0.12);
  border-radius:4px; outline:none; cursor:pointer;
}
.seek-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--accent); cursor:pointer;
  box-shadow:0 0 0 3px rgba(240,168,104,0.2);
}
.seek-range::-moz-range-thumb{ width:13px;height:13px;border-radius:50%;background:var(--accent);border:none; }

.quality-select{
  background:rgba(0,0,0,0.25); border:1px solid var(--border); color:var(--text-muted);
  border-radius:var(--radius-sm); font-size:11.5px; font-family:var(--font-body); padding:6px 8px;
  cursor:pointer; flex-shrink:0; max-width:88px;
}
.quality-select:focus{ border-color:var(--accent); color:var(--text); }

.sidebar{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.tab-row{ display:flex; gap:6px; }
.tab-btn{
  flex:1; background:transparent; border:1px solid var(--border); color:var(--text-muted);
  padding:8px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; font-family:var(--font-body); transition:all .2s;
  position:relative;
}
.tab-btn.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--text); }
@media (min-width:920px){ .tab-row{ display:none; } }

.unread-dot{
  position:absolute; top:3px; right:10px; width:8px; height:8px; border-radius:50%;
  background:var(--rose); box-shadow:0 0 6px rgba(232,132,156,.8);
}

.sidebar-panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
@media (min-width:920px){ .sidebar-panel.hidden{ display:flex !important; } }

.add-link-row, .chat-input-row{ display:flex; gap:8px; align-items:center; }
.add-btn{
  width:42px; flex-shrink:0; background:var(--accent); border:none; color:#1c1407; border-radius:var(--radius-sm);
  font-size:18px; cursor:pointer; transition:filter .2s;
}
.add-btn:hover{ filter:brightness(1.1); }

.tool-btn{
  width:36px; height:36px; flex-shrink:0; background:rgba(255,255,255,0.04); border:1px solid var(--border);
  color:var(--text-muted); border-radius:50%; font-size:16px; cursor:pointer; transition:border-color .2s, background .2s;
  display:flex; align-items:center; justify-content:center;
}
.tool-btn:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--text); }
.tool-btn.active{ border-color:var(--accent); background:var(--accent-soft); color:var(--text); }

.sticker-picker{
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; background:rgba(0,0,0,0.25);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; margin-bottom:2px;
  align-self:flex-end;
}
.sticker-item{
  background:transparent; border:none; font-size:22px; padding:6px; border-radius:var(--radius-sm); cursor:pointer;
  transition:background .15s, transform .15s;
}
.sticker-item:hover{ background:rgba(255,255,255,0.06); transform:scale(1.15); }

.chat-msg.sticker{ background:transparent; border:none; font-size:34px; padding:2px 4px; line-height:1; }
.chat-msg.image{ padding:6px; }
.chat-msg.image img{
  max-width:200px; max-height:220px; border-radius:10px; display:block; cursor:zoom-in; object-fit:cover;
}

.lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(8,6,14,0.88); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
}
.lightbox img{ max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 0 60px rgba(0,0,0,.5); }

.queue-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:380px; overflow-y:auto; }
.queue-item{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:background .2s, border-color .2s;
}
.queue-item:hover{ background:rgba(255,255,255,0.04); }
.queue-item.current{ background:var(--accent-soft); border-color:var(--accent); }
.queue-type{ font-size:13px; flex-shrink:0; width:18px; text-align:center; }
.queue-title{ flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-remove{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:13px; padding:2px 6px; opacity:.6; }
.queue-remove:hover{ opacity:1; color:var(--rose); }
.queue-empty{ color:var(--text-muted); font-size:13px; text-align:center; padding:18px 0; }

.chat-messages{ display:flex; flex-direction:column; gap:8px; max-height:380px; min-height:160px; overflow-y:auto; padding-right:2px; }
.chat-msg{ max-width:85%; padding:8px 11px; border-radius:13px; font-size:13.5px; line-height:1.4; }
.chat-msg .chat-name{ font-size:10.5px; color:var(--text-muted); display:block; margin-bottom:2px; }
.chat-msg.own{ align-self:flex-end; background:var(--accent-soft); border:1px solid var(--accent); border-bottom-right-radius:4px; }
.chat-msg.other{ align-self:flex-start; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chat-empty{ color:var(--text-muted); font-size:13px; text-align:center; padding:18px 0; }

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(10px); z-index:60;
  background:var(--panel-strong); border:1px solid var(--accent); color:var(--text); padding:10px 18px;
  border-radius:50px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  backdrop-filter:blur(10px);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:480px){
  .landing-card{ padding:26px 20px; }
  .room-view{ padding:14px 12px 22px; }
  .choice-row{ grid-template-columns:1fr; }
}

/* =========================================================
   MİNİ YAPIŞKAN OYNATICI
   ========================================================= */

/* kapatma butonu — her zaman position:absolute, sadece sticky modda görünür */
.sticky-close{
  display:none;
  position:absolute; top:6px; right:8px; z-index:55;
  background:rgba(0,0,0,.62); border:none; color:#fff;
  font-size:13px; line-height:1;
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  align-items:center; justify-content:center;
  transition:background .15s;
}
.sticky-close:hover{ background:rgba(180,0,0,.8); }

/* orijinal konumda boşluk placeholder — her zaman display:none, sticky modda block */
.player-frame-placeholder{
  display:none; width:100%;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.03);
  border:1px dashed var(--border);
}

/* ---- sticky-active: tüm değişiklikler burada ---- */
.player-section.sticky-active .player-frame{
  /* konum JS tarafından left/bottom inline style ile verilir */
  position:fixed !important;
  /* boyut: sabit mini pencere */
  width:280px !important;
  height:158px !important;      /* 280 * 9/16 = 157.5 ≈ 158 */
  aspect-ratio:unset !important;/* orijinal aspect-ratio override'ı etkisiz bırak */
  z-index:50;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 28px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,0.08);
  cursor:grab;
  transition:box-shadow .2s;
}
@media (max-width:360px){
  .player-section.sticky-active .player-frame{
    width:230px !important; height:130px !important;
  }
}
.player-section.sticky-active .player-frame:active{ cursor:grabbing !important; }
.player-section.sticky-active .player-frame:hover{
  box-shadow:0 10px 36px rgba(0,0,0,.8), 0 0 0 1px var(--accent);
}
.player-section.sticky-active .sticky-close{ display:flex; }
.player-section.sticky-active .player-frame-placeholder{ display:block; }

/* kontrol barları ve tepkiler mini modda gizlenir */
.player-section.sticky-active .control-bar,
.player-section.sticky-active .control-bar-extra,
.player-section.sticky-active .reaction-bar{ display:none !important; }

/* sinema moduyla çakışmasın */
body.cinema-mode .player-section.sticky-active .player-frame{
  position:relative !important;
  width:100% !important; height:auto !important;
  aspect-ratio:16/9 !important;
  bottom:auto !important; left:auto !important;
  cursor:default !important;
}
body.cinema-mode .player-section.sticky-active .control-bar,
body.cinema-mode .player-section.sticky-active .control-bar-extra,
body.cinema-mode .player-section.sticky-active .reaction-bar{ display:flex !important; }
body.cinema-mode .player-section.sticky-active .player-frame-placeholder{ display:none; }
body.cinema-mode .player-section.sticky-active .sticky-close{ display:none; }

/* --- kontrol çubuğu ikinci satır (hız / kalite / pip / sinema) --- */
.control-bar-extra{ justify-content:flex-end; flex-wrap:wrap; }
.speed-select{ max-width:72px; }

/* --- Beni Yakala / PiP / Sinema modu düğmeleri zaten .tool-btn kullanır --- */
#cinemaBtn.active{ border-color:var(--accent); background:var(--accent-soft); color:var(--text); }

/* --- Sinema Modu (ışıkları kapat) --- */
.room-layout{ transition:grid-template-columns .4s ease; }
body.cinema-mode{ background:#070611; }
body.cinema-mode .glow{ opacity:.1; transition:opacity .5s ease; }
body.cinema-mode .room-header{ opacity:.22; transition:opacity .35s ease; }
body.cinema-mode .room-header:hover, body.cinema-mode .room-header:focus-within{ opacity:1; }
body.cinema-mode .reaction-bar{ opacity:.35; transition:opacity .35s ease; }
body.cinema-mode .reaction-bar:hover{ opacity:1; }
body.cinema-mode .sidebar{
  opacity:0; max-height:0; pointer-events:none; overflow:hidden;
  transition:opacity .3s ease, max-height .4s ease;
}
@media (min-width:920px){
  body.cinema-mode .room-layout{ grid-template-columns:1fr 0fr; }
  body.cinema-mode .sidebar{ max-height:none; }
}

/* --- Resim içinde resim / geri sayım ekranını barındırmak için player-frame --- */
.reactions-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }

/* --- Uçan emoji tepkileri --- */
.reaction-bar{ display:flex; gap:8px; justify-content:center; transition:opacity .3s ease; }
.reaction-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid var(--border);
  font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .2s, border-color .2s;
}
.reaction-btn:hover{ transform:scale(1.15); background:var(--accent-soft); border-color:var(--accent); }
.reaction-btn:active{ transform:scale(.92); }
.flying-emoji{
  position:absolute; bottom:6%; right:10%; font-size:30px; opacity:0; pointer-events:none;
  animation:flyUp 2.6s ease-out forwards; will-change:transform, opacity;
}
@keyframes flyUp{
  0%{ opacity:0; transform:translate(0,10%) scale(.6) rotate(0deg); }
  15%{ opacity:1; transform:translate(0,-10%) scale(1) rotate(-4deg); }
  75%{ opacity:1; transform:translate(var(--drift,0px),-220%) scale(1.05) rotate(4deg); }
  100%{ opacity:0; transform:translate(var(--drift,0px),-320%) scale(1.1) rotate(6deg); }
}

/* --- Video bitiş geri sayımı --- */
.end-countdown{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:rgba(8,6,14,0.74); backdrop-filter:blur(4px); animation:fadeIn .25s ease both; text-align:center; padding:16px;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.countdown-ring-wrap{ position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.countdown-ring{ width:64px; height:64px; position:absolute; inset:0; transform:rotate(-90deg); }
.countdown-ring-bg{ fill:none; stroke:rgba(255,255,255,0.15); stroke-width:4; }
.countdown-ring-fg{ fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.countdown-number{ position:relative; font-family:var(--font-mono); font-size:20px; color:var(--text); }
.countdown-text{ color:var(--text-muted); font-size:13px; margin:0; max-width:240px; }

/* --- Yazıyor... göstergesi --- */
.typing-indicator{ font-size:11.5px; color:var(--text-muted); font-style:italic; padding:0 2px; min-height:14px; }

/* --- Sistem bildirim mesajları (chat içinde) --- */
.chat-msg.system{
  align-self:center; background:transparent; border:none; color:var(--text-muted);
  font-size:11.5px; text-align:center; padding:2px 6px; font-style:italic; max-width:100%;
}

/* --- Geçmiş sekmesi --- */
.history-item{ opacity:.55; transition:opacity .2s; }
.history-item:hover{ opacity:.9; }
.history-readd{ font-size:15px; }

/* --- Sürükle-bırak liste sıralama --- */
.queue-drag-handle{
  cursor:grab; touch-action:none; color:var(--text-muted); font-size:14px; flex-shrink:0; user-select:none; padding:2px;
}
.queue-drag-handle:active{ cursor:grabbing; }
.queue-item.dragging{
  background:var(--accent-soft); border-color:var(--accent); box-shadow:0 8px 20px rgba(0,0,0,.35); cursor:grabbing;
}