/* ========================================================== HANNANET MOVIE MOBILE SLIDER CSS Version : 2.0 ========================================================== */ /* ========================================== SECTION ========================================== */ .mobile-section{ margin-top:26px; } /* ========================================== SECTION HEADER ========================================== */ .mobile-section-header{ display:flex; align-items:center; justify-content:space-between; padding:0 16px; margin-bottom:16px; } /* ========================================== TITLE ========================================== */ .mobile-section-title{ font-size:18px; font-weight:700; color:#ffffff; } /* ========================================== VIEW ALL ========================================== */ .mobile-view-all{ color:#9d9d9d; font-size:13px; font-weight:600; text-decoration:none; transition:.25s; } .mobile-view-all:active{ opacity:.7; } /* ========================================== SLIDER ========================================== */ .mobile-slider{ display:flex; gap:14px; padding:0 16px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .mobile-slider::-webkit-scrollbar{ display:none; } /* ========================================== LOADING ========================================== */ .mobile-loading{ padding:30px 16px; color:#888; font-size:13px; } /* ========================================== EMPTY ========================================== */ .mobile-empty{ padding:30px 16px; color:#777; font-size:13px; } /* ================================================== VIEW ALL - LEBIH JELAS ================================================== */ .mobile-view-all{ color:#ffffff !important; font-size:14px !important; font-weight:700 !important; opacity:1 !important; text-decoration:none !important; padding:5px 2px; white-space:nowrap; } .mobile-view-all:active{ color:#e50914 !important; } @media (max-width:380px){ .mobile-view-all{ font-size:13px !important; } } /* ========================================================== FINAL MOBILE MOVIE GRID 4 KOLOM — POSTER SEDIKIT LEBIH BESAR ========================================================== */ @media (max-width:767px){ .mobile-slider{ display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:7px !important; padding-left:16px !important; padding-right:16px !important; overflow-x:hidden !important; overflow-y:visible !important; } .mobile-slider .mobile-card{ width:100% !important; min-width:0 !important; max-width:none !important; } .mobile-slider .mobile-card > img{ width:100% !important; height:auto !important; aspect-ratio:2 / 3 !important; object-fit:contain !important; object-position:center !important; } } /* ========================================================== FINAL — TRENDING + LATEST 4 KOLOM / POSTER LEBIH BESAR TIDAK HORIZONTAL SCROLL ========================================================== */ @media (max-width:767px){ #playerTrending, #playerLatest{ display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:6px !important; width:100% !important; padding-left:4px !important; padding-right:4px !important; margin:0 !important; overflow-x:hidden !important; overflow-y:visible !important; box-sizing:border-box !important; } #playerTrending .mobile-card, #playerLatest .mobile-card{ width:100% !important; min-width:0 !important; max-width:none !important; flex:none !important; display:block !important; overflow:hidden !important; margin:0 !important; padding:0 !important; background:transparent !important; box-sizing:border-box !important; } #playerTrending .mobile-card > img, #playerLatest .mobile-card > img{ width:100% !important; height:auto !important; aspect-ratio:2 / 3 !important; object-fit:cover !important; object-position:center !important; display:block !important; margin:0 !important; padding:0 !important; border-radius:6px !important; background:#111 !important; } #playerTrending .mobile-card-info, #playerLatest .mobile-card-info{ margin-top:5px !important; padding:0 !important; } #playerTrending .mobile-card-title, #playerLatest .mobile-card-title{ 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; } #playerTrending .mobile-card-meta, #playerLatest .mobile-card-meta{ margin-top:3px !important; font-size:8px !important; line-height:1.2 !important; color:#888 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } } /* HP SANGAT KECIL */ @media (max-width:380px){ #playerTrending, #playerLatest{ gap:5px !important; padding-left:3px !important; padding-right:3px !important; } #playerTrending .mobile-card-title, #playerLatest .mobile-card-title{ font-size:9px !important; } #playerTrending .mobile-card-meta, #playerLatest .mobile-card-meta{ font-size:7px !important; } } /* ========================================================== FINAL FIX — TRENDING + LATEST 4 KOLOM — POSTER SEDIKIT LEBIH BESAR ========================================================== */ @media (max-width:767px){ #playerTrending, #playerLatest{ display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:4px !important; width:100% !important; padding-left:2px !important; padding-right:2px !important; margin:0 !important; overflow-x:hidden !important; overflow-y:visible !important; box-sizing:border-box !important; } #playerTrending .mobile-card, #playerLatest .mobile-card{ width:100% !important; min-width:0 !important; max-width:none !important; flex:none !important; display:block !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; background:transparent !important; } #playerTrending .mobile-card > img, #playerLatest .mobile-card > img{ width:100% !important; height:auto !important; aspect-ratio:2 / 3 !important; object-fit:cover !important; object-position:center !important; display:block !important; margin:0 !important; } #playerTrending .mobile-card-info, #playerLatest .mobile-card-info{ margin-top:4px !important; padding:0 !important; } #playerTrending .mobile-card-title, #playerLatest .mobile-card-title{ font-size:10px !important; line-height:1.25 !important; -webkit-line-clamp:2 !important; overflow:hidden !important; } #playerTrending .mobile-card-meta, #playerLatest .mobile-card-meta{ margin-top:2px !important; font-size:8px !important; line-height:1.2 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } } @media (max-width:380px){ #playerTrending, #playerLatest{ gap:3px !important; padding-left:1px !important; padding-right:1px !important; } } /* ========================================================== FINAL POSTER STYLE TRENDING + LATEST = SAMA SEPERTI REKOMENDASI ========================================================== */ @media (max-width:767px){ #playerTrending, #playerLatest{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:6px !important; width:100% !important; padding:0 6px !important; margin:0 !important; overflow-x:hidden !important; overflow-y:visible !important; box-sizing:border-box !important; } /* ============================== CARD ============================== */ #playerTrending .mobile-card, #playerLatest .mobile-card{ width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; display:block !important; background:transparent !important; border:0 !important; border-radius:0 !important; overflow:visible !important; box-sizing:border-box !important; } /* ============================== POSTER ============================== */ #playerTrending .mobile-card img, #playerLatest .mobile-card img{ width:100% !important; height:auto !important; aspect-ratio:2 / 3 !important; object-fit:cover !important; object-position:center !important; display:block !important; margin:0 !important; padding:0 !important; background:#111 !important; border-radius:4px !important; box-sizing:border-box !important; } /* ============================== INFO ============================== */ #playerTrending .mobile-card-info, #playerLatest .mobile-card-info{ margin:5px 0 0 0 !important; padding:0 !important; background:transparent !important; } /* ============================== TITLE ============================== */ #playerTrending .mobile-card-title, #playerLatest .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 ============================== */ #playerTrending .mobile-card-meta, #playerLatest .mobile-card-meta{ margin:3px 0 0 0 !important; padding:0 !important; font-size:8px !important; line-height:1.2 !important; color:#888 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width:380px){ #playerTrending, #playerLatest{ gap:5px !important; padding-left:5px !important; padding-right:5px !important; } } /* ========================================================== MOBILE TRENDING FINAL 15 MOVIES 3 POSTER PER VIEW HORIZONTAL SLIDER KHUSUS MOBILE ========================================================== */ @media (max-width: 767px) { #trendingSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; } #trendingSlider::-webkit-scrollbar { display: none !important; } /* ====================================================== 3 POSTER DALAM 1 LAYAR ====================================================== */ #trendingSlider .mobile-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; display: block !important; box-sizing: border-box !important; overflow: hidden !important; background: transparent !important; border: 0 !important; scroll-snap-align: start !important; } /* ====================================================== POSTER ====================================================== */ #trendingSlider .mobile-card img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; border-radius: 5px !important; box-sizing: border-box !important; } /* ====================================================== INFO ====================================================== */ #trendingSlider .mobile-card-info { width: 100% !important; margin: 6px 0 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ====================================================== TITLE ====================================================== */ #trendingSlider .mobile-card-title { margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1.3 !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; word-break: normal !important; } /* ====================================================== YEAR ====================================================== */ #trendingSlider .mobile-card-meta { margin: 4px 0 0 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1.2 !important; color: #888 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width: 380px) { #trendingSlider { gap: 6px !important; } #trendingSlider .mobile-card { flex-basis: calc((100% - 12px) / 3) !important; width: calc((100% - 12px) / 3) !important; min-width: calc((100% - 12px) / 3) !important; max-width: calc((100% - 12px) / 3) !important; } } /* ========================================================== TRENDING MOBILE FINAL 15 MOVIES / 3 POSTER PER VIEW LARGER TITLE + QUALITY BADGE ========================================================== */ @media (max-width: 767px) { #trendingSlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; } #trendingSlider::-webkit-scrollbar { display: none !important; } /* ====================================================== 3 POSTER PER VIEW ====================================================== */ #trendingSlider .mobile-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; display: block !important; background: transparent !important; border: 0 !important; box-sizing: border-box !important; scroll-snap-align: start !important; overflow: hidden !important; } /* ====================================================== POSTER WRAPPER ====================================================== */ #trendingSlider .trending-poster-wrap { position: relative !important; width: 100% !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; border-radius: 5px !important; background: #111 !important; } /* ====================================================== POSTER ====================================================== */ #trendingSlider .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; border-radius: 5px !important; } /* ====================================================== QUALITY BADGE ====================================================== */ #trendingSlider .trending-quality-badge { position: absolute !important; left: 5px !important; bottom: 5px !important; z-index: 5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 20px !important; padding: 2px 6px !important; border: 1px solid #ffd400 !important; border-radius: 4px !important; background: rgba(0, 0, 0, 0.88) !important; color: #ffd400 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; white-space: nowrap !important; box-sizing: border-box !important; text-shadow: 0 1px 2px rgba(0,0,0,.8) !important; } /* ====================================================== INFO ====================================================== */ #trendingSlider .mobile-card-info { width: 100% !important; margin: 7px 0 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ====================================================== JUDUL ====================================================== */ #trendingSlider .mobile-card-title { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #fff !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal !important; min-height: 35px !important; } /* ====================================================== TAHUN + QUALITY ====================================================== */ #trendingSlider .mobile-card-meta { display: flex !important; align-items: center !important; gap: 4px !important; margin: 5px 0 0 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; color: #b3b3b3 !important; white-space: nowrap !important; overflow: hidden !important; } #trendingSlider .trending-year { color: #ffd400 !important; } #trendingSlider .trending-meta-separator { color: #ffd400 !important; } #trendingSlider .trending-quality-text { color: #ffd400 !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width: 380px) { #trendingSlider { gap: 6px !important; } #trendingSlider .mobile-card { flex-basis: calc((100% - 12px) / 3) !important; width: calc((100% - 12px) / 3) !important; min-width: calc((100% - 12px) / 3) !important; max-width: calc((100% - 12px) / 3) !important; } #trendingSlider .mobile-card-title { font-size: 13px !important; line-height: 1.25 !important; } #trendingSlider .mobile-card-meta { font-size: 11px !important; } #trendingSlider .trending-quality-badge { left: 4px !important; bottom: 4px !important; min-height: 18px !important; padding: 2px 5px !important; font-size: 8px !important; } } /* ========================================================== HANNANET MOVIE TRENDING MOBILE FINAL 15 MOVIES / 3 POSTER PER VIEW ========================================================== */ @media (max-width: 767px) { #trendingSlider { display: grid !important; grid-auto-flow: column !important; grid-template-rows: 1fr !important; grid-auto-columns: calc( (100% - 12px) / 3 ) !important; gap: 6px !important; width: 100% !important; padding: 0 6px 8px !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; overscroll-behavior-x: contain !important; } #trendingSlider::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ============================== CARD ============================== */ #trendingSlider .trending-card { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; box-sizing: border-box !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; text-decoration: none !important; } /* ============================== POSTER WRAPPER ============================== */ #trendingSlider .trending-poster-wrap { position: relative !important; width: 100% !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; border-radius: 6px !important; background: #111 !important; } /* ============================== POSTER ============================== */ #trendingSlider .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; } /* ============================== TOP BADGE ============================== */ #trendingSlider .trending-top-badge { position: absolute !important; top: 6px !important; left: 5px !important; z-index: 5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 21px !important; padding: 2px 6px !important; box-sizing: border-box !important; background: #e50914 !important; color: #fff !important; border-radius: 4px !important; font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; box-shadow: 0 2px 5px rgba(0,0,0,.45) !important; } /* ============================== INFO ============================== */ #trendingSlider .mobile-card-info { margin: 6px 0 0 !important; padding: 0 !important; background: transparent !important; } /* ============================== TITLE ============================== */ #trendingSlider .mobile-card-title { margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 600 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; min-height: 32px !important; } /* ============================== YEAR + QUALITY ============================== */ #trendingSlider .mobile-card-meta { display: flex !important; align-items: center !important; gap: 4px !important; margin: 4px 0 0 !important; padding: 0 !important; color: #aaa !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #trendingSlider .trending-year { color: #ffd400 !important; } #trendingSlider .trending-meta-separator { color: #ffd400 !important; } #trendingSlider .trending-quality { color: #ffd400 !important; font-weight: 700 !important; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width: 380px) { #trendingSlider { grid-auto-columns: calc( (100% - 10px) / 3 ) !important; gap: 5px !important; padding-left: 5px !important; padding-right: 5px !important; } #trendingSlider .trending-top-badge { top: 4px !important; left: 4px !important; min-height: 19px !important; padding: 2px 5px !important; font-size: 8px !important; } #trendingSlider .mobile-card-title { font-size: 12px !important; line-height: 1.25 !important; } #trendingSlider .mobile-card-meta { font-size: 10px !important; } } /* ========================================================== TRENDING MOBILE VIEW ALL CARD Setelah TOP 15 ========================================================== */ @media (max-width: 767px) { #trendingSlider .trending-view-all { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; text-decoration: none !important; scroll-snap-align: start !important; box-sizing: border-box !important; } #trendingSlider .trending-view-all-box { width: 100% !important; aspect-ratio: 2 / 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 9px !important; box-sizing: border-box !important; background: #171717 !important; border: 1px solid #333 !important; border-radius: 6px !important; color: #fff !important; text-align: center !important; } #trendingSlider .trending-view-all-icon { font-size: 28px !important; line-height: 1 !important; } #trendingSlider .trending-view-all-title { font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #fff !important; } #trendingSlider .trending-view-all-arrow { font-size: 22px !important; line-height: 1 !important; color: #e50914 !important; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width: 380px) { #trendingSlider .trending-view-all-box { gap: 7px !important; } #trendingSlider .trending-view-all-icon { font-size: 24px !important; } #trendingSlider .trending-view-all-title { font-size: 12px !important; } #trendingSlider .trending-view-all-arrow { font-size: 20px !important; } } /* ========================================================== TRENDING MOBILE SMOOTH + RESPONSIVE SWIPE ========================================================== */ @media (max-width: 767px) { #trendingSlider { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; scroll-behavior: auto !important; /* * Jangan terlalu mengunci posisi. * Biarkan jari/momentum browser bekerja natural. */ scroll-snap-type: x proximity !important; will-change: scroll-position !important; scrollbar-width: none !important; } #trendingSlider .mobile-card { /* * Browser tidak perlu menghentikan swipe * pada setiap kartu. */ scroll-snap-align: start !important; scroll-snap-stop: normal !important; touch-action: pan-x !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } #trendingSlider .mobile-card img { user-select: none !important; -webkit-user-drag: none !important; -webkit-user-select: none !important; pointer-events: none !important; } } /* ========================================================== TRENDING MOBILE — GESER SEDIKIT KE KIRI HANYA POSISI — UKURAN / POSTER / GRID TIDAK DIUBAH ========================================================== */ @media (max-width: 767px) { #trendingSlider .trending-card { transform: translateX(-4px) !important; } } /* ========================================================== LATEST MOBILE — SAMAKAN POSISI DENGAN TRENDING HANYA POSISI — UKURAN / POSTER / GRID TIDAK DIUBAH ========================================================== */ @media (max-width: 767px) { #latestSlider .mobile-card { transform: translateX(-4px) !important; } } /* ========================================================== LATEST MOBILE SAMA DENGAN TRENDING — HORIZONTAL SLIDER ========================================================== */ @media (max-width: 767px) { #latestSlider { display: flex !important; grid-template-columns: none !important; gap: 14px !important; padding: 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; scroll-behavior: auto !important; scroll-snap-type: x proximity !important; will-change: scroll-position !important; scrollbar-width: none !important; box-sizing: border-box !important; } #latestSlider::-webkit-scrollbar { display: none !important; } #latestSlider .mobile-card { flex: 0 0 auto !important; scroll-snap-align: start !important; scroll-snap-stop: normal !important; touch-action: pan-x !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } #latestSlider .mobile-card img { user-select: none !important; -webkit-user-drag: none !important; -webkit-user-select: none !important; pointer-events: none !important; } } /* ========================================================== LATEST — SAMAKAN UKURAN CARD DENGAN TRENDING HANYA LATEST ========================================================== */ @media (max-width: 767px) { #latestSlider { display: flex !important; flex-direction: row !important; gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; } #latestSlider::-webkit-scrollbar { display: none !important; } #latestSlider .mobile-card { flex: 0 0 calc((100% - 20px) / 3) !important; width: calc((100% - 20px) / 3) !important; min-width: calc((100% - 20px) / 3) !important; max-width: calc((100% - 20px) / 3) !important; transform: translateX(-4px) !important; scroll-snap-align: start !important; } #latestSlider .mobile-card img { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; display: block !important; } #latestSlider .mobile-card-info { padding: 5px 4px 6px !important; } #latestSlider .mobile-card-title { font-size: 10px !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } #latestSlider .mobile-card-meta { margin-top: 3px !important; font-size: 8px !important; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width: 380px) { #latestSlider { gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; } #latestSlider .mobile-card { flex-basis: 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; } } /* ========================================================== LATEST — FULL HD KUNING HANYA BAGIAN LATEST ========================================================== */ @media (max-width: 767px) { #latestSlider .trending-quality { color: #ffd400 !important; font-weight: 600 !important; } } /* ========================================================== LATEST — LIHAT SEMUA SAMAKAN DENGAN FILM TERBARU ========================================================== */ @media (max-width: 767px) { #latestSlider .trending-view-all-box { width: 100% !important; aspect-ratio: 2 / 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 9px !important; box-sizing: border-box !important; background: #171717 !important; border: 1px solid #333 !important; border-radius: 6px !important; color: #fff !important; text-align: center !important; } #latestSlider .trending-view-all-icon { font-size: 28px !important; line-height: 1 !important; } #latestSlider .trending-view-all-title { font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #fff !important; } #latestSlider .trending-view-all-arrow { font-size: 22px !important; line-height: 1 !important; color: #e50914 !important; } } /* ========================================================== HP KECIL ========================================================== */ @media (max-width: 380px) { #latestSlider .trending-view-all-box { gap: 7px !important; } #latestSlider .trending-view-all-icon { font-size: 24px !important; } #latestSlider .trending-view-all-title { font-size: 12px !important; } #latestSlider .trending-view-all-arrow { font-size: 20px !important; } } /* ========================================================== RECOMMENDED MOBILE SAMAKAN DENGAN FILM TERBARU ========================================================== */ @media (max-width: 767px) { #recommendedSlider { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; scroll-behavior: auto !important; display: flex !important; } #recommendedSlider::-webkit-scrollbar { display: none !important; } #recommendedSlider .mobile-card { flex-shrink: 0 !important; scroll-snap-align: start !important; scroll-snap-stop: normal !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } #recommendedSlider .mobile-card img { user-select: none !important; -webkit-user-select: none !important; -webkit-user-drag: none !important; pointer-events: none !important; } #recommendedSlider .trending-view-all-box, #horrorSlider .trending-view-all-box { width: 100% !important; aspect-ratio: 2 / 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background: #171717 !important; border: 1px solid #333 !important; border-radius: 6px !important; color: #fff !important; text-align: center !important; gap: 9px !important; } #recommendedSlider .trending-view-all-icon, #horrorSlider .trending-view-all-icon { font-size: 28px !important; line-height: 1 !important; } #recommendedSlider .trending-view-all-title, #horrorSlider .trending-view-all-title { font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #fff !important; } #recommendedSlider .trending-view-all-arrow, #horrorSlider .trending-view-all-arrow { font-size: 22px !important; line-height: 1 !important; color: #e50914 !important; } } @media (max-width: 380px) { #recommendedSlider .trending-view-all-box, #horrorSlider .trending-view-all-box { gap: 7px !important; } #recommendedSlider .trending-view-all-icon, #horrorSlider .trending-view-all-icon { font-size: 24px !important; } #recommendedSlider .trending-view-all-title, #horrorSlider .trending-view-all-title { font-size: 12px !important; } #recommendedSlider .trending-view-all-arrow, #horrorSlider .trending-view-all-arrow { font-size: 20px !important; } } /* ========================================================== RECOMMENDED — 100% SAMA DENGAN LATEST ========================================================== */ @media (max-width: 767px) { #recommendedSlider { display: flex !important; grid-template-columns: none !important; flex-direction: row !important; gap: 14px !important; padding: 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; scroll-behavior: auto !important; scroll-snap-type: x proximity !important; will-change: scroll-position !important; scrollbar-width: none !important; box-sizing: border-box !important; } #recommendedSlider::-webkit-scrollbar { display: none !important; } #recommendedSlider .mobile-card { flex: 0 0 auto !important; scroll-snap-align: start !important; scroll-snap-stop: normal !important; touch-action: pan-x !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } #recommendedSlider .mobile-card img { user-select: none !important; -webkit-user-drag: none !important; -webkit-user-select: none !important; pointer-events: none !important; } } /* ========================================================== RECOMMENDED — POSISI KARTU SAMA DENGAN LATEST ========================================================== */ @media (max-width: 767px) { #recommendedSlider .mobile-card { transform: translateX(-4px) !important; } } /* ========================================================== HOROR MENGIKUTI TEMPLATE RECOMMENDED ========================================================== */ @media (max-width: 767px) { #horrorSlider { display: flex !important; grid-template-columns: none !important; gap: 14px !important; padding: 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; scroll-behavior: auto !important; scroll-snap-type: x proximity !important; will-change: scroll-position !important; scrollbar-width: none !important; box-sizing: border-box !important; } #horrorSlider::-webkit-scrollbar { display: none !important; } #horrorSlider .mobile-card { flex: 0 0 auto !important; scroll-snap-align: start !important; scroll-snap-stop: normal !important; touch-action: pan-x !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } #horrorSlider .mobile-card img { user-select: none !important; -webkit-user-drag: none !important; -webkit-user-select: none !important; pointer-events: none !important; } } /* ========================================================== HOROR — VERTICAL PAGE SCROLL FIX TAMPILAN TIDAK DIUBAH ========================================================== */ @media (max-width: 767px) { #horrorSlider { touch-action: pan-x pan-y !important; } #horrorSlider .mobile-card { touch-action: pan-x pan-y !important; } #horrorSlider .mobile-card img { touch-action: pan-x pan-y !important; } } /* ========================================================== ACTION MOBILE TEMPLATE SAMA DENGAN HOROR / RECOMMENDED ========================================================== */ @media (max-width: 767px) { #actionSlider { display: flex !important; grid-template-columns: none !important; gap: 14px !important; padding: 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x pan-y !important; scroll-behavior: auto !important; scroll-snap-type: x proximity !important; will-change: scroll-position !important; scrollbar-width: none !important; box-sizing: border-box !important; } #actionSlider::-webkit-scrollbar { display: none !important; } #actionSlider .mobile-card { flex: 0 0 auto !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; } #actionSlider .mobile-card img { 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; } #actionSlider .trending-view-all-box { width: 100% !important; aspect-ratio: 2 / 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background: #171717 !important; border: 1px solid #333 !important; border-radius: 6px !important; color: #fff !important; text-align: center !important; gap: 9px !important; } #actionSlider .trending-view-all-icon { font-size: 28px !important; line-height: 1 !important; } #actionSlider .trending-view-all-title { font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #fff !important; } #actionSlider .trending-view-all-arrow { font-size: 22px !important; line-height: 1 !important; color: #e50914 !important; } } /* ========================================================== KOMEDI MOBILE TEMPLATE SAMA DENGAN HOROR / AKSI / RECOMMENDED ========================================================== */ @media (max-width: 767px) { #comedySlider { display: flex !important; grid-template-columns: none !important; gap: 8px !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x pan-y !important; scroll-behavior: auto !important; scroll-snap-type: x proximity !important; will-change: scroll-position !important; scrollbar-width: none !important; box-sizing: border-box !important; } #comedySlider::-webkit-scrollbar { display: none !important; } #comedySlider .mobile-card { flex: 0 0 auto !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; } #comedySlider .mobile-card img { 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; } #comedySlider .trending-view-all-box { width: 100% !important; aspect-ratio: 2 / 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background: #171717 !important; border: 1px solid #333 !important; border-radius: 6px !important; color: #fff !important; text-align: center !important; gap: 9px !important; } #comedySlider .trending-view-all-icon { font-size: 28px !important; line-height: 1 !important; } #comedySlider .trending-view-all-title { font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #fff !important; } #comedySlider .trending-view-all-arrow { font-size: 22px !important; line-height: 1 !important; color: #e50914 !important; } } /* ========================================================== HNFLIX — VIEW ALL CARD CONSISTENCY HOROR / AKSI / KOMEDI Card terakhir harus sama ukuran dengan card film Tanpa icon ========================================================== */ @media (max-width: 767px) { #horrorSlider .trending-view-all, #actionSlider .trending-view-all, #comedySlider .trending-view-all { flex: 0 0 calc((100% - 16px) / 3) !important; width: calc((100% - 16px) / 3) !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } #horrorSlider .trending-view-all-box, #actionSlider .trending-view-all-box, #comedySlider .trending-view-all-box { width: 100% !important; aspect-ratio: 2 / 3 !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 10px !important; border-radius: 6px !important; } /* Icon sengaja tidak digunakan */ #horrorSlider .trending-view-all-icon, #actionSlider .trending-view-all-icon, #comedySlider .trending-view-all-icon { display: none !important; } #horrorSlider .trending-view-all-title, #actionSlider .trending-view-all-title, #comedySlider .trending-view-all-title { font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; text-align: center !important; } #horrorSlider .trending-view-all-arrow, #actionSlider .trending-view-all-arrow, #comedySlider .trending-view-all-arrow { font-size: 22px !important; line-height: 1 !important; } } @media (max-width: 380px) { #horrorSlider .trending-view-all-title, #actionSlider .trending-view-all-title, #comedySlider .trending-view-all-title { font-size: 12px !important; } #horrorSlider .trending-view-all-arrow, #actionSlider .trending-view-all-arrow, #comedySlider .trending-view-all-arrow { font-size: 20px !important; } } /* ========================================================== HNFLIX — VIEW ALL CARD FIX HOROR / AKSI / KOMEDI Pastikan kotak Lihat Semua benar-benar muncul di ujung slider ========================================================== */ @media (max-width: 767px) { #horrorSlider .trending-view-all, #actionSlider .trending-view-all, #comedySlider .trending-view-all { display: block !important; 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; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; flex-shrink: 0 !important; visibility: visible !important; opacity: 1 !important; } #horrorSlider .trending-view-all-box, #actionSlider .trending-view-all-box, #comedySlider .trending-view-all-box { display: flex !important; width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; min-height: 0 !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; background: #171717 !important; border: 1px solid #333 !important; border-radius: 6px !important; visibility: visible !important; opacity: 1 !important; } #horrorSlider .trending-view-all-icon, #actionSlider .trending-view-all-icon, #comedySlider .trending-view-all-icon { display: none !important; } } /* ========================================================== HNFLIX — CARD TERAKHIR SLIDER GENRE HOROR / AKSI / KOMEDI Paksa tampil sebagai card ke-5 ========================================================== */ @media (max-width: 767px) { #horrorSlider .trending-view-all, #actionSlider .trending-view-all, #comedySlider .trending-view-all { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; grid-column: auto !important; box-sizing: border-box !important; overflow: hidden !important; background: #151515 !important; border-radius: 7px !important; text-decoration: none !important; } #horrorSlider .trending-view-all-box, #actionSlider .trending-view-all-box, #comedySlider .trending-view-all-box { width: 100% !important; aspect-ratio: 2 / 3 !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 5px !important; background: #151515 !important; border: 1px solid #333 !important; border-radius: 7px !important; } #horrorSlider .trending-view-all-icon, #actionSlider .trending-view-all-icon, #comedySlider .trending-view-all-icon { display: none !important; } #horrorSlider .trending-view-all-title, #actionSlider .trending-view-all-title, #comedySlider .trending-view-all-title { display: block !important; font-size: 9px !important; line-height: 1.25 !important; font-weight: 600 !important; color: #fff !important; text-align: center !important; margin: 0 !important; } #horrorSlider .trending-view-all-arrow, #actionSlider .trending-view-all-arrow, #comedySlider .trending-view-all-arrow { display: block !important; font-size: 16px !important; line-height: 1 !important; color: #e50914 !important; margin-top: 5px !important; } } @media (max-width: 380px) { #horrorSlider .trending-view-all-title, #actionSlider .trending-view-all-title, #comedySlider .trending-view-all-title { font-size: 8px !important; } #horrorSlider .trending-view-all-arrow, #actionSlider .trending-view-all-arrow, #comedySlider .trending-view-all-arrow { font-size: 14px !important; margin-top: 4px !important; } } /* ========================================================== HNFLIX MOBILE — SAMAKAN SEMUA CARD SLIDER Mengikuti model card slider yang sudah rapi ========================================================== */ @media (max-width: 767px) { #trendingSlider, #latestSlider, #horrorSlider, #actionSlider, #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; box-sizing: border-box !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } #trendingSlider::-webkit-scrollbar, #latestSlider::-webkit-scrollbar, #horrorSlider::-webkit-scrollbar, #actionSlider::-webkit-scrollbar, #comedySlider::-webkit-scrollbar { display: none !important; } /* CARD */ #trendingSlider > .mobile-card, #latestSlider > .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; } /* POSTER */ #trendingSlider > .mobile-card .trending-poster-wrap, #latestSlider > .mobile-card .trending-poster-wrap, #horrorSlider > .mobile-card .trending-poster-wrap, #actionSlider > .mobile-card .trending-poster-wrap, #comedySlider > .mobile-card .trending-poster-wrap { width: 122px !important; height: 183px !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, #horrorSlider > .mobile-card .trending-poster-wrap img, #actionSlider > .mobile-card .trending-poster-wrap img, #comedySlider > .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, #horrorSlider > .mobile-card .mobile-card-info, #actionSlider > .mobile-card .mobile-card-info, #comedySlider > .mobile-card .mobile-card-info { width: 100% !important; box-sizing: border-box !important; padding: 5px 1px 4px !important; } /* JUDUL */ #trendingSlider > .mobile-card .mobile-card-title, #latestSlider > .mobile-card .mobile-card-title, #horrorSlider > .mobile-card .mobile-card-title, #actionSlider > .mobile-card .mobile-card-title, #comedySlider > .mobile-card .mobile-card-title { width: 100% !important; font-size: 11px !important; line-height: 16px !important; height: 32px !important; overflow: hidden !important; } /* META */ #trendingSlider > .mobile-card .mobile-card-meta, #latestSlider > .mobile-card .mobile-card-meta, #horrorSlider > .mobile-card .mobile-card-meta, #actionSlider > .mobile-card .mobile-card-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; } /* ====================================================== CARD LIHAT SEMUA ====================================================== */ #trendingSlider > .trending-view-all, #latestSlider > .trending-view-all, #horrorSlider > .trending-view-all, #actionSlider > .trending-view-all, #comedySlider > .trending-view-all { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; height: 183px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #151515 !important; border-radius: 7px !important; overflow: hidden !important; transform: none !important; } #trendingSlider > .trending-view-all .trending-view-all-box, #latestSlider > .trending-view-all .trending-view-all-box, #horrorSlider > .trending-view-all .trending-view-all-box, #actionSlider > .trending-view-all .trending-view-all-box, #comedySlider > .trending-view-all .trending-view-all-box { width: 100% !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } } /* ========================================================== HNFLIX MOBILE LIHAT SEMUA — CARD TERAKHIR SEMUA SLIDER ========================================================== */ @media (max-width: 767px) { #trendingSlider .trending-view-all, #latestSlider .trending-view-all, #recommendedSlider .trending-view-all, #horrorSlider .trending-view-all, #actionSlider .trending-view-all, #comedySlider .trending-view-all { flex: 0 0 calc((100% - 18px) / 4) !important; width: calc((100% - 18px) / 4) !important; min-width: calc((100% - 18px) / 4) !important; max-width: calc((100% - 18px) / 4) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; transform: none !important; } #trendingSlider .trending-view-all-box, #latestSlider .trending-view-all-box, #recommendedSlider .trending-view-all-box, #horrorSlider .trending-view-all-box, #actionSlider .trending-view-all-box, #comedySlider .trending-view-all-box { width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } } /* ========================================================== FIX — MUNGKIN KAMU SUKA LIHAT SEMUA JANGAN IKUT STRETCH TINGGI GRID ========================================================== */ @media (max-width: 767px) { #recommendedSlider .trending-view-all { align-self: start !important; } #recommendedSlider .trending-view-all-box { align-self: start !important; height: auto !important; min-height: 0 !important; aspect-ratio: 2 / 3 !important; flex: 0 0 auto !important; } } /* ========================================================== FIX FINAL — CARD LIHAT SEMUA SAMAKAN DENGAN CARD FILM 122x183 ========================================================== */ @media (max-width: 767px) { #trendingSlider > .trending-view-all, #latestSlider > .trending-view-all, #recommendedSlider > .trending-view-all, #horrorSlider > .trending-view-all, #actionSlider > .trending-view-all, #comedySlider > .trending-view-all { flex: 0 0 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; height: 183px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; align-self: flex-start !important; overflow: hidden !important; } #trendingSlider > .trending-view-all .trending-view-all-box, #latestSlider > .trending-view-all .trending-view-all-box, #recommendedSlider > .trending-view-all .trending-view-all-box, #horrorSlider > .trending-view-all .trending-view-all-box, #actionSlider > .trending-view-all .trending-view-all-box, #comedySlider > .trending-view-all .trending-view-all-box { width: 100% !important; height: 100% !important; min-height: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } } /* ========================================================== HNFLIX HOROR — FINAL UNIVERSAL SLIDER Tidak terpengaruh Android "Desktop Site" 20 card tetap horizontal ========================================================== */ #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; max-width: none !important; padding-left: 0 !important; padding-right: 14px !important; box-sizing: border-box !important; grid-template-columns: none !important; grid-auto-columns: none !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; padding: 0 !important; box-sizing: border-box !important; } #horrorSlider > .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; } #horrorSlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Card Lihat Semua tidak boleh muncul */ #horrorSlider > .trending-view-all, #horrorSlider .trending-view-all, #horrorSlider .trending-view-all-box { display: none !important; flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== HNFLIX MOBILE — HOME SLIDER FINAL 20 FILM / HORIZONTAL / 3 POSTER TERLIHAT POSISI CENTER DENGAN MARGIN KIRI-KANAN SEIMBANG ========================================================== */ @media (max-width: 767px) { #trendingSlider, #latestSlider, #recommendedSlider, #horrorSlider, #actionSlider, #comedySlider { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; gap: 10px !important; padding-left: 16px !important; padding-right: 16px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth !important; scrollbar-width: none !important; } #trendingSlider::-webkit-scrollbar, #latestSlider::-webkit-scrollbar, #recommendedSlider::-webkit-scrollbar, #horrorSlider::-webkit-scrollbar, #actionSlider::-webkit-scrollbar, #comedySlider::-webkit-scrollbar { display: none !important; } #trendingSlider > .mobile-card, #latestSlider > .mobile-card, #recommendedSlider > .mobile-card, #horrorSlider > .mobile-card, #actionSlider > .mobile-card, #comedySlider > .mobile-card { flex: 0 0 calc((100vw - 52px) / 3) !important; width: calc((100vw - 52px) / 3) !important; min-width: calc((100vw - 52px) / 3) !important; max-width: calc((100vw - 52px) / 3) !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #trendingSlider > .mobile-card:first-child, #latestSlider > .mobile-card:first-child, #recommendedSlider > .mobile-card:first-child, #horrorSlider > .mobile-card:first-child, #actionSlider > .mobile-card:first-child, #comedySlider > .mobile-card:first-child { margin-left: 0 !important; } } @media (max-width: 380px) { #trendingSlider, #latestSlider, #recommendedSlider, #horrorSlider, #actionSlider, #comedySlider { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; } #trendingSlider > .mobile-card, #latestSlider > .mobile-card, #recommendedSlider > .mobile-card, #horrorSlider > .mobile-card, #actionSlider > .mobile-card, #comedySlider > .mobile-card { flex-basis: calc((100vw - 44px) / 3) !important; width: calc((100vw - 44px) / 3) !important; min-width: calc((100vw - 44px) / 3) !important; max-width: calc((100vw - 44px) / 3) !important; } } /* ========================================================== SERIES MOBILE — SAMAKAN DENGAN SLIDER HOME LAIN Hanya untuk #seriesSlider ========================================================== */ @media (max-width: 767px) { #seriesSlider { display: flex !important; flex-direction: row !important; gap: 10px !important; padding: 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; box-sizing: border-box !important; } #seriesSlider::-webkit-scrollbar { display: none !important; } #seriesSlider > .mobile-card { flex: 0 0 calc((100vw - 52px) / 3) !important; width: calc((100vw - 52px) / 3) !important; min-width: calc((100vw - 52px) / 3) !important; max-width: calc((100vw - 52px) / 3) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; scroll-snap-align: start !important; } #seriesSlider > .mobile-card .trending-poster-wrap { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; box-sizing: border-box !important; } #seriesSlider > .mobile-card .trending-poster-wrap img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } #seriesSlider > .mobile-card .mobile-card-info { padding: 5px 4px 6px !important; } #seriesSlider > .mobile-card .mobile-card-title { font-size: 10px !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } #seriesSlider > .mobile-card .mobile-card-meta { display: flex !important; width: 100% !important; margin-top: 4px !important; font-size: 9px !important; line-height: 12px !important; } #seriesSlider > .trending-view-all { flex: 0 0 calc((100vw - 52px) / 3) !important; width: calc((100vw - 52px) / 3) !important; min-width: calc((100vw - 52px) / 3) !important; max-width: calc((100vw - 52px) / 3) !important; } } @media (max-width: 380px) { #seriesSlider { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; } #seriesSlider > .mobile-card, #seriesSlider > .trending-view-all { flex-basis: calc((100vw - 44px) / 3) !important; width: calc((100vw - 44px) / 3) !important; min-width: calc((100vw - 44px) / 3) !important; max-width: calc((100vw - 44px) / 3) !important; } } /* Series sementara disembunyikan dari Home Mobile */ .mobile-section:has(#seriesSlider) { display: none !important; } /* Penyesuaian posisi slider Home Mobile */ .mobile-slider { padding-left: 8px; }