: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);
}


/* ================================
   TOPBAR LOGO
   ================================ */
.vlog-logo{
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.vlog-logo img{
  height: 90px;            /* masaüstü için ideal */
  width: auto;
  display: block;
}

@media (max-width: 900px){
  .vlog-logo img{
    height: 36px;          /* mobilde küçülür */
  }
}

/* ================================
   MOBIL TOPBAR DÜZELTME
   ================================ */
@media (max-width: 620px){

  .vlog-topbar{
    flex-wrap: wrap;              /* 2 satıra izin ver */
    gap: 10px;
    padding: 12px 12px;
  }

  .vlog-topbar-left{
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .vlog-topbar-right{
    width: 100%;
    justify-content: flex-end;     /* butonlar sağda */
    gap: 8px;
  }

  /* logo mobilde daha büyük ve dengeli */
  .vlog-logo img{
    height: 44px !important;       /* senin 36px küçülüyor, burada dengeliyoruz */
  }

  /* badge biraz küçülsün */
  .vlog-badge{
    padding: 6px 10px;
    font-size: 14px;
  }

  /* butonlar sıkışmasın */
  .vlog-btn{
    padding: 8px 10px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* grid zaten 1 kolon ama padding’i azaltalım */
  .vlog-wrap{
    padding: 12px;
  }
}