/* ====== FRAME (seperti iframe) ====== */
.reels-frame22{
  /* ukuran responsive ala HP, tapi enak juga di desktop */
  width: min(100%, 420px);
  aspect-ratio: 9 / 16;           /* proporsi layar HP */
  max-height: 90vh;               /* biar tidak melebihi layar */
  margin: 0 auto;                 /* center di desktop */
  border-radius: 24px;            /* efek terpotong */
  overflow: hidden;               /* penting: memotong isi */
  background: #000;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
}

/* ====== Isi yang discroll ====== */
.video-feed22{
  height: 100%;                   /* penuh di dalam frame */
  overflow-y: auto;               /* scroll vertikal */
  scroll-snap-type: y mandatory;  /* snap per video */
  -webkit-overflow-scrolling: touch; /* smooth di iOS */
}

/* Satu video = satu layar penuh di dalam frame */
.video-card22{
  height: 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Video memenuhi frame */
.video-player22{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay info */
.video-info22{
  position: absolute;
  left: 16px; right: 16px; bottom: 72px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
    background: rgba(0,0,0,0.35);
  padding: 8px 12px;
  border-radius: 12px;
  backdrop-filter: blur(6px); /* efek kaca */

}


.video-title22{ font-weight: 700; font-size: 18px; margin: 0 0 4px }
.video-views22{ font-size: 13px; opacity: .9; }

/* ====== Tampilan Desktop (layar lebar) ====== */
@media (min-width: 1024px) {
  .reels-frame22 {
    width: 800px;                 /* lebih lebar dari versi mobile */
    height: 90vh;                 /* penuh tinggi layar */
    aspect-ratio: auto;           /* biar bebas, tidak 9:16 */
    display: flex;
    flex-direction: row;          /* pisahkan video dan info */
    border-radius: 20px;
  }

  .video-feed22 {
    flex: 2;                      /* area video lebih besar */
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }

  .video-card22 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .video-player22 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-right: 1px solid rgba(255,255,255,.1);
  }

  /* Info video pindah ke sisi kanan */
  .video-info22 {
    position: static;             /* tidak lagi absolute */
    flex: 1;                      /* sisi kanan */
    color: #fff;
    text-shadow: none;
    background: rgba(0,0,0,0.6);
    padding: 20px;
    border-radius: 0;
    backdrop-filter: none;
    overflow-y: auto;             /* scroll kalau kepanjangan */
  }

  .video-title22 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .video-views22 {
    font-size: 14px;
    opacity: 0.85;
  }
}


/* Optional: kecilkan di layar sangat kecil */
@media (max-width: 360px){
  .reels-frame22{ border-radius: 18px; }
  .video-title22{ font-size: 16px; }
  .video-views22{ font-size: 12px; }
}