/* ================================================
   🌗 THEME VARIABLES (Dark & Light Mode Compatible)
   ================================================ */
:root {
  /* 🌙 Default: Dark Mode */
  --ng-bg: #0f0f10;
  --ng-card: rgba(255,255,255,0.05);
  --ng-border: rgba(255,255,255,0.12);
  --ng-accent: #00b7ff;
  --ng-text: #e6eef8;
  --ng-muted: rgba(230,238,248,0.6);
}

body.light-mode {
  /* ☀️ Light Mode */
  --ng-bg: #f8f9fb;
  --ng-card: rgba(0,0,0,0.05);
  --ng-border: rgba(0,0,0,0.1);
  --ng-accent: #007bff;
  --ng-text: #0a0a0a;
  --ng-muted: rgba(0,0,0,0.6);
}


/* ================================================
   🆕 Neoglass New Series (Horizontal Scroll)
   ================================================ */
.ng-newseries {
  overflow-x: auto;
  display: flex;
  gap: 14px;
  padding: 8px 10px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ng-accent) transparent;
}

/* Custom scrollbar (Chrome / Edge) */
.ng-newseries::-webkit-scrollbar {
  height: 8px;
}
.ng-newseries::-webkit-scrollbar-track {
  background: transparent;
}
.ng-newseries::-webkit-scrollbar-thumb {
  background-color: var(--ng-accent);
  border-radius: 4px;
}

/* Card Container */
.ng-newseries .ng-card {
  flex: 0 0 140px;
  scroll-snap-align: start;
  background: var(--ng-card);
  border: 1px solid var(--ng-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.ng-newseries .ng-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  background: var(--ng-row, rgba(255,255,255,0.08));
}

/* Cover image */
.ng-newseries .ng-card-cover {
  height: 190px;
  background-size: cover;
  background-position: center;
  background-color: #222;
  transition: transform 0.3s ease;
}

.ng-newseries .ng-card:hover .ng-card-cover {
  transform: scale(1.03);
}

/* Card content */
.ng-newseries .ng-card-body {
  padding: 6px 8px 10px;
  text-align: center;
}

/* Title */
.ng-newseries .ng-card-title {
  font-size: 0.9rem;
  color: var(--ng-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.3;
}

/* Subtitle (opsional, kalau mau nambah deskripsi singkat) */
.ng-newseries .ng-card-sub {
  font-size: 0.8rem;
  color: var(--ng-muted);
  margin-top: 2px;
}

/* 📱 Responsive */
@media (max-width: 600px) {
  .ng-newseries .ng-card {
    flex: 0 0 120px;
  }
  .ng-newseries .ng-card-cover {
    height: 160px;
  }
}