.elementor-11123 .elementor-element.elementor-element-f7747a0{--display:flex;}/* Start custom CSS for html, class: .elementor-element-600ff40 *//* ══════════════════════════════════════
   GALERI — Filter tahun
   ══════════════════════════════════════ */

.vt-filter{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}
.vt-filter select{
  appearance: none;
  padding: .65rem 2.5rem .65rem 1rem;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2312315c' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat right .8rem center / 16px;
  font-size: .95rem;
  font-weight: 600;
  color: #12315c;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vt-filter select:hover{
  border-color: #2f6fd0;
  box-shadow: 0 4px 12px rgba(47,111,208,.15);
}
.vt-filter select:focus-visible{
  outline: 2px solid #2f6fd0;
  outline-offset: 2px;
}

.screen-reader-text{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ══════════════════════════════════════
   GALERI — Grid kartu
   ══════════════════════════════════════ */

.vt-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
}

.vt-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(18,49,92,.08);
  transition:
    transform .3s cubic-bezier(.22,.61,.36,1),
    box-shadow .3s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.vt-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 26px 50px rgba(18,49,92,.24);
}
.vt-card:focus-visible{
  outline: 3px solid #2f6fd0;
  outline-offset: 3px;
}
.vt-card[hidden]{ display: none; }

/* Garis aksen saat hover */
.vt-card::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: 4px;
  background: #2f6fd0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.vt-card:hover::after{
  transform: scaleX(1);
}

/* Gambar */
.vt-card img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  flex: 0 0 auto;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.vt-card:hover img{
  transform: scale(1.07);
}

/* Badge tahun */
.vt-card__date{
  position: absolute;
  right: 0;
  top: 62.5%;
  transform: translateY(-50%);
  z-index: 2;
  box-sizing: border-box;
  min-width: 76px;
  padding: .6rem .9rem;
  background: #1b2f8f;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 6px 18px rgba(27,47,143,.4);
  transition:
    transform .3s cubic-bezier(.22,.61,.36,1),
    background .3s ease,
    box-shadow .3s ease;
}
.vt-card__date b{ display: block; }
.vt-card:hover .vt-card__date{
  transform: translateY(-50%) scale(1.08);
  background: #2f6fd0;
  box-shadow: 0 10px 26px rgba(27,47,143,.5);
}

/* Judul — dikunci 3 baris, sisanya jadi elipsis */
.vt-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(1.28em * 3);
  padding: 1.1rem 90px .5rem 1.1rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.28;
  color: #12315c;
  transition: color .25s ease;
}
.vt-card:hover .vt-card__title{
  color: #2f6fd0;
}

/* Deskripsi — dikunci 2 baris */
.vt-card__desc{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(1.5em * 2);
  padding: 0 90px 1.2rem 1.1rem;
  font-size: .8rem;
  line-height: 1.5;
  color: #7b8496;
}

/* Animasi masuk saat scroll */
@keyframes vt-rise{
  from{ opacity: 0; transform: translateY(24px); }
  to  { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .vt-card{
      animation: vt-rise .6s both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .vt-card,
  .vt-card img,
  .vt-card__date,
  .vt-card::after{
    transition: none !important;
    animation: none !important;
  }
  .vt-card:hover{ transform: none; }
  .vt-card:hover img{ transform: none; }
}

@media (max-width: 900px){
  .vt-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .vt-cards{ grid-template-columns: 1fr; }
  .vt-filter{ justify-content: stretch; }
  .vt-filter select{ width: 100%; }
  .vt-card__date{ min-width: 66px; font-size: 1rem; padding: .5rem .7rem; }
  .vt-card__title,
  .vt-card__desc{ padding-right: 80px; }
}/* End custom CSS */