/* Styling Khusus Halaman Index (Hero & Content Grid) */
.hero { position: relative; height: 70vh; min-height: 500px; width: 100%; display: flex; align-items: center; justify-content: flex-start; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0.7; }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(0deg, var(--vadd-bg) 0%, rgba(5,18,10,0.4) 50%, rgba(5,18,10,0.1) 100%); }
.hero-gradient-side { position: absolute; inset: 0; background: linear-gradient(90deg, var(--vadd-bg) 0%, rgba(5,18,10,0.7) 40%, rgba(5,18,10,0) 100%); }

.hero-content-wrapper { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; padding: 0 1rem; width: 100%; margin-top: 4rem; }
.hero-box { max-width: 600px; }
.hero-title { font-size: 2.5rem; font-weight: 900; line-height: 1.15; margin-bottom: 1rem; }
.hero-title span { background: linear-gradient(90deg, var(--vadd-primary), var(--vadd-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { color: #d1d5db; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.main-container { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1rem 4rem; display: flex; flex-direction: column; gap: 3rem; position: relative; z-index: 20; margin-top: -5rem; }

/* Horizontal Carousel */
.carousel-wrapper { position: relative; }
.carousel-container { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }

/* Khusus Kartu Poster Portrait di Carousel Populer */
.carousel-portrait-card { 
    min-width: 160px; 
    max-width: 180px; 
    flex: 0 0 auto; 
    scroll-snap-align: start; 
    cursor: pointer; 
    position: relative; 
}

/* Grid Poster (Terbaru) */
.poster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.poster-card { position: relative; cursor: pointer; }
.poster-box { aspect-ratio: 2 / 3; border-radius: 0.375rem; overflow: hidden; position: relative; border: 1px solid transparent; transition: border-color 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.poster-card:hover .poster-box, .carousel-portrait-card:hover .poster-box { border-color: var(--vadd-accent); }
.poster-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.poster-card:hover .poster-box img, .carousel-portrait-card:hover .poster-box img { transform: scale(1.05); }
.poster-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.9) 100%); }
.poster-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.75rem; }
.poster-title { font-weight: bold; color: #ffffff; font-size: 0.85rem; line-height: 1.2; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-footer { display: flex; justify-content: space-between; align-items: center; }
.poster-rating { color: var(--vadd-gold); font-size: 0.65rem; }

@media (min-width: 640px) { .poster-grid { grid-template-columns: repeat(3, 1fr); } .carousel-portrait-card { min-width: 180px; max-width: 200px; } }
@media (min-width: 768px) { .poster-grid { grid-template-columns: repeat(4, 1fr); } .hero-title { font-size: 3.5rem; } }
@media (min-width: 1024px) { .poster-grid { grid-template-columns: repeat(6, 1fr); } }