/* App-level additions on top of the design system (kept out of components.css, which is copied from ../FS). */
/* Uploaded logo (admin → Pengaturan situs) */
.wordmark-logo { display: block; width: auto; max-width: 180px; object-fit: contain; }

/* Hero visual uploaded in admin → Hero halaman (replaces the CSS illustration on Sites/About, banner on Work) */
.page-hero-img { margin: 0; align-self: center; }
.page-hero-img img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.page-hero-banner { margin: 0 0 var(--space-12); overflow: hidden; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-sticker-lg); }
.page-hero-banner img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; }
@media (max-width: 1023px) { .page-hero-img { max-width: 560px; } }

/* About: founder photo uploaded in admin */
.portrait .portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Hover motion for CMS hero images (Sites, About): gentle float, tilts toward the pointer on hover */
.page-hero-img[data-tilt] { perspective: 900px; }
.page-hero-img[data-tilt] img { transform-origin: 50% 50%; transition: transform 600ms var(--ease-spring), filter 600ms var(--ease-spring); animation: fs-hero-float 6s ease-in-out infinite; will-change: transform; }
.page-hero-img[data-tilt]:hover img { transform: rotateY(calc(var(--tx, 0) * 16deg)) rotateX(calc(var(--ty, 0) * -12deg)) scale(1.04); filter: drop-shadow(10px 14px 0 rgb(30 22 51 / .16)); }
.page-hero-img[data-tilt].is-tilting img { transition: transform 120ms linear, filter 600ms var(--ease-spring); }
@keyframes fs-hero-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .page-hero-img[data-tilt] img { animation: none; transition: none; } .page-hero-img[data-tilt]:hover img { transform: none; } }

/* Pricing cards (homepage + Sites): sticker lift on hover */
.price-grid .pricing-card { transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-slow) var(--ease-spring), background-color var(--dur-base) ease; will-change: transform; }
.price-grid .pricing-card:hover, .price-grid .pricing-card:focus-within { transform: translate(-4px, -6px) rotate(-0.8deg); box-shadow: var(--shadow-sticker-lg); z-index: 1; }
.price-grid .pricing-card:nth-child(even):hover, .price-grid .pricing-card:nth-child(even):focus-within { transform: translate(-4px, -6px) rotate(0.8deg); }
.price-grid .pricing-card.is-featured:hover { box-shadow: 10px 12px 0 var(--color-border-strong); }
.price-grid .pricing-card:not(.is-featured):hover { background-color: var(--color-candy-lemon-soft); }
.price-grid .pricing-price { transition: transform var(--dur-slow) var(--ease-spring); transform-origin: left center; }
.price-grid .pricing-card:hover .pricing-price { transform: scale(1.06); }
.price-grid .checklist li svg { transition: transform var(--dur-slow) var(--ease-spring); }
.price-grid .pricing-card:hover .checklist li svg { transform: scale(1.25) rotate(-8deg); }
.price-grid .pricing-card:hover .checklist li:nth-child(2) svg { transition-delay: 40ms; }
.price-grid .pricing-card:hover .checklist li:nth-child(3) svg { transition-delay: 80ms; }
.price-grid .pricing-card:hover .checklist li:nth-child(4) svg { transition-delay: 120ms; }

/* FAQ accordion: spacing moved from margin to padding so the open/close animation (site.js) measures it */
.accordion .answer { margin: 0; padding-top: 1em; padding-bottom: calc(var(--space-6) + 1em); }
.accordion .plus { transition: transform var(--dur-slow) var(--ease-spring), background-color var(--dur-base) ease; }

@media (prefers-reduced-motion: reduce) {
  .price-grid .pricing-card, .price-grid .pricing-price, .price-grid .checklist li svg { transition: none; }
  .price-grid .pricing-card:hover, .price-grid .pricing-card:nth-child(even):hover { transform: none; }
}

/* Pitch deck download (Pengaturan situs → Pitch deck) */
.deck-link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-text-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--color-candy-pink-strong); }
.deck-link:hover { text-decoration-color: currentColor; }
.deck-link small { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.deck-link .ico, .deck-btn .ico { width: 18px; height: 18px; flex: none; }
.deck-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); margin-top: var(--space-8); padding: var(--space-5) var(--space-6); background: var(--color-candy-pink-soft); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-sm); }
.deck-ico { display: grid; place-items: center; width: 52px; height: 64px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: .06em; background: var(--color-bg-surface); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-sm) var(--radius-lg) var(--radius-sm) var(--radius-sm); transform: rotate(-6deg); }
.deck-text { display: grid; gap: var(--space-1); }
.deck-text b { font-size: var(--text-heading-sm); line-height: 1.25; }
.deck-text span { color: var(--color-text-secondary); }
.deck-text small { color: var(--color-text-muted); white-space: nowrap; }
.sites-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.pv-price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pv-deck { font-size: var(--text-body-sm); }
@media (max-width: 767px) {
  .deck-box { grid-template-columns: auto minmax(0, 1fr); }
  .deck-box .deck-btn { grid-column: 1 / -1; justify-content: center; }
}
.cta-side { display: grid; gap: var(--space-4); justify-items: start; }