/* =============================================
   ARKIB LAPORAN TAHUN LEPAS (laporanYYYY.html)
   Paparan sahaja untuk pemeriksa — tiada tambah/edit/padam
   ============================================= */
.arkib-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 22px 0 28px;
}
.arkib-row {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; width: 100%; padding: 0 20px;
}
.arkib-stage {
  position: relative;
  height: calc(100vh - 230px);
  min-height: 320px;
  aspect-ratio: 1587 / 2245;
  max-width: calc(100vw - 140px);
  border-radius: 10px;
  overflow: hidden;
  background: #0f1320;
  box-shadow: 0 28px 64px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.35);
  touch-action: pan-y;
  perspective: 1400px;
}
/* imej disusun bertindih supaya laporan lama & baru boleh bergerak serentak */
.arkib-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none;
  will-change: transform, opacity;
}
.arkib-zoom {
  z-index: 2;
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(9,12,20,0.7); color: var(--g1);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 8px;
  padding: 6px 10px; font: 600 0.72rem 'Inter', sans-serif;
  text-decoration: none; backdrop-filter: blur(8px);
}
.arkib-zoom:hover { background: rgba(9,12,20,0.9); }

.arkib-counter {
  font-size: 0.8rem; font-weight: 600; color: var(--g2);
  font-variant-numeric: tabular-nums; letter-spacing: 0.4px;
}

.arkib-thumbs {
  display: flex; gap: 8px;
  max-width: min(1100px, calc(100vw - 32px));
  overflow-x: auto; padding: 4px 4px 8px;
  scrollbar-width: thin;
}
.arkib-thumbs button {
  flex-shrink: 0; width: 52px; height: 74px;
  padding: 0; border-radius: 5px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #0f1320;
  opacity: 0.55; transition: opacity .15s, border-color .15s;
}
.arkib-thumbs button:hover { opacity: 0.9; }
.arkib-thumbs button.active { border-color: var(--blue); opacity: 1; }
.arkib-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 680px) {
  .arkib-row { gap: 6px; padding: 0 6px; }
  .arkib-stage { height: auto; width: calc(100vw - 72px); max-width: none; }
  .arkib-thumbs button { width: 40px; height: 57px; }
}
  

/* tab pilih tahun dalam topnav */
.arkib-years { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--glass); border: 1px solid var(--glass-b); }
.arkib-years a {
  padding: 6px 13px; border-radius: 8px;
  font: 600 0.8rem 'Inter', sans-serif; color: var(--g2); text-decoration: none;
  transition: background .15s, color .15s;
}
.arkib-years a:hover { color: var(--g1); background: rgba(255,255,255,0.06); }
.arkib-years a.active { background: var(--blue); color: #fff; }