/* ==========================================
   BROTUBE - YOUTUBE TARZI ANA SAYFA
   ========================================== */

.bro-home-layout{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:24px;
  width:100%;
}

/* SOL MENÜ */
.bro-sidebar{
  position:sticky;
  top:90px;
  align-self:start;

  display:flex;
  flex-direction:column;
  gap:7px;

  padding:8px;
  border-radius:16px;

  background:#090909;
  border:1px solid #1e1e1e;
}

.bro-side-btn{
  width:100%;
  border:0;
  border-radius:12px;

  padding:13px 14px;

  background:transparent;
  color:#e8e8e8;

  text-align:left;
  font-weight:800;
  font-size:13px;

  cursor:pointer;

  transition:.18s ease;
}

.bro-side-btn:hover{
  background:#181818;
}

.bro-side-btn.active{
  background:#f10b1c;
  color:#fff;
}

.bro-home-main{
  min-width:0;
}

/* KATEGORİLER */
.bro-home-chips{
  display:flex;
  gap:9px;

  overflow-x:auto;
  scrollbar-width:none;

  margin:3px 0 18px;
  padding-bottom:3px;
}

.bro-home-chips::-webkit-scrollbar{
  display:none;
}

.bro-chip{
  flex:0 0 auto;

  border:1px solid #282828;
  border-radius:10px;

  padding:9px 15px;

  background:#171717;
  color:#fff;

  font-size:12px;
  font-weight:800;

  cursor:pointer;
}

.bro-chip.active{
  background:#fff;
  color:#050505;
  border-color:#fff;
}

/* BAŞLIK */
.bro-home-title{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:0 0 14px;
}

.bro-home-title h2{
  margin:0;
  color:#fff;
  font-size:21px;
}

/* YOUTUBE TARZI GRID */
.bro-home-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 16px;
}

.bro-home-card{
  min-width:0;
  cursor:pointer;
}

.bro-home-thumb{
  position:relative;

  width:100%;
  aspect-ratio:16/9;

  overflow:hidden;
  border-radius:13px;

  background:#111;
}

.bro-home-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;

  transition:transform .22s ease;
}

.bro-home-card:hover .bro-home-thumb img{
  transform:scale(1.025);
}

.bro-home-play{
  position:absolute;
  left:50%;
  top:50%;

  transform:translate(-50%,-50%) scale(.85);

  width:48px;
  height:48px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.75);
  color:#fff;

  font-size:21px;

  opacity:0;
  transition:.18s ease;
}

