:root{
  --c1:#c7cfda; --c2:#354478; --c3:#d9dad8; --c4:#8e2d2d;
}

.card img{
  transition:transform 0.3s;
  border-radius:10px;
}
.card-img-top {
  width: 100%;
  height: 100%;      /* tinggi tetap sesuai desain */
  object-fit: cover;  /* crop proporsional tanpa meregang */
}
.card:hover img{ transform:scale(1.05);}
.view-mode-icon{
  cursor:pointer;
  font-size:1.5rem;
  margin:0 5px;
  color:var(--c2);
}
.view-mode-icon.active{ color:var(--c4); }
.star{
  font-size:1.3rem;
  color:gray;
  transition:transform 0.25s, color 0.25s;
  cursor:pointer;
}
.modal-content {
  border-radius: 12px;
  overflow: hidden;
}
.modal-body img {
  user-select: none;
  max-height: 90vh;
}
.card {
  position: relative;
}
.card .btn.btn-sm {
  border-radius: 20px;
  font-size: 0.85rem;
  padding: 4px 10px;
}

.toast-message {
  position: fixed;
  top: 20px;
  right: -300px;
  background: #198754;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 2000;
  opacity: 0;
  transition: right 0.4s ease, opacity 0.4s ease;
}
.toast-message.info { background: #0d6efd; }
.toast-message.error { background: #dc3545; }

.toast-message.show {
  right: 20px;
  opacity: 1;
}

.star.active{ color:gold; transform:scale(1.3) rotate(-10deg);}
.star:hover{ transform:scale(1.2) rotate(-5deg); color:gold; }
.eye-icon{color:var(--c2);margin-right:5px;}
.search-box{ max-width:400px;}
.list-view .card{ flex-direction:row; align-items:center;}
.list-view .card img{ width:150px; height:auto;}
.list-view .card-body{ padding-left:20px;}
.rating-count{ font-size:0.9rem; color:#555; margin-left:6px;}

/* ================= HEADER & LAYOUT ================= */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #c7cfda;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.header-banner {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;

  background-color: #c7cfda;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #293b7b;
  color: white;
  padding: 8px 8px;
  gap: 5px;
}

.header-home { width: 56px; }
.home-btn {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 1.05rem;
  cursor: pointer;
}
.home-btn:hover { background: #fff; color: #293b7b; }

.header-title {
  margin: 0;
  font-weight: 600;
  color: #fff;
  text-align: center;
  flex: 1;
  font-size: 1.4rem;
  white-space: nowrap;
  cursor: pointer;
}

.header-controls {
  display: flex;
  gap: 8px;
  min-width: 120px;
  justify-content: flex-end;
}
.view-toggle {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.view-toggle.active { background: #fff; color: #293b7b; }

@media (max-width:768px){
  .header-bar { padding: 8px 10px; }
  .header-title { font-size: 1.05rem; white-space: normal; }
  .search-box { width: 100%; margin-top: 8px; }
  .search-box .form-control, .search-box .form-select, .search-box .btn { min-width: 0; }
}

/* ================= TABLE FIX (Zebra + Hover) ================= */

/* FIXED: gunakan spesifik selector agar override bootstrap tanpa !important */
.table.poster-table {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border-collapse: collapse; /* FIXED */
}

/* FIXED: pastikan warna strip terlihat di semua browser */
.table.poster-table.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f8f9ff; /* soft blue tint */
}
.table.poster-table.table-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

/* FIXED: hover efek kuat */
.table.poster-table.table-hover tbody tr:hover {
  background-color: #e6ecff !important;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* header */
.table.poster-table thead.table-light th {
  background: linear-gradient(0deg, #2f4678, #293b7b);
  color: #fff;
  border-bottom: 0;
}

/* thumbnail */
.poster-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.poster-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* rating */
.rating .star { color: #cfcfcf; cursor: pointer; font-size: 1.1rem; }
.rating .star.active, .rating .star:hover { color: #f4c430; }

.poster-table { box-shadow: 0 6px 18px rgba(16,40,80,0.04); }

/* FIXED: Hilangkan style lain yang bisa bentrok */
.table > tbody > tr > td {
  vertical-align: middle;
  border-color: #dee2e6;
}