/* Jiin video katmanı: konum ve boyut jiin-video.js'te; bu sayfa yalnız görünüş.
   Düğme şeridi videonun ALTINDA, kenar tutamaçları kutunun DIŞINDA — YouTube oynatıcının önüne hiçbir öğe konmaz. */
.jiin-video {
  --r: 12px;
  position: fixed;
  z-index: 37;
  left: 0;
  top: 0;
  width: 400px;
  display: flex;
  flex-direction: column;
  background: #000;
  color: var(--jn-text, #f3eadb);
  border-radius: var(--r);
  box-shadow: 0 14px 38px #0007;
  font-family: var(--jn-ui-font, 'Segoe UI', system-ui, sans-serif);
}
.jiin-video[hidden] { display: none !important; }
/* Sohbette başlık ve giriş kutusunun (z 20) açılır menüleri videonun üstünde kalır. */
#home-screen[data-jiin-view="chat"] > .jiin-video { z-index: 19; }
/* Ana sayfanın hesap/bildirim paneli açıkken pencere onların arkasına geçer. */
#home-screen:has(#jiin-profile-panel:not([hidden]), .jiin-top > .notif-dropdown.open) > .jiin-video { z-index: 35; }
.jiin-video.gecis { transition: left .24s ease, top .24s ease, width .24s ease, border-radius .24s ease; }
.jiin-video.gecis .jiin-video-ekran { transition: height .24s ease; }
.jiin-video-ekran { position: relative; flex: none; width: 100%; height: 225px; overflow: hidden; background: #000; border-radius: var(--r) var(--r) 0 0; }
.jiin-video-ekran::before {
  content: attr(data-yukleniyor);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff80;
  font-size: 13px;
}
.jiin-video-ekran > * { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.jiin-video-serit {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 6px 0 12px;
  background: var(--jn-surface, #2b2722);
  border-top: 1px solid var(--jn-border, #4a4033);
  border-radius: 0 0 var(--r) var(--r);
  user-select: none;
}
.jiin-video-serit.suruklenir { cursor: grab; touch-action: none; }
.jiin-video-baslik {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--jn-text, #f3eadb);
}
.jiin-video-serit button {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--jn-text, #f3eadb);
  cursor: pointer;
  touch-action: manipulation;
}
.jiin-video-serit button[hidden] { display: none; }
.jiin-video-serit button:hover { background: color-mix(in srgb, var(--jn-accent, #d3ad68) 14%, transparent); color: var(--jn-accent, #d3ad68); }
.jiin-video-serit button:focus-visible { outline: 2px solid var(--jn-accent, #d3ad68); outline-offset: 1px; }
.jiin-video-serit svg { width: 19px; height: 19px; }
/* Boyut tutamaçları: kutunun dış kenarına yaslı görünmez şeritler; yalnız serbest pencerede etkin. */
.jiin-video-tutamac { position: absolute; display: none; z-index: 2; touch-action: none; }
.jiin-video[data-yer="pencere"] .jiin-video-tutamac { display: block; }
.jiin-video-tutamac[data-yon="n"] { left: 10px; right: 10px; top: -8px; height: 8px; cursor: ns-resize; }
.jiin-video-tutamac[data-yon="s"] { left: 10px; right: 10px; bottom: -8px; height: 8px; cursor: ns-resize; }
.jiin-video-tutamac[data-yon="e"] { top: 10px; bottom: 10px; right: -8px; width: 8px; cursor: ew-resize; }
.jiin-video-tutamac[data-yon="w"] { top: 10px; bottom: 10px; left: -8px; width: 8px; cursor: ew-resize; }
.jiin-video-tutamac[data-yon="nw"] { left: -8px; top: -8px; width: 16px; height: 16px; cursor: nwse-resize; }
.jiin-video-tutamac[data-yon="se"] { right: -8px; bottom: -8px; width: 16px; height: 16px; cursor: nwse-resize; }
.jiin-video-tutamac[data-yon="ne"] { right: -8px; top: -8px; width: 16px; height: 16px; cursor: nesw-resize; }
.jiin-video-tutamac[data-yon="sw"] { left: -8px; bottom: -8px; width: 16px; height: 16px; cursor: nesw-resize; }
/* Dokunmatik boyut kulpu: şeridin solunda görünür; parmakla sol aşağı çekince büyür, sağ yukarı itince küçülür. */
.jiin-video-kulp { display: none; flex: none; width: 32px; height: 44px; margin-left: -8px; place-items: center; color: var(--jn-muted, #bbb0a0); touch-action: none; cursor: nesw-resize; }
.jiin-video-kulp svg { width: 17px; height: 17px; }
@media (pointer: coarse) {
  .jiin-video[data-yer="pencere"] .jiin-video-kulp { display: grid; }
  /* Parmağa göre kalın kenar şeritleri. */
  .jiin-video-tutamac[data-yon="n"] { top: -14px; height: 14px; }
  .jiin-video-tutamac[data-yon="s"] { bottom: -14px; height: 14px; }
  .jiin-video-tutamac[data-yon="e"] { right: -14px; width: 14px; }
  .jiin-video-tutamac[data-yon="w"] { left: -14px; width: 14px; }
}
/* Panelde: yer tutucunun kendisi gibi görünür, şerit yok; kaydırma alanı dışına taşan kısım JS'te kırpılır. */
.jiin-video[data-yer="yerinde"] { --r: var(--jiin-video-radius, 12px); box-shadow: none; }
.jiin-video[data-yer="yerinde"] .jiin-video-ekran { border-radius: var(--r); }
.jiin-video[data-yer="yerinde"] .jiin-video-serit { display: none; }
.jiin-video.suruklen { cursor: grabbing; }
.jiin-video.suruklen .jiin-video-ekran { pointer-events: none; }
/* Kenar çubuğu ve çerçeve payı CSS değişkeni olarak ölçülür. */
.jiin-video-olcu {
  position: absolute;
  top: 0;
  left: var(--jn-frame-gap, 0px);
  width: var(--dt-sb, 0px);
  height: 0;
  visibility: hidden;
  pointer-events: none;
}
/* YouTube panelindeki yer tutucu. YouTube en az 200 px ister: dar telefonda kutu 16:9'dan biraz uzun olur. */
#yt-web-player-wrap { min-height: 200px; }
/* Video ayrı penceredeyken yer tutucunun içi. */
.jiin-video-pip-not {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: #000;
  color: #ffffffb3;
  font-size: 14px;
  text-align: center;
}
.jiin-video-pip-not button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #ffffff40;
  border-radius: 12px;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .jiin-video.gecis, .jiin-video.gecis .jiin-video-ekran { transition: none; }
}