.bro-home-card:hover .bro-home-play{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.bro-home-info{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:11px;

  padding:11px 3px 0;
}

.bro-home-avatar{
  width:38px;
  height:38px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(135deg,#f10b1c,#4b0008);
  color:#fff;

  font-size:12px;
  font-weight:900;
}

.bro-home-text{
  min-width:0;
}

.bro-home-name{
  color:#f5f5f5;

  font-size:14px;
  font-weight:800;
  line-height:1.3;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;
}

.bro-home-channel{
  margin-top:5px;

  color:#999;
  font-size:12px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bro-home-loading,
.bro-home-empty{
  grid-column:1/-1;

  padding:50px 10px;

  text-align:center;

  color:#888;
  font-size:15px;
}

/* PC'de ana container biraz daha geniş */
@media(min-width:1200px){
  .container{
    max-width:1450px !important;
  }

  .bro-home-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* LAPTOP */
@media(min-width:800px) and (max-width:1199px){
  .bro-home-layout{
    grid-template-columns:155px minmax(0,1fr);
    gap:16px;
  }

  .bro-home-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .bro-side-btn{
    font-size:12px;
    padding:12px 10px;
  }
}

/* MOBİL */
@media(max-width:799px){

  .bro-home-layout{
    display:block;
  }

  .bro-sidebar{
    display:none;
  }

  .bro-home-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 9px;
  }

  .bro-home-name{
    font-size:12px;
  }

  .bro-home-channel{
    font-size:11px;
  }

  .bro-home-info{
    grid-template-columns:30px minmax(0,1fr);
    gap:7px;
  }

  .bro-home-avatar{
    width:30px;
    height:30px;
    font-size:9px;
  }

  .bro-home-thumb{
    border-radius:9px;
  }
}

@media(max-width:480px){
  .bro-home-grid{
    grid-template-columns:1fr;
  }

  .bro-home-name{
    font-size:14px;
  }
}

/* Ana sayfa açıldığında eski status'u sakla */
body.bro-home-open #status{
  display:none !important;
}


/* ==========================================
   BROTUBE VIDEO SÜRE ETİKETİ
   ========================================== */

.bro-home-duration{
  position:absolute;
  right:6px;
  bottom:6px;

  display:none;

  padding:3px 5px;
  border-radius:5px;

  background:rgba(0,0,0,.82);
  color:#fff;

  font-size:12px;
  font-weight:800;
  line-height:1;

  letter-spacing:.1px;

  pointer-events:none;
  z-index:4;
}

@media(max-width:799px){
  .bro-home-duration{
    right:5px;
    bottom:5px;
    padding:3px 4px;
    font-size:11px;
  }
}



/* =========================================================
   BROTUBE FULL KEŞFET - FINAL
   ========================================================= */

/* Sayfanın aşağı doğru normal uzamasına izin ver */
html,
body{
  min-height:100% !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}


/* BROTUBE ana içerik genişliği */
body.bro-home-open .container{
  width:100% !important;
  max-width:1600px !important;

  margin:0 auto !important;

  padding-left:24px !important;
  padding-right:24px !important;

  /* alttaki kayan logo şeridi için boşluk */
  padding-bottom:90px !important;
}


/* Ana sayfa */
body.bro-home-open .bro-home-layout{
  width:100% !important;

  grid-template-columns:200px minmax(0,1fr) !important;
  gap:24px !important;
}


/* Video alanı */
body.bro-home-open .bro-home-main{
  width:100% !important;
  min-width:0 !important;
}


/* Grid */
body.bro-home-open .bro-home-grid{
  width:100% !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:28px 16px !important;

  overflow:visible !important;
  max-height:none !important;
}


/* Video kartları */
body.bro-home-open .bro-home-card{
  width:100% !important;
}


/* ---------------------------------------------------------
   GÜVENİLİR SİTELER
   Artık fixed DEĞİL.
   Video listesinin altında normal akışta.
   --------------------------------------------------------- */

.trusted-banner{
  position:relative !important;

  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;

  width:100% !important;
  max-width:none !important;

  height:auto !important;
  min-height:0 !important;

  margin:45px auto 25px !important;
  padding:0 !important;

  background:#000 !important;

  overflow:hidden !important;

  z-index:1 !important;

  display:block !important;
}


.trusted-banner a{
  display:block !important;

  width:100% !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;
}


.trusted-banner img{
  display:block !important;

  width:100% !important;
  height:auto !important;

  max-width:100% !important;
  max-height:none !important;

  object-fit:contain !important;

  margin:0 auto !important;
  padding:0 !important;
}


/* Alttaki kayan logolar sabit kalacak */
.logo-ticker{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  z-index:9999 !important;
}


/* =========================================================
   GENİŞ PC
   ========================================================= */

@media(min-width:1500px){

  body.bro-home-open .container{
    max-width:1800px !important;
  }

  body.bro-home-open .bro-home-grid{
    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   NORMAL PC / LAPTOP
   ========================================================= */

@media(min-width:900px) and (max-width:1499px){

  body.bro-home-open .container{
    max-width:1450px !important;
  }

  body.bro-home-open .bro-home-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(min-width:700px) and (max-width:899px){

  body.bro-home-open .container{
    width:100% !important;
    max-width:none !important;

    padding-left:14px !important;
    padding-right:14px !important;
    padding-bottom:75px !important;
  }

  body.bro-home-open .bro-home-layout{
    display:block !important;
  }

  body.bro-home-open .bro-sidebar{
    display:none !important;
  }

  body.bro-home-open .bro-home-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    gap:22px 12px !important;
  }

}


/* =========================================================
   TELEFON
   ========================================================= */

@media(max-width:699px){

  body.bro-home-open .container{
    width:100% !important;
    max-width:none !important;

    padding-left:10px !important;
    padding-right:10px !important;
    padding-bottom:70px !important;
  }

  body.bro-home-open .bro-home-layout{
    display:block !important;
  }

  body.bro-home-open .bro-sidebar{
    display:none !important;
  }

  body.bro-home-open .bro-home-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:20px 9px !important;
  }

  .trusted-banner{
    margin-top:30px !important;
    margin-bottom:15px !important;
  }

}


/* Küçük telefon */
@media(max-width:480px){

  body.bro-home-open .bro-home-grid{
    grid-template-columns:1fr !important;
  }

}


/* =====================================================
   BROTUBE TAM FILMLER - YOUTUBE TARZI FINAL
   ===================================================== */

/* PC */
@media (min-width:1200px){

  body.bro-home-open #broHomeGrid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:26px 18px !important;
    align-items:start !important;
  }

}

/* Laptop */
@media (min-width:800px) and (max-width:1199px){

  body.bro-home-open #broHomeGrid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:22px 15px !important;
  }

}

/* FILM KARTI */
body.bro-home-open .bro-movie-card{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  overflow:visible !important;
  cursor:pointer !important;
}

/* 16:9 YATAY KAPAK */
body.bro-home-open .bro-movie-thumb{
  position:relative !important;

  display:block !important;

  width:100% !important;
  height:auto !important;

  aspect-ratio:16 / 9 !important;

  min-height:0 !important;
  max-height:none !important;

  overflow:hidden !important;

  border-radius:12px !important;

  background:#111 !important;
}

/* RESIM */
body.bro-home-open .bro-movie-thumb img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  min-width:0 !important;
  min-height:0 !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:cover !important;
  object-position:center center !important;

  margin:0 !important;
  padding:0 !important;

  transform:none !important;
}

