/* UDP Katalog Foto: bingkai lengkung emas dan grid katalog */

.udpk [hidden] { display: none !important; }

.udpk {
  --udpk-accent: var(--green, #1f6b57);
  --udpk-ink: #2b2a28;
  --udpk-muted: #6b665d;
}

.udpk-note {
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff7e0;
  color: #5c4500;
}

/* Filter jenis */
.udpk-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 28px;
}
.udpk-chip {
  appearance: none;
  border: 1px solid #d8cfbd;
  background: #fff;
  color: var(--udpk-ink);
  padding: 8px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.udpk-chip[aria-pressed="true"] {
  background: var(--udpk-accent);
  border-color: var(--udpk-accent);
  color: #fff;
}
.udpk-chip:focus-visible,
.udpk-btn:focus-visible,
.udpk-link:focus-visible {
  outline: 3px solid #c0912f;
  outline-offset: 3px;
}

/* Grid */
.udpk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 30px 22px;
}
.udpk-card { text-align: center; }
.udpk-link { display: block; color: inherit; text-decoration: none; }
.udpk-name { margin: 16px 0 2px; font-size: 1.05rem; line-height: 1.3; }
.udpk-meta { margin: 0 0 12px; font-size: .85rem; color: var(--udpk-muted); }
.udpk-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.udpk-btn {
  appearance: none;
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--udpk-accent);
  background: var(--udpk-accent);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
}
.udpk-btn.udpk-ghost { background: transparent; color: var(--udpk-accent); }
.udpk-morewrap { text-align: center; margin: 32px 0 0; }

/* Bingkai lengkung emas (semua foto 4:5, dipotong dalam lengkungan) */
.udpk-frame {
  --g1: #f1d58a;
  --g2: #c0912f;
  --g3: #7d5512;
  display: block;
  padding: 5px;
  border-radius: 50% 50% 10px 10px / 38% 38% 10px 10px;
  background: linear-gradient(145deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 62%, var(--g1) 100%);
  box-shadow: 0 10px 26px rgba(60, 40, 10, .22), inset 0 0 0 1px rgba(255, 244, 205, .55);
  transition: transform .35s ease, box-shadow .35s ease;
}
.udpk-in {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: inherit;
  border: 2px solid rgba(255, 246, 215, .85);
  background: #efe7d8;
}
.udpk-in img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%; /* kepala tetap terlihat saat dipotong */
  transition: transform .6s ease;
}
.udpk-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: #8a7a55;
  font-size: .95rem;
}

a.udpk-link:hover .udpk-frame,
a.udpk-link:focus-visible .udpk-frame {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(60, 40, 10, .3), inset 0 0 0 1px rgba(255, 244, 205, .7);
}
a.udpk-link:hover .udpk-in img,
a.udpk-link:focus-visible .udpk-in img {
  transform: scale(1.05);
}

@media (max-width: 480px) {
  .udpk-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .udpk-btn { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .udpk-frame, .udpk-in img { transition: none; }
  a.udpk-link:hover .udpk-frame,
  a.udpk-link:focus-visible .udpk-frame,
  a.udpk-link:hover .udpk-in img,
  a.udpk-link:focus-visible .udpk-in img { transform: none; }
}