/* ========================================================== HANNANET MOVIE HOME MOBILE - LIGHT SLIDER ========================================================== */ @media (max-width: 767px) { .mobile-home { width: 100%; max-width: 100%; overflow-x: hidden; padding-bottom: 80px; box-sizing: border-box; } /* SECTION */ .mobile-home .mobile-section { width: 100%; margin: 0; padding: 0; box-sizing: border-box; } /* HEADER */ .mobile-home .mobile-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 14px; margin: 24px 0 12px; box-sizing: border-box; } .mobile-home .mobile-section-title { margin: 0; padding: 0; font-size: 17px; line-height: 1.2; font-weight: 700; color: #fff; } .mobile-home .mobile-section-title { position: relative; padding-left: 8px; } .mobile-home .mobile-section-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: #e50914; border-radius: 2px; } .mobile-home .mobile-view-all { margin: 0; padding: 0; font-size: 11px; font-weight: 600; color: #fff; text-decoration: none; } /* ====================================================== SLIDER ====================================================== */ #trendingSlider, #latestSlider { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; padding: 0 14px !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } #trendingSlider::-webkit-scrollbar, #latestSlider::-webkit-scrollbar { display: none; } /* ====================================================== CARD 3 POSTER DALAM LAYAR ====================================================== */ #trendingSlider .mobile-card, #latestSlider .mobile-card, #recommendedSlider .mobile-card, #horrorSlider .mobile-card, #actionSlider .mobile-card, #comedySlider .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; overflow: hidden !important; background: transparent !important; } /* ====================================================== POSTER ====================================================== */ #trendingSlider .mobile-card img, #latestSlider .mobile-card img, #recommendedSlider .mobile-card img, #horrorSlider .mobile-card img, #actionSlider .mobile-card img, #comedySlider .mobile-card img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; border-radius: 7px !important; } /* ====================================================== INFO ====================================================== */ #trendingSlider .mobile-card-info, #latestSlider .mobile-card-info, #recommendedSlider .mobile-card-info, #horrorSlider .mobile-card-info, #actionSlider .mobile-card-info, #comedySlider .mobile-card-info { width: 100% !important; padding: 5px 1px 4px !important; margin: 0 !important; box-sizing: border-box !important; } /* ====================================================== TITLE ====================================================== */ #trendingSlider .mobile-card-title, #latestSlider .mobile-card-title, #recommendedSlider .mobile-card-title, #horrorSlider .mobile-card-title, #actionSlider .mobile-card-title, #comedySlider .mobile-card-title { margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1.25 !important; font-weight: 600 !important; color: #fff !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } /* ====================================================== META ====================================================== */ #trendingSlider .mobile-card-meta, #latestSlider .mobile-card-meta, #recommendedSlider .mobile-card-meta, #horrorSlider .mobile-card-meta, #actionSlider .mobile-card-meta, #comedySlider .mobile-card-meta { margin-top: 4px !important; font-size: 10px !important; line-height: 1.2 !important; color: #ffd400 !important; white-space: nowrap !important; } /* ====================================================== TRENDING BADGE ====================================================== */ #trendingSlider .trending-poster-wrap { position: relative; width: 100%; } #trendingSlider .trending-top-badge { position: absolute; top: 6px; left: 6px; padding: 4px 6px; border-radius: 5px; background: #e50914; color: #fff; font-size: 8px; font-weight: 700; line-height: 1; z-index: 2; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width: 380px) { .mobile-home .mobile-section-header { padding-left: 11px; padding-right: 11px; margin-top: 22px; margin-bottom: 10px; } .mobile-home .mobile-section-title { font-size: 16px; } #trendingSlider, #latestSlider, #recommendedSlider { gap: 8px !important; padding-left: 11px !important; padding-right: 11px !important; } #trendingSlider .mobile-card, #latestSlider .mobile-card, #recommendedSlider .mobile-card, #horrorSlider .mobile-card, #actionSlider .mobile-card, #comedySlider .mobile-card { flex-basis: 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; } } /* ========================================================== ANDROID SCROLL FIX HOME PAGE JANGAN KUNCI GESTURE VERTIKAL ========================================================== */ @media (max-width: 767px) { html, body { scroll-behavior: auto !important; overscroll-behavior-y: auto !important; } .mobile-home { overflow-x: hidden !important; overflow-y: visible !important; touch-action: auto !important; } #trendingSlider, #latestSlider, #recommendedSlider { touch-action: auto !important; overscroll-behavior: auto !important; scroll-snap-type: none !important; scroll-behavior: auto !important; } #trendingSlider .mobile-card, #latestSlider .mobile-card, #recommendedSlider .mobile-card, #horrorSlider .mobile-card, #actionSlider .mobile-card, #comedySlider .mobile-card { touch-action: auto !important; scroll-snap-align: none !important; scroll-snap-stop: normal !important; } } /* ========================================================== QUALITY LABEL — FULL HD KUNING ========================================================== */ @media (max-width: 767px) { #trendingSlider .trending-quality, #latestSlider .trending-quality, #recommendedSlider .trending-quality, #horrorSlider .trending-quality, #actionSlider .trending-quality, #comedySlider .trending-quality { color: #ffd400 !important; font-weight: 600 !important; } } /* ========================================================== RECOMMENDED — POSISI SAMA PERSIS DENGAN SLIDER ATAS ========================================================== */ @media (max-width: 767px) { #recommendedSlider { margin-left: 0 !important; margin-right: 0 !important; padding-left: 11px !important; padding-right: 11px !important; box-sizing: border-box !important; } #recommendedSlider .mobile-card { margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================== HNTV HOME META ALL YELLOW FINAL Tahun + Dot + Quality = KUNING ========================================================== */ @media (max-width:767px){ #trendingSlider .mobile-card-meta, #trendingSlider .mobile-card-meta *, #latestSlider .mobile-card-meta, #latestSlider .mobile-card-meta *, #recommendedSlider .mobile-card-meta, #recommendedSlider .mobile-card-meta *, #horrorSlider .mobile-card-meta, #horrorSlider .mobile-card-meta *, #actionSlider .mobile-card-meta, #actionSlider .mobile-card-meta *, #comedySlider .mobile-card-meta, #comedySlider .mobile-card-meta *{ color:#ffd400 !important; } /* CLASS KHUSUS TAHUN */ #trendingSlider .trending-year, #latestSlider .trending-year, #recommendedSlider .trending-year, #horrorSlider .trending-year, #actionSlider .trending-year, #comedySlider .trending-year{ color:#ffd400 !important; } /* CLASS KHUSUS DOT */ #trendingSlider .trending-meta-separator, #latestSlider .trending-meta-separator, #recommendedSlider .trending-meta-separator, #horrorSlider .trending-meta-separator, #actionSlider .trending-meta-separator, #comedySlider .trending-meta-separator{ color:#ffd400 !important; } /* CLASS KHUSUS QUALITY */ #trendingSlider .trending-quality, #latestSlider .trending-quality, #recommendedSlider .trending-quality, #horrorSlider .trending-quality, #actionSlider .trending-quality, #comedySlider .trending-quality{ color:#ffd400 !important; } } /* ========================================================== HNTV HOME META ABSOLUTE YELLOW FINAL ---------------------------------------------------------- SEMUA CARD HOME Tahun + Dot + Full HD = KUNING Judul tetap PUTIH ========================================================== */ @media (max-width:767px){ /* META UTAMA */ #trendingSlider .mobile-card-meta, #latestSlider .mobile-card-meta, #recommendedSlider .mobile-card-meta, #horrorSlider .mobile-card-meta, #actionSlider .mobile-card-meta, #comedySlider .mobile-card-meta{ color:#ffd400 !important; } /* TAHUN */ #trendingSlider .mobile-card-meta .trending-year, #latestSlider .mobile-card-meta .trending-year, #recommendedSlider .mobile-card-meta .trending-year, #horrorSlider .mobile-card-meta .trending-year, #actionSlider .mobile-card-meta .trending-year, #comedySlider .mobile-card-meta .trending-year{ color:#ffd400 !important; } /* DOT */ #trendingSlider .mobile-card-meta .trending-meta-separator, #latestSlider .mobile-card-meta .trending-meta-separator, #recommendedSlider .mobile-card-meta .trending-meta-separator, #horrorSlider .mobile-card-meta .trending-meta-separator, #actionSlider .mobile-card-meta .trending-meta-separator, #comedySlider .mobile-card-meta .trending-meta-separator{ color:#ffd400 !important; } /* FULL HD / QUALITY */ #trendingSlider .mobile-card-meta .trending-quality, #latestSlider .mobile-card-meta .trending-quality, #recommendedSlider .mobile-card-meta .trending-quality, #horrorSlider .mobile-card-meta .trending-quality, #actionSlider .mobile-card-meta .trending-quality, #comedySlider .mobile-card-meta .trending-quality{ color:#ffd400 !important; } /* SEMUA ELEMEN DI DALAM META */ #trendingSlider .mobile-card-meta span, #latestSlider .mobile-card-meta span, #recommendedSlider .mobile-card-meta span, #horrorSlider .mobile-card-meta span, #actionSlider .mobile-card-meta span, #comedySlider .mobile-card-meta span{ color:#ffd400 !important; } } /* ========================================================== HNFLIX MOBILE HOME — HERO POSITION FINAL HEADER OVERLAY, HERO TETAP DARI POSISI 0 ========================================================== */ @media (max-width:767px){ main.mobile-home{ padding-top:0 !important; margin-top:0 !important; } main.mobile-home .mobile-hero{ margin-top:0 !important; padding-top:0 !important; } } /* ========================================================== HNFLIX MOBILE HOME — HEADER OVER HERO FINAL HERO BENAR-BENAR BERADA DI BELAKANG HEADER ========================================================== */ @media (max-width:767px){ /* HEADER MENJADI OVERLAY */ body:has(main.mobile-home) .mobile-header{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:56px !important; min-height:56px !important; max-height:56px !important; margin:0 !important; padding:0 8px !important; box-sizing:border-box !important; z-index:99999 !important; } /* HOME TIDAK MEMBERI RUANG UNTUK HEADER */ body:has(main.mobile-home) main.mobile-home{ position:relative !important; top:0 !important; margin:0 !important; padding:0 !important; } /* HERO DIMULAI DARI PALING ATAS */ body:has(main.mobile-home) main.mobile-home > .mobile-hero{ position:relative !important; top:0 !important; margin-top:0 !important; padding-top:0 !important; width:100% !important; z-index:1 !important; } /* HEADER DI ATAS GAMBAR HERO */ body:has(main.mobile-home) .mobile-header{ z-index:99999 !important; } } /* ========================================================== HNFLIX MOBILE HEADER — STICKY / TETAP SAAT SCROLL HEADER DIAM DI ATAS LAYAR ========================================================== */ @media (max-width:767px){ body:has(main.mobile-home) .mobile-header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:56px !important; min-height:56px !important; max-height:56px !important; margin:0 !important; z-index:99999 !important; } } /* ========================================================== HNFLIX MOBILE — HEADER STICKY / FIXED FINAL HEADER TETAP DI LAYAR SAAT HALAMAN DI-SCROLL ========================================================== */ @media (max-width:767px){ body:has(main.mobile-home) .mobile-header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:56px !important; min-height:56px !important; max-height:56px !important; margin:0 !important; padding:0 8px !important; box-sizing:border-box !important; z-index:999999 !important; transform:translate3d(0,0,0) !important; -webkit-transform:translate3d(0,0,0) !important; will-change:transform !important; } /* Pastikan tidak ada parent yang membuat fixed header berubah menjadi ikut scroll. */ body:has(main.mobile-home), body:has(main.mobile-home) html{ overflow-x:hidden !important; } /* Hero tetap berada di belakang header. */ body:has(main.mobile-home) main.mobile-home{ position:relative !important; margin:0 !important; padding:0 !important; } body:has(main.mobile-home) main.mobile-home > .mobile-hero{ position:relative !important; z-index:1 !important; margin-top:0 !important; } } /* ========================================================== HNFLIX MOBILE HOME — HEADER BENAR-BENAR TETAP FINAL FIX ========================================================== */ @media (max-width:767px){ /* * HEADER SELALU MENEMPEL PADA VIEWPORT * Tidak ikut scroll halaman. */ body:has(main.mobile-home) > .mobile-header, body:has(main.mobile-home) .mobile-header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:56px !important; min-height:56px !important; max-height:56px !important; margin:0 !important; padding:0 8px !important; box-sizing:border-box !important; z-index:2147483000 !important; /* * PENTING: * Jangan gunakan transform pada header fixed. */ transform:none !important; translate:none !important; /* * Header tidak boleh berubah posisi * karena class .scrolled. */ bottom:auto !important; } /* * CLASS SCROLLED TIDAK BOLEH MENGUBAH * POSISI HEADER. */ body:has(main.mobile-home) .mobile-header.scrolled{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; transform:none !important; translate:none !important; } /* * HOME TETAP DIMULAI DARI POSISI 0. */ body:has(main.mobile-home) main.mobile-home{ margin-top:0 !important; padding-top:0 !important; } /* * HERO TETAP BERADA DI BELAKANG HEADER. */ body:has(main.mobile-home) main.mobile-home .mobile-hero{ margin-top:0 !important; padding-top:0 !important; position:relative !important; z-index:1 !important; } } /* ========================================================== HEADER SCROLLED — KHUSUS HOME HANYA BOLEH MENGUBAH BACKGROUND BUKAN POSISI ========================================================== */ @media (max-width:767px){ body:has(main.mobile-home) .mobile-header.scrolled{ background:rgba(0,0,0,.65) !important; box-shadow:none !important; border-bottom:1px solid rgba(255,255,255,.04) !important; position:fixed !important; top:0 !important; } } /* ========================================================== HNFLIX MOBILE HOME — HEADER FIXED FINAL HEADER TETAP DI ATAS SAAT SCROLL HERO TETAP BERADA DI BELAKANG HEADER ========================================================== */ @media (max-width:767px){ body:has(main.mobile-home) .mobile-header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:56px !important; min-height:56px !important; max-height:56px !important; margin:0 !important; padding:0 8px !important; box-sizing:border-box !important; z-index:99999 !important; transform:none !important; } /* SCROLLED TIDAK BOLEH MENGGESER HEADER */ body:has(main.mobile-home) .mobile-header.scrolled{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; transform:none !important; } /* HOME TETAP MULAI DARI ATAS */ body:has(main.mobile-home) main.mobile-home{ margin:0 !important; padding-top:0 !important; } /* HERO TETAP DI BELAKANG HEADER */ body:has(main.mobile-home) main.mobile-home .mobile-hero{ margin-top:0 !important; padding-top:0 !important; position:relative !important; top:0 !important; z-index:1 !important; } } /* ========================================================== HNFLIX MOBILE — JARAK HERO KE MOVIE KHUSUS SECTION PERTAMA HERO & HEADER TIDAK DIUBAH ========================================================== */ @media (max-width:767px){ /* Beri ruang setelah hero sebelum movie pertama */ body:has(main.mobile-home) main.mobile-home .mobile-hero + .mobile-section{ margin-top:18px !important; } /* Pastikan judul section pertama tetap terlihat */ body:has(main.mobile-home) main.mobile-home .mobile-hero + .mobile-section .mobile-section-header{ position:relative !important; z-index:2 !important; } } /* ========================================================== HNFLIX MOBILE HOME — SECTION MOVIE PERTAMA TURUNKAN HANYA BAGIAN SETELAH HERO HEADER + HERO TIDAK DIUBAH ========================================================== */ @media (max-width:767px){ body:has(main.mobile-home) main.mobile-home .mobile-hero + .mobile-section{ margin-top:40px !important; position:relative !important; z-index:2 !important; } body:has(main.mobile-home) main.mobile-home .mobile-hero + .mobile-section .mobile-section-header{ position:relative !important; z-index:3 !important; } } /* ========================================================== HNFLIX MOBILE HOME — FINAL BOTTOM SPACE FIX Beri ruang agar poster terakhir tidak tertutup Bottom Nav ========================================================== */ @media (max-width:767px){ body:has(main.mobile-home) main.mobile-home{ padding-bottom:120px !important; } body:has(main.mobile-home){ padding-bottom:15px !important; } } /* ========================================================== HNFLIX HOME — BOTTOM NAV CLEARANCE ========================================================== */ @media (max-width: 767px) { body:has(main.mobile-home) main.mobile-home { padding-bottom: 30px !important; margin-bottom: 0 !important; } } /* ================================================== MOVIES PAGE - HEADER OFFSET MOBILE FINAL Hanya halaman Movies pada layar mobile Header tetap fixed 56px Desktop tidak diubah ================================================== */ @media (max-width: 767px) { main.mobile-home.mobile-movies-page { margin-top: 0 !important; padding-top: 56px !important; padding-bottom: 75px !important; box-sizing: border-box; transform: translateY(40px) !important; } } /* ========================================================== HNFLIX MOBILE — HOROR SLIDER FINAL FIX Card tetap horizontal, bukan 3 kolom. Card Lihat Semua hanya ada di header, bukan di slider. ========================================================== */ @media (max-width: 767px) { /* HOROR SLIDER */ #horrorSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; box-sizing: border-box !important; } /* CARD FILM — JANGAN 3 KOLOM */ #horrorSlider > .mobile-card.trending-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* POSTER */ #horrorSlider > .mobile-card.trending-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #horrorSlider > .mobile-card.trending-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* HILANGKAN CARD "LIHAT SEMUA" DI DALAM SLIDER */ #horrorSlider > .trending-view-all { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } /* PAKSA SEMUA ELEMEN VIEW-ALL DI SLIDER TIDAK MUNCUL */ #horrorSlider .trending-view-all, #horrorSlider .trending-view-all-box, #horrorSlider .trending-view-all-icon, #horrorSlider .trending-view-all-title, #horrorSlider .trending-view-all-arrow { display: none !important; } } /* ========================================================== HNFLIX MOBILE — AKSI SLIDER Hilangkan card "Lihat Semua" di dalam slider Aksi. Tombol Lihat Semua pada header tetap tampil. ========================================================== */ @media (max-width: 767px) { #actionSlider > .trending-view-all, #actionSlider .trending-view-all, #actionSlider .trending-view-all-box, #actionSlider .trending-view-all-icon, #actionSlider .trending-view-all-title, #actionSlider .trending-view-all-arrow { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== HNFLIX MOBILE — AKSI CARD SIZE Samakan ukuran card Aksi dengan Horor ========================================================== */ @media (max-width: 767px) { #actionSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; box-sizing: border-box !important; } #actionSlider > .mobile-card.trending-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #actionSlider > .mobile-card.trending-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #actionSlider > .mobile-card.trending-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* ========================================================== HNFLIX MOBILE — KOMEDI SLIDER FINAL Sama dengan Horor & Aksi ========================================================== */ @media (max-width: 767px) { /* KOMEDI SLIDER */ #comedySlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; box-sizing: border-box !important; } /* UKURAN CARD = HOROR & AKSI */ #comedySlider > .mobile-card.trending-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* POSTER = 122 x 183 */ #comedySlider > .mobile-card.trending-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #comedySlider > .mobile-card.trending-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* HILANGKAN CARD LIHAT SEMUA DI UJUNG SLIDER */ #comedySlider > .trending-view-all, #comedySlider .trending-view-all, #comedySlider .trending-view-all-box, #comedySlider .trending-view-all-icon, #comedySlider .trending-view-all-title, #comedySlider .trending-view-all-arrow { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== HNFLIX MOBILE — MUNGKIN KAMU SUKA SLIDER FINAL Sama dengan Horor, Aksi & Komedi ========================================================== */ @media (max-width: 767px) { /* MUNGKIN KAMU SUKA SLIDER */ #recommendedSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; box-sizing: border-box !important; } /* UKURAN CARD = HOROR & AKSI & KOMEDI */ #recommendedSlider > .mobile-card.trending-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* POSTER = 122 x 183 */ #recommendedSlider > .mobile-card.trending-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #recommendedSlider > .mobile-card.trending-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* HILANGKAN CARD "LIHAT SEMUA" DARI DALAM SLIDER */ #recommendedSlider > .trending-view-all, #recommendedSlider .trending-view-all, #recommendedSlider .trending-view-all-box, #recommendedSlider .trending-view-all-icon, #recommendedSlider .trending-view-all-title, #recommendedSlider .trending-view-all-arrow { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== HNFLIX MOBILE — BARU DITAMBAHKAN SLIDER FINAL Konsisten dengan Horor, Aksi, Komedi & Mungkin Kamu Suka ========================================================== */ @media (max-width: 767px) { /* BARU DITAMBAHKAN SLIDER */ #newMoviesSlider, #latestSlider, #newSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; box-sizing: border-box !important; } /* UKURAN CARD SERAGAM */ #newMoviesSlider > .mobile-card.trending-card, #latestSlider > .mobile-card.trending-card, #newSlider > .mobile-card.trending-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* POSTER = 122 x 183 */ #newMoviesSlider > .mobile-card.trending-card .trending-poster-wrap, #latestSlider > .mobile-card.trending-card .trending-poster-wrap, #newSlider > .mobile-card.trending-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #newMoviesSlider > .mobile-card.trending-card .trending-poster-wrap img, #latestSlider > .mobile-card.trending-card .trending-poster-wrap img, #newSlider > .mobile-card.trending-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* HILANGKAN CARD LIHAT SEMUA DI DALAM SLIDER */ #newMoviesSlider .trending-view-all, #latestSlider .trending-view-all, #newSlider .trending-view-all, #newMoviesSlider .trending-view-all-box, #latestSlider .trending-view-all-box, #newSlider .trending-view-all-box { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== HNFLIX MOBILE — FILM TERBARU SLIDER FINAL Konsisten dengan semua slider sebelumnya ========================================================== */ @media (max-width: 767px) { #latestMoviesSlider, #latestMovieSlider, #moviesLatestSlider, #filmTerbaruSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; box-sizing: border-box !important; } /* CARD SERAGAM: 122 x 183 */ #latestMoviesSlider > .mobile-card.trending-card, #latestMovieSlider > .mobile-card.trending-card, #moviesLatestSlider > .mobile-card.trending-card, #filmTerbaruSlider > .mobile-card.trending-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* POSTER */ #latestMoviesSlider > .mobile-card.trending-card .trending-poster-wrap, #latestMovieSlider > .mobile-card.trending-card .trending-poster-wrap, #moviesLatestSlider > .mobile-card.trending-card .trending-poster-wrap, #filmTerbaruSlider > .mobile-card.trending-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #latestMoviesSlider > .mobile-card.trending-card .trending-poster-wrap img, #latestMovieSlider > .mobile-card.trending-card .trending-poster-wrap img, #moviesLatestSlider > .mobile-card.trending-card .trending-poster-wrap img, #filmTerbaruSlider > .mobile-card.trending-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* HILANGKAN CARD LIHAT SEMUA DI DALAM SLIDER */ #latestMoviesSlider .trending-view-all, #latestMovieSlider .trending-view-all, #moviesLatestSlider .trending-view-all, #filmTerbaruSlider .trending-view-all, #latestMoviesSlider .trending-view-all-box, #latestMovieSlider .trending-view-all-box, #moviesLatestSlider .trending-view-all-box, #filmTerbaruSlider .trending-view-all-box { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== HNFLIX MOBILE — TRENDING & FILM TERBARU FINAL Samakan dengan Horor / Aksi / Komedi ========================================================== */ @media (max-width: 767px) { /* ========================= SLIDER ========================= */ #trendingSlider, #latestSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; box-sizing: border-box !important; } /* ========================= CARD 122 x 183 ========================= */ #trendingSlider > .mobile-card, #latestSlider > .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; } /* ========================= POSTER ========================= */ #trendingSlider > .mobile-card .trending-poster-wrap, #latestSlider > .mobile-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #trendingSlider > .mobile-card .trending-poster-wrap img, #latestSlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ========================= INFO ========================= */ #trendingSlider > .mobile-card .mobile-card-info, #latestSlider > .mobile-card .mobile-card-info { width: 100% !important; box-sizing: border-box !important; } /* ========================= HILANGKAN VIEW ALL DI DALAM SLIDER ========================= */ #trendingSlider .trending-view-all, #latestSlider .trending-view-all, #trendingSlider .trending-view-all-box, #latestSlider .trending-view-all-box { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== HNFLIX MOBILE — SEMUA SLIDER MENTOK KIRI Card slider sejajar dari titik kiri yang sama ========================================================== */ @media (max-width: 767px) { #trendingSlider, #latestSlider, #horrorSlider, #actionSlider, #comedySlider, #recommendedSlider, #newMoviesSlider, #latestMovieSlider, #moviesLatestSlider, #filmTerbaruSlider, #newSlider { padding-left: 16px !important; padding-right: 16px !important; } } /* ========================================================== HOROR — KEMBALIKAN SLIDER HORIZONTAL Jangan biarkan rule 3 kolom mengambil alih ========================================================== */ #horrorSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 10px !important; } #horrorSlider > .mobile-card { flex: 0 0 122px !important; flex-grow: 0 !important; flex-shrink: 0 !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; } #horrorSlider > .mobile-card .trending-poster-wrap { width: 122px !important; min-width: 122px !important; max-width: 122px !important; height: 183px !important; } /* ========================================================== HNFLIX — HOROR DESKTOP SITE Android Desktop Site mengikuti ukuran card desktop Mobile normal tidak disentuh ========================================================== */ @media (min-width: 768px) { #horrorSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; width: 100% !important; box-sizing: border-box !important; } #horrorSlider > .mobile-card { display: block !important; flex: 0 0 122px !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; box-sizing: border-box !important; } #horrorSlider > .mobile-card .trending-poster-wrap { width: 122px !important; min-width: 122px !important; max-width: 122px !important; height: 183px !important; aspect-ratio: 2 / 3 !important; box-sizing: border-box !important; overflow: hidden !important; } #horrorSlider > .mobile-card .trending-poster-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Jangan tampilkan card Lihat Semua */ #horrorSlider .trending-view-all, #horrorSlider .trending-view-all-box { display: none !important; } } /* ========================================================== HNFLIX HOME SLIDER ARROW — FINAL Android / Tablet / Desktop Site Card tetap 122px ========================================================== */ .mobile-section { position: relative !important; overflow: visible !important; } .mobile-section > .hnflix-slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 30px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(0,0,0,.25) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 7px !important; color: #fff !important; z-index: 100 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; -webkit-tap-highlight-color: transparent !important; } .mobile-section > .hnflix-slider-arrow-left { left: 2px !important; right: auto !important; } .mobile-section > .hnflix-slider-arrow-right { right: 2px !important; left: auto !important; } .mobile-section > .hnflix-slider-arrow i { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; color: #fff !important; visibility: visible !important; opacity: 1 !important; } .mobile-section > .hnflix-slider-arrow.is-hidden { display: flex !important; visibility: visible !important; opacity: 1 !important; } .mobile-section > .hnflix-slider-arrow:active { transform: translateY(-50%) scale(.90) !important; } @media (max-width:380px) { .mobile-section > .hnflix-slider-arrow { width: 27px !important; height: 46px !important; } .mobile-section > .hnflix-slider-arrow i { font-size: 20px !important; } } @media (min-width:768px) { .mobile-section > .hnflix-slider-arrow { width: 32px !important; height: 50px !important; } .mobile-section > .hnflix-slider-arrow-left { left: 4px !important; } .mobile-section > .hnflix-slider-arrow-right { right: 4px !important; } } /* ========================================================== HNFLIX ARROW — LEBIH TEBAL Background tetap ========================================================== */ .mobile-section > .hnflix-slider-arrow i { font-size: 23px !important; font-weight: 900 !important; -webkit-text-stroke: 1.2px currentColor !important; color: #fff !important; } /* ========================================================== HNFLIX CONTINUE WATCHING — ARROW SAMA DENGAN ARROW SLIDER AKSI Visibility tetap dikendalikan oleh continue.js. ========================================================== */ .continue-wrapper { position: relative !important; overflow: visible !important; } .continue-wrapper > .continue-slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 30px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; display: none !important; align-items: center !important; justify-content: center !important; background: rgba(0,0,0,.25) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 7px !important; color: #fff !important; z-index: 999999 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent !important; } .continue-wrapper > .continue-slider-arrow-left { left: 2px !important; right: auto !important; } .continue-wrapper > .continue-slider-arrow-right { right: 2px !important; left: auto !important; } .continue-wrapper > .continue-slider-arrow i { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 23px !important; font-weight: 900 !important; line-height: 1 !important; -webkit-text-stroke: 1.2px currentColor !important; color: #fff !important; visibility: visible !important; opacity: 1 !important; } .continue-wrapper > .continue-slider-arrow:active { transform: translateY(-50%) scale(.90) !important; } @media (max-width:380px) { .continue-wrapper > .continue-slider-arrow { width: 27px !important; height: 46px !important; } .continue-wrapper > .continue-slider-arrow i { font-size: 20px !important; } } /* ========================================================== HNFLIX MOBILE - DRAMA Samakan tampilan dengan COMEDY Card : 122px Poster : 122 x 183 Slider : horizontal View All : hanya di header ========================================================== */ #dramaSlider { scrollbar-width: none !important; box-sizing: border-box !important; } #dramaSlider::-webkit-scrollbar { display: none !important; } /* CARD */ #dramaSlider > .mobile-card.trending-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; scroll-snap-align: start !important; scroll-snap-stop: normal !important; touch-action: pan-x pan-y !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } /* POSTER */ #dramaSlider > .mobile-card.trending-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } /* GAMBAR */ #dramaSlider > .mobile-card.trending-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; user-select: none !important; -webkit-user-drag: none !important; -webkit-user-select: none !important; pointer-events: none !important; touch-action: pan-x pan-y !important; } /* INFO */ #dramaSlider > .mobile-card .mobile-card-info { width: 100% !important; box-sizing: border-box !important; padding: 5px 1px 4px !important; } /* JUDUL */ #dramaSlider > .mobile-card .mobile-card-title { width: 100% !important; font-size: 11px !important; line-height: 16px !important; height: 32px !important; overflow: hidden !important; } /* META */ #dramaSlider > .mobile-card .mobile-card-meta { display: flex !important; width: 100% !important; margin-top: 4px !important; font-size: 9px !important; line-height: 12px !important; } /* PASTIKAN TIDAK ADA CARD LIHAT SEMUA DI UJUNG */ #dramaSlider > .trending-view-all, #dramaSlider .trending-view-all, #dramaSlider .trending-view-all-box, #dramaSlider .trending-view-all-icon, #dramaSlider .trending-view-all-title, #dramaSlider .trending-view-all-arrow { display: none !important; width: 0 !important; } /* ========================================================== END DRAMA ========================================================== */ /* ========================================================== HNFLIX DRAMA Mengikuti tampilan Comedy tanpa mengubah Comedy ========================================================== */ #dramaSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; width: 100% !important; box-sizing: border-box !important; } #dramaSlider::-webkit-scrollbar { display: none !important; } /* CARD */ #dramaSlider > .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; } /* POSTER */ #dramaSlider > .mobile-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #dramaSlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* INFO */ #dramaSlider > .mobile-card .mobile-card-info { width: 100% !important; padding: 5px 1px 4px !important; box-sizing: border-box !important; } /* JUDUL */ #dramaSlider > .mobile-card .mobile-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 16px !important; height: 32px !important; overflow: hidden !important; } /* META */ #dramaSlider > .mobile-card .mobile-card-meta { display: flex !important; width: 100% !important; margin-top: 4px !important; font-size: 10px !important; line-height: 12px !important; } /* HILANGKAN KARTU LIHAT SEMUA DI UJUNG */ #dramaSlider > .trending-view-all, #dramaSlider .trending-view-all, #dramaSlider .trending-view-all-box, #dramaSlider .trending-view-all-icon, #dramaSlider .trending-view-all-title, #dramaSlider .trending-view-all-arrow { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== DRAMA — SAMAKAN BACKGROUND POSTER DENGAN COMEDY ========================================================== */ #dramaSlider > .mobile-card.trending-card { background: transparent !important; box-shadow: none !important; border: 0 !important; } #dramaSlider > .mobile-card.trending-card .trending-poster-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; } #dramaSlider > .mobile-card.trending-card .trending-poster-wrap img { background: transparent !important; border: 0 !important; box-shadow: none !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } #dramaSlider > .mobile-card.trending-card .mobile-card-info { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== HNFLIX HOME — SEMUA SLIDER FINAL MASTER : DRAMA Poster : 122 x 183 Gap : 8px View All : HEADER SAJA ========================================================== */ #trendingSlider, #latestSlider, #recommendedSlider, #horrorSlider, #actionSlider, #comedySlider, #dramaSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } #trendingSlider::-webkit-scrollbar, #latestSlider::-webkit-scrollbar, #recommendedSlider::-webkit-scrollbar, #horrorSlider::-webkit-scrollbar, #actionSlider::-webkit-scrollbar, #comedySlider::-webkit-scrollbar, #dramaSlider::-webkit-scrollbar { display: none !important; } /* ========================================================== CARD MASTER ========================================================== */ #trendingSlider > .mobile-card, #latestSlider > .mobile-card, #recommendedSlider > .mobile-card, #horrorSlider > .mobile-card, #actionSlider > .mobile-card, #comedySlider > .mobile-card, #dramaSlider > .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; scroll-snap-align: start !important; scroll-snap-stop: normal !important; touch-action: pan-x pan-y !important; user-select: none !important; -webkit-user-select: none !important; -webkit-tap-highlight-color: transparent !important; } /* ========================================================== POSTER MASTER ========================================================== */ #trendingSlider > .mobile-card .trending-poster-wrap, #latestSlider > .mobile-card .trending-poster-wrap, #recommendedSlider > .mobile-card .trending-poster-wrap, #horrorSlider > .mobile-card .trending-poster-wrap, #actionSlider > .mobile-card .trending-poster-wrap, #comedySlider > .mobile-card .trending-poster-wrap, #dramaSlider > .mobile-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== IMAGE MASTER ========================================================== */ #trendingSlider > .mobile-card .trending-poster-wrap img, #latestSlider > .mobile-card .trending-poster-wrap img, #recommendedSlider > .mobile-card .trending-poster-wrap img, #horrorSlider > .mobile-card .trending-poster-wrap img, #actionSlider > .mobile-card .trending-poster-wrap img, #comedySlider > .mobile-card .trending-poster-wrap img, #dramaSlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; background: transparent !important; border: 0 !important; box-shadow: none !important; user-select: none !important; -webkit-user-drag: none !important; -webkit-user-select: none !important; pointer-events: none !important; } /* ========================================================== INFO MASTER ========================================================== */ #trendingSlider > .mobile-card .mobile-card-info, #latestSlider > .mobile-card .mobile-card-info, #recommendedSlider > .mobile-card .mobile-card-info, #horrorSlider > .mobile-card .mobile-card-info, #actionSlider > .mobile-card .mobile-card-info, #comedySlider > .mobile-card .mobile-card-info, #dramaSlider > .mobile-card .mobile-card-info { width: 100% !important; margin: 0 !important; padding: 5px 1px 4px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== TITLE MASTER ========================================================== */ #trendingSlider > .mobile-card .mobile-card-title, #latestSlider > .mobile-card .mobile-card-title, #recommendedSlider > .mobile-card .mobile-card-title, #horrorSlider > .mobile-card .mobile-card-title, #actionSlider > .mobile-card .mobile-card-title, #comedySlider > .mobile-card .mobile-card-title, #dramaSlider > .mobile-card .mobile-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 16px !important; height: 32px !important; overflow: hidden !important; } /* ========================================================== META MASTER ========================================================== */ #trendingSlider > .mobile-card .mobile-card-meta, #latestSlider > .mobile-card .mobile-card-meta, #recommendedSlider > .mobile-card .mobile-card-meta, #horrorSlider > .mobile-card .mobile-card-meta, #actionSlider > .mobile-card .mobile-card-meta, #comedySlider > .mobile-card .mobile-card-meta, #dramaSlider > .mobile-card .mobile-card-meta { display: flex !important; width: 100% !important; margin-top: 4px !important; font-size: 9px !important; line-height: 12px !important; box-sizing: border-box !important; } /* ========================================================== HILANGKAN VIEW ALL DARI UJUNG SLIDER ========================================================== */ #trendingSlider > .trending-view-all, #latestSlider > .trending-view-all, #recommendedSlider > .trending-view-all, #horrorSlider > .trending-view-all, #actionSlider > .trending-view-all, #comedySlider > .trending-view-all, #dramaSlider > .trending-view-all { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== END MASTER SLIDER ========================================================== */ /* ========================================================== HNFLIX FINAL — COMEDY IKUT DRAMA DRAMA = MASTER / ACUAN Poster : 122 x 183 Gap : 8px Posisi : sama persis Background : transparent View All : header saja ========================================================== */ @media (max-width: 767px) { /* SLIDER COMEDY */ #comedySlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; scrollbar-width: none !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; } #comedySlider::-webkit-scrollbar { display: none !important; } /* CARD */ #comedySlider > .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* POSTER */ #comedySlider > .mobile-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } #comedySlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* INFO */ #comedySlider > .mobile-card .mobile-card-info { width: 100% !important; margin: 0 !important; padding: 5px 1px 4px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* TITLE */ #comedySlider > .mobile-card .mobile-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 16px !important; height: 32px !important; overflow: hidden !important; } /* META */ #comedySlider > .mobile-card .mobile-card-meta { display: flex !important; width: 100% !important; margin-top: 4px !important; font-size: 9px !important; line-height: 12px !important; box-sizing: border-box !important; } /* HILANGKAN VIEW ALL DARI UJUNG */ #comedySlider > .trending-view-all, #comedySlider .trending-view-all, #comedySlider .trending-view-all-box, #comedySlider .trending-view-all-icon, #comedySlider .trending-view-all-title, #comedySlider .trending-view-all-arrow { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== HNFLIX HOME — MASTER FINAL SEMUA SLIDER ACUAN UTAMA : DRAMA Poster : 122 x 183 Card : 122px Gap : 8px Background : transparent View All : HEADER SAJA ========================================================== */ @media (max-width: 767px) { #trendingSlider, #latestSlider, #recommendedSlider, #horrorSlider, #actionSlider, #comedySlider, #dramaSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; scrollbar-width: none !important; scroll-behavior: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity !important; transform: none !important; } #trendingSlider::-webkit-scrollbar, #latestSlider::-webkit-scrollbar, #recommendedSlider::-webkit-scrollbar, #horrorSlider::-webkit-scrollbar, #actionSlider::-webkit-scrollbar, #comedySlider::-webkit-scrollbar, #dramaSlider::-webkit-scrollbar { display: none !important; } /* CARD */ #trendingSlider > .mobile-card, #latestSlider > .mobile-card, #recommendedSlider > .mobile-card, #horrorSlider > .mobile-card, #actionSlider > .mobile-card, #comedySlider > .mobile-card, #dramaSlider > .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; scroll-snap-align: start !important; scroll-snap-stop: normal !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* POSTER */ #trendingSlider > .mobile-card .trending-poster-wrap, #latestSlider > .mobile-card .trending-poster-wrap, #recommendedSlider > .mobile-card .trending-poster-wrap, #horrorSlider > .mobile-card .trending-poster-wrap, #actionSlider > .mobile-card .trending-poster-wrap, #comedySlider > .mobile-card .trending-poster-wrap, #dramaSlider > .mobile-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* IMAGE */ #trendingSlider > .mobile-card .trending-poster-wrap img, #latestSlider > .mobile-card .trending-poster-wrap img, #recommendedSlider > .mobile-card .trending-poster-wrap img, #horrorSlider > .mobile-card .trending-poster-wrap img, #actionSlider > .mobile-card .trending-poster-wrap img, #comedySlider > .mobile-card .trending-poster-wrap img, #dramaSlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; -webkit-user-drag: none !important; } /* INFO */ #trendingSlider > .mobile-card .mobile-card-info, #latestSlider > .mobile-card .mobile-card-info, #recommendedSlider > .mobile-card .mobile-card-info, #horrorSlider > .mobile-card .mobile-card-info, #actionSlider > .mobile-card .mobile-card-info, #comedySlider > .mobile-card .mobile-card-info, #dramaSlider > .mobile-card .mobile-card-info { width: 100% !important; margin: 0 !important; padding: 5px 1px 4px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* TITLE */ #trendingSlider > .mobile-card .mobile-card-title, #latestSlider > .mobile-card .mobile-card-title, #recommendedSlider > .mobile-card .mobile-card-title, #horrorSlider > .mobile-card .mobile-card-title, #actionSlider > .mobile-card .mobile-card-title, #comedySlider > .mobile-card .mobile-card-title, #dramaSlider > .mobile-card .mobile-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 16px !important; height: 32px !important; overflow: hidden !important; box-sizing: border-box !important; } /* META */ #trendingSlider > .mobile-card .mobile-card-meta, #latestSlider > .mobile-card .mobile-card-meta, #recommendedSlider > .mobile-card .mobile-card-meta, #horrorSlider > .mobile-card .mobile-card-meta, #actionSlider > .mobile-card .mobile-card-meta, #comedySlider > .mobile-card .mobile-card-meta, #dramaSlider > .mobile-card .mobile-card-meta { display: flex !important; width: 100% !important; margin-top: 4px !important; font-size: 9px !important; line-height: 12px !important; box-sizing: border-box !important; } /* HILANGKAN VIEW ALL DARI UJUNG */ #trendingSlider > .trending-view-all, #latestSlider > .trending-view-all, #recommendedSlider > .trending-view-all, #horrorSlider > .trending-view-all, #actionSlider > .trending-view-all, #comedySlider > .trending-view-all, #dramaSlider > .trending-view-all { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== END MASTER FINAL ========================================================== */ /* ========================================================== HNFLIX MOBILE — CENTER SLIDER FINAL Hanya mengatur ruang kiri/kanan slider. Tidak mengubah jumlah poster / engine slider. ========================================================== */ @media (max-width: 767px) { main.mobile-home .mobile-section > .mobile-slider { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 32px !important; padding-right: 24px !important; box-sizing: border-box !important; } main.mobile-home .mobile-section > .mobile-slider .mobile-card:first-child { margin-left: 0 !important; } } /* ========================================================== HNFLIX — ANIMASI SLIDER Mengikuti struktur dan ukuran DRAMA ========================================================== */ #animationSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; width: 100% !important; padding-left: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; } #animationSlider::-webkit-scrollbar { display: none !important; } /* CARD */ #animationSlider > .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; } /* POSTER */ #animationSlider > .mobile-card .trending-poster-wrap { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* GAMBAR */ #animationSlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; } /* INFO */ #animationSlider > .mobile-card .mobile-card-info { width: 100% !important; margin: 0 !important; padding: 5px 1px 4px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* JUDUL */ #animationSlider > .mobile-card .mobile-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 16px !important; height: 32px !important; overflow: hidden !important; } /* META */ #animationSlider > .mobile-card .mobile-card-meta { display: flex !important; width: 100% !important; margin-top: 4px !important; font-size: 9px !important; line-height: 12px !important; box-sizing: border-box !important; } /* ========================================== MOVIES PAGE TITLE Garis merah vertikal di kiri ========================================== */ .movies-page-title { position: relative; padding-left: 8px !important; } .movies-page-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: #e50914; border-radius: 2px; } /* ========================================================== HNFLIX FINAL — HORROR DESKTOP ALIGNMENT Samakan posisi kiri Horror dengan slider lainnya ========================================================== */ @media (min-width: 768px) { #horrorSlider { padding-left: 9px !important; box-sizing: border-box !important; } } /* ========================================================== HNFLIX FINAL — ANIMASI DESKTOP ALIGNMENT Geser Animasi ke kanan agar sejajar dengan slider lain ========================================================== */ @media (min-width: 768px) { #animationSlider { padding-left: 9px !important; box-sizing: border-box !important; } } /* ========================================================== ANIMASI — SAMAKAN POSISI DENGAN DRAMA ========================================================== */ @media (max-width: 767px) { #animationSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; scroll-behavior: auto !important; transform: none !important; } #animationSlider::-webkit-scrollbar { display: none !important; } #animationSlider > .mobile-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; } } /* ========================================================== HOME SLIDER SIDE SPACE 16PX ========================================================== */ @media (max-width: 767px) { main.mobile-home .mobile-section > .mobile-slider { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } } /* ========================================================== HNFLIX FINAL — MOBILE SLIDER SIDE SPACE Override seluruh aturan slider sebelumnya ========================================================== */ @media (max-width: 767px) { #trendingSlider, #latestSlider, #recommendedSlider, #horrorSlider, #actionSlider, #comedySlider, #dramaSlider, #animationSlider, #seriesSlider { padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } } /* FIX DRAMA POSITION — MATCH ANIMATION */ @media (max-width: 767px) { #dramaSlider { padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } #dramaSlider > .mobile-card:first-child { margin-left: 0 !important; transform: none !important; } } /* ========================================================== FIX DRAMA INITIAL POSITION Disable scroll snap only for Drama ========================================================== */ @media (max-width: 767px) { #dramaSlider { scroll-snap-type: none !important; scroll-padding: 0 !important; } #dramaSlider > .mobile-card { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } } /* ========================================================== HNFLIX — DRAMA & ANIMASI SIDE SPACE 4PX ========================================================== */ @media (max-width: 767px) { #dramaSlider, #animationSlider { padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box !important; } } /* ========================================================== HNFLIX — DRAMA & ANIMASI SIDE SPACE 5PX ========================================================== */ @media (max-width: 767px) { #dramaSlider, #animationSlider { padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } } /* ========================================================== HNFLIX — KOMEDI SIDE SPACE 5PX ========================================================== */ @media (max-width: 767px) { #comedySlider { padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } } /* ========================================================= FINAL FIX KOMEDI - POSISI AWAL 5PX ========================================================= */ @media (max-width: 767px) { #comedySlider { padding-left: 5px !important; padding-right: 5px !important; scroll-padding-left: 0 !important; scroll-padding-right: 0 !important; scroll-snap-type: none !important; box-sizing: border-box !important; } #comedySlider > .mobile-card { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } } /* ========================================================= FINAL FIX SLIDER MOBILE AKSI - HOROR - REKOMENDASI - TERBARU - TRENDING ========================================================= */ @media (max-width: 767px) { #actionSlider, #horrorSlider, #recommendedSlider, #latestSlider, #trendingSlider { padding-left: 5px !important; padding-right: 5px !important; scroll-padding-left: 0 !important; scroll-padding-right: 0 !important; scroll-snap-type: none !important; box-sizing: border-box !important; } #actionSlider > .mobile-card, #horrorSlider > .mobile-card, #recommendedSlider > .mobile-card, #latestSlider > .mobile-card, #trendingSlider > .mobile-card { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } } /* FINAL OVERRIDE - CONTINUE WATCHING HOME */ .continue-wrapper > .continue-slider { display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; column-gap: 5px !important; row-gap: 0 !important; padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; overflow-x: auto !important; } .continue-wrapper > .continue-slider > .continue-card { flex: 0 0 calc((100% - 15px) / 3) !important; width: calc((100% - 15px) / 3) !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } .continue-wrapper > .continue-slider > .continue-card .continue-thumb { width: 100% !important; aspect-ratio: 2 / 3 !important; box-sizing: border-box !important; } .continue-wrapper > .continue-slider > .continue-card .continue-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* FIX POSTER OVERLAP - CONTINUE WATCHING HOME */ .continue-wrapper .continue-slider .continue-card { overflow: hidden !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } .continue-wrapper .continue-slider .continue-card .continue-thumb { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; flex: 0 0 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .continue-wrapper .continue-slider .continue-card .continue-thumb img { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; box-sizing: border-box !important; } /* SAMAKAN UKURAN POSTER CONTINUE DENGAN TRENDING */ .continue-wrapper > .continue-slider { display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; column-gap: 5px !important; row-gap: 0 !important; padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } .continue-wrapper > .continue-slider > .continue-card { flex: 0 0 calc((100% - 16px) / 3) !important; width: calc((100% - 16px) / 3) !important; min-width: calc((100% - 16px) / 3) !important; max-width: calc((100% - 16px) / 3) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .continue-wrapper > .continue-slider > .continue-card .continue-thumb { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .continue-wrapper > .continue-slider > .continue-card .continue-thumb img { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; box-sizing: border-box !important; } /* EXACT SIZE - CONTINUE SAMA DENGAN TRENDING */ .continue-wrapper > .continue-slider { display: flex !important; flex-wrap: nowrap !important; gap: 14px !important; column-gap: 5px !important; padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } .continue-wrapper > .continue-slider > .continue-card { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .continue-wrapper > .continue-slider > .continue-card .continue-thumb { width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; aspect-ratio: 2 / 3 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .continue-wrapper > .continue-slider > .continue-card .continue-thumb img { display: block !important; width: 122px !important; height: 183px !important; min-width: 122px !important; max-width: 122px !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* FINAL - JARAK POSTER CONTINUE HOME */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 20px !important; column-gap: 20px !important; } } /* FINAL - JARAK POSTER CONTINUE HOME 18PX */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 18px !important; column-gap: 18px !important; } } /* FINAL - JARAK POSTER CONTINUE HOME 15PX */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 15px !important; column-gap: 15px !important; } } /* FINAL FIX - JARAK CONTINUE HOME 15PX */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 15px !important; column-gap: 15px !important; } } /* FINAL FIX - JARAK CONTINUE HOME 5PX */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 5px !important; column-gap: 5px !important; } } /* FINAL FIX - JARAK CONTINUE HOME 8PX */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 8px !important; column-gap: 8px !important; } } /* FINAL FIX - JARAK CONTINUE HOME 6PX */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 6px !important; column-gap: 6px !important; } } /* FINAL FIX - JARAK TRENDING HOME 6PX */ @media (max-width: 767px) { .trending-wrapper > .trending-slider, .trending-slider { gap: 6px !important; column-gap: 6px !important; } } /* FINAL FIX - JARAK LANJUT MENONTON HOME 7PX */ @media (max-width: 767px) { .continue-wrapper > .continue-slider { gap: 7px !important; column-gap: 7px !important; } } /* SAMAKAN UKURAN TEKS CONTINUE DENGAN TRENDING */ @media (max-width: 767px) { .continue-wrapper .continue-title, .continue-wrapper .continue-year, .continue-wrapper .continue-quality, .continue-wrapper .continue-meta { font-size: 11px !important; } } /* FINAL FIX - TEKS CONTINUE LEBIH BESAR */ @media (max-width: 767px) { .continue-wrapper .continue-title, .continue-wrapper .continue-year, .continue-wrapper .continue-quality, .continue-wrapper .continue-meta { font-size: 14px !important; line-height: 1.4 !important; } } /* SAMAKAN TEKS CONTINUE DENGAN TRENDING */ @media (max-width: 767px) { .continue-wrapper .continue-name, .continue-wrapper .continue-year, .continue-wrapper .continue-quality, .continue-wrapper .continue-meta { font-size: 11px !important; line-height: 1.35 !important; } } /* FINAL - UKURAN JUDUL CONTINUE */ @media (max-width: 767px) { main.mobile-home .continue-wrapper .continue-slider .continue-card .continue-name, main.mobile-home .continue-wrapper .continue-slider .continue-card .continue-year { font-size: 11px !important; line-height: 1.35 !important; font-weight: 500 !important; } } /* FINAL - TEKS CONTINUE 11PX */ @media (max-width: 767px) { .continue-wrapper .continue-name, .continue-wrapper .continue-year { font-size: 11px !important; line-height: 1.35 !important; } } /* FINAL - CONTINUE NAME DAN YEAR 11PX */ @media screen and (max-width: 767px) { div.continue-wrapper div.continue-card div.continue-name, div.continue-wrapper div.continue-card div.continue-year { font-size: 11px !important; line-height: 1.3 !important; } } /* FIX KUAT - JUDUL CONTINUE 11PX */ @media screen and (max-width: 767px) { #continueListing .continue-title .continue-name, #continueListing .continue-title .continue-year { font-size: 11px !important; line-height: 1.3 !important; } } /* FINAL ABSOLUTE - JUDUL LANJUT MENONTON 11PX */ #continueListing div.continue-card div.continue-title div.continue-name { font-size: 11px !important; line-height: 1.3 !important; } /* FINAL ABSOLUTE - JUDUL LANJUT MENONTON 11PX */ @media screen and (max-width: 767px) { .continue-wrapper .continue-card .continue-name, .continue-wrapper .continue-card .continue-year { font-size: 11px !important; line-height: 1.3 !important; font-weight: 500 !important; } } /* CONTINUE - TAHUN DAN KUALITAS 9PX */ @media screen and (max-width: 767px) { .continue-wrapper .continue-year, .continue-wrapper .continue-quality, .continue-wrapper .continue-meta, .continue-wrapper .continue-meta span { font-size: 9px !important; line-height: 1.2 !important; } } /* FINAL - CONTINUE TAHUN DAN FULL HD 9PX */ @media screen and (max-width: 767px) { #continueListing .continue-slider .continue-card .continue-year, #continueListing .continue-slider .continue-card .continue-quality, #continueListing .continue-slider .continue-card .continue-meta, #continueListing .continue-slider .continue-card .continue-meta span { font-size: 9px !important; line-height: 1.2 !important; } } /* FINAL OVERRIDE - TAHUN DAN FULL HD CONTINUE HOME 9PX */ @media screen and (max-width: 767px) { #continueListing .continue-slider .continue-card .continue-meta, #continueListing .continue-slider .continue-card .continue-meta span, #continueListing .continue-slider .continue-card .continue-year, #continueListing .continue-slider .continue-card .continue-quality { font-size: 9px !important; line-height: 1.2 !important; } } /* FINAL - METADATA CONTINUE HOME 9PX */ @media screen and (max-width: 767px) { body #continueListing .continue-wrapper .continue-card .continue-title .continue-meta, body #continueListing .continue-wrapper .continue-card .continue-title .continue-meta span { font-size: 9px !important; line-height: 1.2 !important; } } /* RAPikan posisi judul dan metadata CONTINUE HOME */ @media screen and (max-width: 767px) { #continueListing .continue-card .continue-title { width: 100% !important; text-align: left !important; } #continueListing .continue-card .continue-name { width: 100% !important; min-height: 29px !important; margin: 0 !important; text-align: left !important; line-height: 1.3 !important; } #continueListing .continue-card .continue-meta { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 3px !important; width: 100% !important; height: 12px !important; margin-top: 3px !important; padding: 0 !important; text-align: left !important; line-height: 1.2 !important; white-space: nowrap !important; } #continueListing .continue-card .continue-meta span { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.2 !important; } }