/* SÜRE - SAĞ ALT */
body.bro-home-open .bro-movie-duration,
body.bro-home-open .bro-home-duration{
  display:block !important;

  position:absolute !important;
  right:7px !important;
  bottom:7px !important;

  z-index:10 !important;

  width:auto !important;
  height:auto !important;

  padding:4px 6px !important;

  border-radius:5px !important;

  background:rgba(0,0,0,.88) !important;
  color:#fff !important;

  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;

  pointer-events:none !important;
}

/* FILM BILGISI */
body.bro-home-open .bro-movie-info{
  display:block !important;
  padding:10px 3px 5px !important;
}

body.bro-home-open .bro-movie-info h3{
  margin:0 0 5px !important;

  color:#fff !important;

  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.35 !important;

  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;

  overflow:hidden !important;
}

body.bro-home-open .bro-movie-info p{
  margin:0 !important;
  color:#999 !important;
  font-size:12px !important;
}


/* TABLET */
@media (min-width:600px) and (max-width:799px){

  body.bro-home-open #broHomeGrid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 12px !important;
  }

}


/* TELEFON */
@media (max-width:599px){

  body.bro-home-open #broHomeGrid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  body.bro-home-open .bro-movie-thumb{
    aspect-ratio:16 / 9 !important;
  }

}


/* =========================================
   BROTUBE MOBIL - TEK SUTUN + NORMAL SCROLL
   ========================================= */

@media (max-width:699px){

  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.bro-home-open{
    overflow-y:auto !important;
  }

  body.bro-home-open .container{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }

  body.bro-home-open .bro-home-layout,
  body.bro-home-open .bro-home-main,
  body.bro-home-open #broHomeSection{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body.bro-home-open #broHomeGrid,
  body.bro-home-open .bro-home-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;

    height:auto !important;
    max-height:none !important;

    overflow:visible !important;
  }

  body.bro-home-open .bro-home-card,
  body.bro-home-open .bro-movie-card{
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
  }

  body.bro-home-open .bro-home-thumb,
  body.bro-home-open .bro-movie-thumb{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
  }

}


/* =========================================
   BROTUBE PC - TAM SAYFA SCROLL FIX
   ========================================= */

@media (min-width:700px){

  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.bro-home-open{
    height:auto !important;
    min-height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.bro-home-open .container{
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #broHomeSection{
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .bro-home-layout{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .bro-home-main{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #broHomeGrid,
  .bro-home-grid{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

}


/* =========================================================
   BROTUBE PREMIUM 3D BUTTON SYSTEM
   ========================================================= */

/* ÜST KATEGORİ BUTONLARI */
.bro-chip{
  position:relative;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(48,48,54,.98) 0%,
      rgba(28,28,33,.98) 52%,
      rgba(16,16,19,.98) 100%
    ) !important;

  color:#f8f8f8 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 5px 10px rgba(0,0,0,.35),
    0 1px 2px rgba(255,255,255,.04) !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.85);

  font-weight:700 !important;

  transform:translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}


/* ÜST PARLAK CAM EFEKTİ */
.bro-chip::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:2px;
  height:45%;

  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.03)
    );

  pointer-events:none;
}


/* HOVER */
@media (hover:hover){

  .bro-chip:hover{
    transform:translateY(-2px);

    border-color:rgba(255,255,255,.26) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 0 rgba(0,0,0,.65),
      0 9px 18px rgba(0,0,0,.45),
      0 0 10px rgba(255,255,255,.04) !important;

    filter:brightness(1.12);
  }

}


