:root{
  --mavi:#0b2d57;
  --mavi2:#072141;
  --sari:#f2c100;
  --beyaz:#fff;
}
*{ box-sizing:border-box; font-family: Arial, Helvetica, sans-serif; }
body{ margin:0; }
.vlog-bg{
  min-height:100vh;
  background: linear-gradient(135deg, var(--mavi2), var(--mavi));
  color: var(--beyaz);
}
.vlog-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.12);
  position:sticky; top:0;
  background: rgba(7,33,65,.85);
  backdrop-filter: blur(6px);
}
.vlog-topbar-left{ display:flex; align-items:center; gap:12px; }
.vlog-topbar-right{ display:flex; align-items:center; gap:10px; }
.vlog-badge{
  display:inline-block;
  background: rgba(242,193,0,.18);
  border:1px solid rgba(242,193,0,.35);
  color: var(--sari);
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
}
.vlog-user{ opacity:.92; }
.vlog-btn{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  padding:8px 12px;
  border-radius:10px;
  background: rgba(255,255,255,.06);
}
.vlog-btn:hover{ background: rgba(255,255,255,.10); }
.vlog-btn-danger{ border-color: rgba(255,90,90,.4); }
.vlog-wrap{ max-width:1100px; margin:0 auto; padding:18px; }
.vlog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 900px){
  .vlog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .vlog-grid{ grid-template-columns: 1fr; }
}
.vlog-tile{
  text-decoration:none;
  color:#fff;
  padding:14px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.vlog-tile:hover{ background: rgba(255,255,255,.09); }
.vlog-tile-title{ font-weight:800; line-height:1.25; }
.vlog-tile-sub{ margin-top:10px; color: rgba(255,255,255,.85); }
.vlog-card{
  width:min(420px, calc(100% - 28px));
  margin: 8vh auto;
  padding:16px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
}
.vlog-card-head h1{ margin:8px 0 4px; }
.vlog-card-head p{ margin:0 0 14px; opacity:.9; }
label{ display:block; margin:10px 0 6px; opacity:.95; }
input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:#fff;
  outline:none;
}
button{
  width:100%;
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  background: var(--sari);
  color:#111;
  font-weight:800;
}
button:hover{ filter: brightness(0.95); }
.vlog-alert{
  background: rgba(255,90,90,.16);
  border:1px solid rgba(255,90,90,.35);
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
}
.vlog-foot{ margin-top:14px; text-align:center; }
.vlog-foot a{ color: rgba(255,255,255,.9); text-decoration:none; }
.vlog-two{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .vlog-two{ grid-template-columns: 1fr; }
}
.vlog-player, .vlog-list{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px;
}
.vlog-player-title{
  font-weight:900;
  margin:4px 2px 10px;
}
video{ width:100%; border-radius:14px; background:#000; }
.vlog-list h3{ margin:6px 6px 12px; }
.vlog-list-item{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  margin-bottom:10px;
}
.vlog-list-item:hover{ background: rgba(0,0,0,.18); }
.vlog-list-item.active{
  border-color: rgba(242,193,0,.45);
  background: rgba(242,193,0,.14);
}
.vlog-mini{
  display:block;
  font-size:12px;
  opacity:.8;
  margin-top:4px;
}

/* Player kutusu: ekran yüksekliğine göre taşmasın */
.vlog-player video{
  width: 100%;
  height: min(72vh, 720px);
  border-radius: 14px;
  background: #000;
  object-fit: contain;   /* kırpma yok, tamamı görünür */
  display: block;
  margin: 0 auto;
}

/* Mobilde daha iyi */
@media (max-width: 900px){
  .vlog-player video{
    height: min(65vh, 620px);
  }
}

/* Sağ panel uzun olursa sadece sağ taraf scroll */
.vlog-list{
  max-height: calc(100vh - 140px);
  overflow: auto;
}

/* Accordion */
.vlog-acc{ display:block; }
.vlog-acc-item{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
}
.vlog-acc-sum{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
}

.vlog-acc-sum::-webkit-details-marker{ display:none; }
.vlog-acc-title{
  font-weight:800;
  font-size:14px;
  line-height:1.25;
  opacity:.95;
}
.vlog-acc-count{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  color: var(--sari);
  border:1px solid rgba(242,193,0,.35);
  background: rgba(242,193,0,.12);
  flex:0 0 auto;
}
.vlog-acc-body{
  padding:10px 10px 2px;
  border-top:1px solid rgba(255,255,255,.08);
}
/* ================================
   VIDEO FILIGRAN (SAĞ ÜST)
   ================================ */
.vlog-video-wrap{
  position: relative;
}

.vlog-video-wrap::after{
  content: attr(data-watermark);
  position: absolute;

  /* ORTADA ama biraz AŞAĞIDA */
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 10;

  padding: 8px 14px;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 900;
  letter-spacing: .6px;

  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);

  pointer-events: none;
}

/* ================================
   VIDEO FILIGRAN (FULLSCREEN UYUMLU)
   ================================ */
.vlog-video-wrap{
  position: relative;
}

/* Filigran yazısı */
.vlog-watermark{
  position: absolute;
  top: 70%;                 /* ortadan aşağı */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;

  padding: 12px 20px;
  border-radius: 14px;

  font-size: 20px;
  font-weight: 900;
  letter-spacing: .8px;

  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);

  pointer-events: none;     /* tıklanamaz */
  user-select: none;
}

/* FULLSCREEN DURUMUNDA DA GÖRÜNSÜN */
.vlog-video-wrap:fullscreen .vlog-watermark,
.vlog-video-wrap:-webkit-full-screen .vlog-watermark,
.vlog-video-wrap:-moz-full-screen .vlog-watermark,
.vlog-video-wrap:-ms-fullscreen .vlog-watermark{
  position: fixed;          /* fullscreen katmanına sabitle */
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}