/**
 * @file video-style.css
 * Gaya khusus untuk fungsionalitas video player dinamis.
 * - Mobile: Sticky player.
 * - Desktop: Picture-in-Picture (PiP).
 */

/* --- Keyframes untuk Animasi --- */
@keyframes headstick-slide-down {
  from {
    transform: translateY(-100%); /* Mulai dari posisi tersembunyi di atas */
  }
  to {
    transform: translateY(0); /* Selesai di posisi normalnya */
  }
}

/* --- Gaya Global untuk HeadStick --- */
/* * Animasi ini berlaku saat headStick menjadi sticky di halaman non-video.
 * Class '.sticky' ditambahkan oleh JavaScript saat pengguna menggulir (on scroll),
 * sehingga animasi ini hanya terpicu oleh aksi scroll.
 */
#headStick.sticky {
    animation: headstick-slide-down 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}


/* --- Gaya untuk Mobile (Layar <= 768px) --- */
@media (max-width: 991px) {
    /* Container untuk menyatukan video dan head-stick */
    .video-sticky-wrapper {
        position: fixed !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        /* Properti 'top' akan diatur oleh video-logic.js */
    }

    /* * PERBAIKAN AGRESIF: 
     * Aturan ini secara paksa me-reset semua item di dalam wrapper 
     * untuk menghilangkan semua celah (margin, padding, border).
    */
    .video-sticky-wrapper > * {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .video-sticky-wrapper .post-image.post-video {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }

    .video-sticky-wrapper #headStick {
        position: relative !important;
        width: 100% !important;
        background-color: #ffffff;
        border-radius: 10px!important;
    }
      body.video-page div.bn-inner[data-space-name="immersive"] {
        display: none;
        
    }
}

/* --- Gaya untuk Desktop (Layar > 768px) --- */
@media (min-width: 991px) {
    /* * PERBAIKAN FINAL DESKTOP: Mengatur ulang layout menggunakan 'order'.
     * Metode ini lebih andal daripada 'column-reverse'.
     */
     
     
       body.video-page div.bn-inner[data-space-name="post_top"]{
        display: none;
        
    }
    
          body.video-page div.bn-inner[data-space-name="immersive"]{
        display: none;
        
    }
    
    body.video-page .post-main {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Video Player akan selalu menjadi item pertama (paling atas) */
    body.video-page .post-image.post-video {
        order: 1;
    }

    /* Semua konten lainnya akan menjadi item kedua (di bawah video) */
    body.video-page .post-content {
        order: 2;
    }
    
    /* Memastikan iframe juga memiliki sudut melengkung */
    body.video-page .post-image.post-video iframe {
        border-radius: 12px!important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Gaya untuk video saat dalam mode Picture-in-Picture */
    .post-image.post-video.pip-mode {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 380px !important; /* Lebar PiP */
        max-width: 90vw !important; /* Maksimal 90% dari lebar layar */
        height: auto !important;
        z-index: 9999 !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.1);
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    /* Placeholder untuk mencegah layout melompat */
    .video-placeholder {
        display: none;
        width: 100%;
    }

    /* Tombol Close untuk PiP */
    .pip-close-button {
        position: absolute;
        top: -12px; /* Diletakkan sedikit di luar atas */
        right: -12px; /* Diletakkan sedikit di luar kanan */
        width: 32px;
        height: 32px;
        background-color: rgba(20, 20, 20, 0.8);
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        font-size: 22px;
        line-height: 28px; /* Disesuaikan untuk centering vertikal */
        text-align: center;
        cursor: pointer;
        z-index: 10;
        opacity: 0; /* Tersembunyi secara default */
        transform: scale(0.8); /* Mulai dari kecil */
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

    /* Tampilkan & animasikan tombol saat hover di atas video PiP */
    .post-image.post-video.pip-mode:hover .pip-close-button {
        opacity: 1;
        transform: scale(1); /* Membesar ke ukuran normal */
    }

    /* Efek saat tombol di-hover */
    .pip-close-button:hover {
        background-color: #ff3b30; /* Warna merah yang lebih modern */
        transform: scale(1.1); /* Sedikit membesar lagi */
    }
}