@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

body.dark-mode, html { background-color: #0f172a !important; }
body.dark-mode #page, body.dark-mode .site, body.dark-mode .ast-container { background-color: transparent !important; }
body.dark-mode .site-header { background-color: #1e293b !important; border-bottom: 1px solid #334155 !important; }
body.single-post .entry-content p { font-family: 'Lora', serif !important; font-size: 19px !important; color: #f1f5f9 !important; line-height: 1.85 !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #fff !important; font-family: 'Inter', sans-serif; }

.netflix-home { font-family: 'Inter', sans-serif; margin-bottom: 50px; }
.hero-banner { position: relative; height: 60vh; display: flex; align-items: flex-end; padding: 40px; margin-bottom: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.hero-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to top, #0f172a 0%, rgba(15,23,42,0) 100%); border-radius: 12px; }
.hero-content { position: relative; z-index: 2; max-width: 700px; }
.hero-title { font-size: 3.5rem; font-weight: 900; margin-bottom: 15px; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
.hero-desc { font-size: 1.2rem; color: #cbd5e1; margin-bottom: 25px; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); }
.btn-play { background: #e50914; color: #fff; padding: 12px 30px; border-radius: 4px; text-decoration: none; font-weight: 800; font-size: 1.2rem; transition: background 0.3s; display: inline-block; }
.btn-play:hover { background: #b20710; color: #fff; }

.row-container { padding: 0 20px 40px 20px; }
.row-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; padding-left: 10px; border-left: 4px solid #e50914; color: #fff; }
.row-inner { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; }
.row-inner::-webkit-scrollbar { display: none; }
.card { flex: 0 0 200px; scroll-snap-align: start; position: relative; border-radius: 8px; overflow: hidden; transition: transform 0.3s; background: #1e293b; text-decoration: none !important; }
.card:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 2; }
.card img { width: 100%; height: 280px; object-fit: cover; }
.card-title { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 10px 15px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); color: #fff; font-size: 1rem; font-weight: bold; text-align: center; }

.leaderboard-container { padding: 0 20px 40px 20px; }
.wpp-list { list-style: none !important; padding: 0 !important; counter-reset: wpp-counter; display: flex; flex-direction: column; gap: 15px; }
.wpp-list li { position: relative; display: flex; align-items: center; background: #1e293b; border-radius: 10px; padding: 12px; border: 1px solid #334155; }
.wpp-list li::before { counter-increment: wpp-counter; content: counter(wpp-counter); font-size: 5rem; font-weight: 900; color: rgba(255, 255, 255, 0.07); position: absolute; left: 5px; bottom: -15px; line-height: 1; z-index: 1; font-family: 'Inter', sans-serif;}
.wpp-list li img { width: 70px !important; height: 100px !important; object-fit: cover; border-radius: 6px; z-index: 2; margin-right: 15px; margin-left: 40px; }
.wpp-list li a { color: #f1f5f9 !important; font-weight: bold !important; font-size: 1.2rem !important; z-index: 2; text-decoration: none !important; }
.wpp-list li a:hover { color: #3b82f6 !important; }

@media (max-width: 768px) {
    .hero-banner { height: 40vh; padding: 20px; }
    .hero-title { font-size: 2rem; }
    .card { flex: 0 0 140px; }
    .card img { height: 200px; }
}