.poster-gallery-page .detail-hero { padding: 95px 7vw 80px; background: url("hero-panduan-media-sosial.jpg") center / cover; }
.poster-gallery-page .detail-hero::before { background: #513b2fb8; }
.poster-gallery-page .back-link { margin-bottom: 24px; }
.poster-gallery-page .detail-hero h1 { max-width: 760px; margin: 18px 0; font: 62px/1.04 Georgia, serif; letter-spacing: -2px; }
.poster-gallery-page .detail-intro { max-width: 650px; color: #d8e1da; font: 19px/1.7 Georgia, serif; }
.poster-gallery-page .detail-content { width: min(100% - 48px, 1200px); padding: 32px 0 56px; }
.poster-gallery-page .detail-main { padding: 28px; border-radius: 20px; }
.poster-gallery-page .detail-main > h2 { margin: 0 0 24px; font: 400 36px/1.2 Georgia, serif; color: var(--forest); letter-spacing: -.6px; }
.poster-gallery-page .detail-main > div { max-width: none; }
.poster-feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 24px; border: 1px solid #d6dfca; border-radius: 16px; background: #eff3e6; }
.poster-feature-preview { display: block; padding: 8px; background: #e1e8d7; border-radius: 12px; overflow: hidden; }
.poster-feature-preview img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.poster-carousel { min-width: 0; }
.poster-carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.poster-carousel-track::-webkit-scrollbar { display: none; }
.poster-carousel-track .poster-feature { flex: 0 0 100%; box-sizing: border-box; min-width: 0; margin: 0; scroll-snap-align: start; }
.poster-feature-copy { min-width: 0; }
.poster-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.poster-carousel-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ccd8c2; border-radius: 50%; color: var(--forest); background: #edf2e5; cursor: pointer; }
.poster-carousel-controls svg { width: 20px; height: 20px; }
.poster-carousel-controls button:disabled { opacity: .4; cursor: default; }
.poster-carousel-counter { min-width: 60px; text-align: center; font: 700 13px/1.4 Arial, sans-serif; color: var(--forest); }
.poster-feature-copy .eyebrow { margin: 0 0 14px; font: 700 11px/1.4 Arial, sans-serif; letter-spacing: 1.4px; }
.poster-feature-copy h3 { margin: 0 0 16px; color: var(--forest); font: 400 clamp(26px, 3vw, 36px)/1.15 Georgia, serif; }
.poster-feature-copy > p { font: 400 16px/1.65 Arial, sans-serif; color: #536158; }
.poster-feature-copy .poster-tip { margin: 18px 0 0; font-size: 13px; }
.poster-gallery-page .detail-sections { display: block; margin-top: 32px; }
.poster-gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.poster-gallery-page .poster-gallery-heading h2 { margin: 0; color: var(--forest); font: 400 36px/1.2 Georgia, serif; letter-spacing: -.6px; }
.poster-count { flex-shrink: 0; color: #65735e; font: 600 12px/1.5 Arial, sans-serif; }
.poster-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.poster-filters button { min-height: 44px; padding: 10px 16px; border: 1px solid #d4deca; border-radius: 24px; color: var(--forest); background: #fbfcf6; font: 600 13px/1.4 Arial, sans-serif; cursor: pointer; }
.poster-filters button[aria-pressed="true"] { background: var(--forest); color: white; border-color: var(--forest); }
.poster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.poster-card { display: flex; flex-direction: column; padding: 0; min-width: 0; overflow: hidden; border: 1px solid #d8dfd0; border-radius: 14px; background: #fffdf7; }
.poster-preview { display: block; padding: 8px; background: #f0f1e8; border-bottom: 1px solid #d8dfd0; }
.poster-preview img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.poster-copy { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.poster-copy small { color: var(--green); font: 700 10px/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .7px; }
.poster-copy h3 { margin: 12px 0 10px; color: var(--forest); font: 700 18px/1.35 Arial, sans-serif; }
.poster-copy p { margin: 0 0 20px; color: #536158; font: 400 14px/1.65 Arial, sans-serif; }
.poster-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.poster-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid #ccd8c2; border-radius: 8px; color: var(--forest); background: #fffdf7; font: 700 12px/1.4 Arial, sans-serif; }
.poster-actions a:first-child { background: var(--forest); color: white; border-color: var(--forest); }
.poster-actions a { gap: 8px; }
.poster-button-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.poster-actions a:hover { background: #dce7cd; color: var(--forest); }
.poster-gallery-page a:focus-visible,
.poster-gallery-page button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media(max-width:980px) {
  .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:700px) {
  .poster-gallery-page .detail-content { width: calc(100% - 28px); margin: 0 auto; padding: 24px 0 40px; }
  .poster-gallery-page .detail-main { padding: 18px; }
  .poster-gallery-page .detail-hero { padding: 55px 20px 60px; }
  .poster-gallery-page .detail-hero h1 { font-size: 44px; }
  .poster-gallery-page .detail-intro { font-size: 17px; }
  .poster-feature { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .poster-grid { grid-template-columns: 1fr; }
  .poster-gallery-heading { align-items: start; }
}

@media (max-width: 700px) {
  .poster-gallery-page .detail-main > h2,
  .poster-gallery-page .poster-gallery-heading h2 { font-size: 28px; letter-spacing: -.3px; }
}

.poster-feature-preview { width: 100%; max-width: 360px; box-sizing: border-box; margin-inline: auto; }
.poster-preview img { max-width: 280px; margin-inline: auto; }
.poster-reference { font: 400 12px/1.6 Arial, sans-serif; color: #65735e; overflow-wrap: anywhere; }
.poster-reference a { color: #285b3d; text-decoration: underline; text-underline-offset: 3px; }
.poster-reference span { display: inline-block; margin-left: 8px; }

.poster-gallery-page .detail-main { min-width: 0; width: 100%; box-sizing: border-box; }
.poster-gallery-page .detail-main > div { min-width: 0; }
.poster-gallery-heading h2 { min-width: 0; }
@media (max-width: 700px) { .poster-gallery-heading { flex-wrap: wrap; } }