/* BASILMA EFEKTİ */
.bro-chip:active{
  transform:translateY(2px) scale(.985);

  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.32) !important;
}


/* AKTİF KATEGORİ */
.bro-chip.active{
  color:#fff !important;

  border-color:
    rgba(255,80,80,.72) !important;

  background:
    linear-gradient(
      180deg,
      #ff3e3e 0%,
      #ee1515 45%,
      #ad0000 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -3px 0 rgba(80,0,0,.55),
    0 6px 16px rgba(255,0,0,.34),
    0 0 18px rgba(255,0,0,.17) !important;

  text-shadow:
    0 1px 2px rgba(70,0,0,.8);
}


/* =========================================================
   SOL MENÜ PREMIUM 3D
   ========================================================= */

.bro-side-btn{
  position:relative;

  border:
    1px solid rgba(255,255,255,.09) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(37,37,43,.96),
      rgba(17,17,21,.98)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.58),
    0 5px 12px rgba(0,0,0,.3);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease;
}


/* SOL MENÜ CAM PARLAKLIĞI */
.bro-side-btn::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:2px;
  height:42%;

  border-radius:10px;

  background:
    linear-gradient(
      rgba(255,255,255,.10),
      rgba(255,255,255,0)
    );

  pointer-events:none;
}


@media (hover:hover){

  .bro-side-btn:hover{
    transform:translateX(3px);

    filter:brightness(1.14);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -2px 0 rgba(0,0,0,.58),
      0 7px 14px rgba(0,0,0,.38);
  }

}


.bro-side-btn:active{
  transform:translateX(2px) translateY(2px);

  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.6),
    0 2px 4px rgba(0,0,0,.28);
}


.bro-side-btn.active{
  background:
    linear-gradient(
      180deg,
      #ff3d3d,
      #e91111 48%,
      #a70000
    ) !important;

  border-color:
    rgba(255,100,100,.7) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -3px 0 rgba(90,0,0,.55),
    0 6px 15px rgba(255,0,0,.28) !important;
}


/* =========================================================
   BUTON İKONLARINA 3D HİS
   ========================================================= */

.bro-chip,
.bro-side-btn{
  -webkit-font-smoothing:antialiased;
}

.bro-chip{
  letter-spacing:.1px;
}


/* Emoji / simgeleri hafif öne çıkar */
.bro-chip,
.bro-side-btn{
  text-shadow:
    0 1px 1px rgba(0,0,0,.95),
    0 0 5px rgba(255,255,255,.04);
}


/* =========================================================
   ANA KARTLAR DA HAFİF PREMIUM OLSUN
   ========================================================= */

.bro-home-card{
  border:
    1px solid rgba(255,255,255,.08) !important;

  border-radius:
    17px !important;

  background:
    linear-gradient(
      180deg,
      rgba(30,30,35,.98),
      rgba(15,15,18,.98)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.28);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


@media (hover:hover){

  .bro-home-card:hover{
    transform:
      translateY(-4px);

    border-color:
      rgba(255,255,255,.16) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 13px 28px rgba(0,0,0,.40);
  }

}


/* Thumbnail biraz daha canlı */
.bro-home-thumb img{
  filter:
    saturate(1.05)
    contrast(1.035);
}


/* PLAY yuvarlağı */
.bro-home-play{
  border:
    1px solid rgba(255,255,255,.28) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,52,52,.96),
      rgba(180,0,0,.96)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(80,0,0,.55),
    0 4px 11px rgba(0,0,0,.45),
    0 0 13px rgba(255,0,0,.28);

  text-shadow:
    0 1px 2px rgba(0,0,0,.7);
}


/* CANLI badge */
.bro-live-badge{
  border:
    1px solid rgba(255,255,255,.25) !important;

  background:
    linear-gradient(
      180deg,
      #ff4242,
      #ca0000
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 4px 10px rgba(0,0,0,.38),
    0 0 12px rgba(255,0,0,.24);

  font-weight:800 !important;
}


/* =========================================================
   MOBİL DOKUNMA OPTİMİZASYONU
   ========================================================= */

@media (max-width:699px){

  .bro-chip{
    border-radius:13px !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -2px 0 rgba(0,0,0,.55),
      0 4px 9px rgba(0,0,0,.30) !important;
  }

  .bro-side-btn{
    border-radius:13px !important;
  }

  .bro-home-card{
    border-radius:16px !important;
  }

}