body{margin:0;font-family:'Segoe UI',sans-serif;background:#0d0d0d;color:#f0f0f0;overflow-x:hidden}
a{color:#ff4c4c;text-decoration:none}
.container{max-width:1200px;margin:auto;padding:20px;overflow-x:hidden}
.site-header{background:#0b0b0b;padding:20px 0;border-bottom:1px solid #222;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.main-nav .menu-list{list-style:none;display:flex;flex-wrap:wrap;gap:30px;margin:0;padding:0;justify-content:center;align-items:center}
.main-nav .menu-list li a{color:#f0f0f0;font-weight:600;text-transform:uppercase;font-size:1.05rem;letter-spacing:1px;position:relative;transition:color 0.3s ease}
.main-nav .menu-list li a::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:#ff4c4c;transition:width 0.3s ease}
.main-nav .menu-list li a:hover{color:#ff4c4c}
.main-nav .menu-list li a:hover::after{width:100%}
@media(max-width:768px){
  .main-nav .menu-list{flex-direction:column;gap:15px}
  .main-nav .menu-list li a{font-size:1rem}
}
.film-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.film-card{background:#1a1a1a;border-radius:6px;overflow:hidden;transition:transform 0.3s ease;text-align:center}
.film-card:hover{transform:scale(1.05)}
.film-thumb img{width:100%;height:auto;max-width:100%;display:block;border-radius:6px 6px 0 0}
.film-title{padding:10px;font-size:0.95rem;color:#fff;background:#111}
.single-movie{margin-top:40px}
.movie-layout{display:flex;flex-wrap:wrap;gap:40px}
.movie-poster{flex:0 0 300px}
.movie-poster img{width:100%;border-radius:8px}
.movie-details{flex:1;min-width:300px}
.trailer-embed iframe{width:100%;height:300px;border-radius:8px;margin-bottom:20px}
.info h1{font-size:2rem;margin-bottom:10px}
.info p{margin:8px 0;font-size:1rem;color:#ccc}
.cast-gallery{margin-top:40px}
.cast-gallery h2{font-size:1.5rem;margin-bottom:20px;text-align:center}
.cast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.cast-card{background:#1a1a1a;border-radius:6px;text-align:center;padding:10px;transition:transform 0.3s ease}
.cast-card:hover{transform:scale(1.05)}
.cast-card img{width:100%;border-radius:6px}
.cast-name{margin-top:8px;font-size:0.9rem;color:#fff}
@media(max-width:1024px){
  .film-grid,.cast-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:768px){
  .movie-layout{flex-direction:column;align-items:center}
  .movie-poster{width:100%;max-width:300px}
  .film-grid{grid-template-columns:repeat(2,1fr)}
  .cast-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .film-grid{grid-template-columns:repeat(1,1fr)}
  .cast-grid{grid-template-columns:repeat(2,1fr)}
  .trailer-embed iframe{height:200px}
}
.tag-list-page {
  padding: 40px 20px;
  max-width: 960px;
  margin: auto;
}

.page-title {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.tag-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.tag-box:hover {
  background: #2a2a2a;
  border-color: #555;
}

.tag-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.tag-count {
  font-size: 0.85rem;
  color: #aaa;
}

.tag-page {
  padding: 40px 20px;
  max-width: 960px;
  margin: auto;
}

.tag-header h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #fff;
}

.tag-header p {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 30px;
}

.tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-list li {
  margin-bottom: 12px;
}

.tag-list a {
  color: #eee;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.tag-list a:hover {
  color: #fff;
  text-decoration: underline;
}

.tag-page {
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
}

.tag-header h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #fff;
}

.tag-header p {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 30px;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.movie-card {
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease;
}

.movie-card:hover {
  transform: scale(1.03);
}

.movie-card img {
  width: 100%;
  height: auto;
  display: block;
}

.movie-title {
  padding: 10px;
  font-size: 0.95rem;
  color: #fff;
}

.actor-page {
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
}

.actor-header {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.actor-poster img {
  width: 240px;
  height: auto;
  border-radius: 6px;
}

.actor-info h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #fff;
}

.actor-info p {
  font-size: 1rem;
  color: #ccc;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.movie-card {
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease;
}

.movie-card:hover {
  transform: scale(1.03);
}

.movie-card img {
  width: 100%;
  height: auto;
  display: block;
}

.movie-title {
  padding: 10px;
  font-size: 0.95rem;
  color: #fff;
}

.cast-card img {
  width: 185px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.cast-name {
  margin-top: 8px;
  font-size: 1rem;
  text-align: center;
}
.cast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}
.cast-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 20px;
  justify-content: center;
}

.movie-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.movie-card img {
  width: 185px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.movie-title {
  margin-top: 8px;
  font-size: 1rem;
  text-align: center;
}

a {
  color: #ffcc00;
  text-decoration: underline;
  font-weight: 600;
}
a:hover {
  color: #ffffff;
  text-decoration: underline;
}