/* Shared styles for the /layanan/* service pages (same palette and fonts as styles.css). */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root { --black: #000; --white: #fff; --gray-100: #f5f5f5; --gray-300: #d0d0d0; --gray-500: #6b6b6b; --gray-700: #2a2a2a; }
body { background: var(--white); color: var(--black); font: 17px/1.65 'Source Sans Pro', Arial, sans-serif; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
.logo { height: 26px; width: auto; }

main { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
section { padding: 56px 0; border-top: 1px solid var(--gray-300); }
section.hero { border-top: 0; }

h1, h2 { font-family: 'Bebas Neue', Arial, sans-serif; font-weight: 400; letter-spacing: 0.5px; line-height: 1; }
h1 { font-size: clamp(44px, 7vw, 84px); margin: 14px 0 20px; }
h2 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 20px; }
h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
p { max-width: 62ch; margin-bottom: 12px; }
.lead { font-size: 21px; line-height: 1.5; }

.crumbs { font-size: 14px; color: var(--gray-500); }
.crumbs a { color: var(--gray-500); }

.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding-top: 24px; }
.hero-media { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.btn { display: inline-block; padding: 14px 26px; background: var(--black); color: var(--white); border: 2px solid var(--black); font-weight: 600; font-size: 15px; text-decoration: none; transition: background 0.2s, color 0.2s; }
.btn:hover { background: var(--white); color: var(--black); }
.btn-ghost { background: transparent; color: var(--black); }
.btn-ghost:hover { background: var(--black); color: var(--white); }
.btn-small { padding: 9px 16px; font-size: 14px; }
.btn-light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-light:hover { background: transparent; color: var(--white); }

.features { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.features li { border: 1px solid var(--gray-300); padding: 18px 16px; font-weight: 600; }
#hasil > p { margin-bottom: 20px; }
.others { padding-left: 20px; }
.others li { margin-bottom: 8px; }

/* Sneak peek: 9:16 clips span two rows of square photos (two squares + gap ~ 9:16, light side crop). */
.peek { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 12px; }
.peek img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--gray-100); }
.clip { grid-row: span 2; position: relative; contain: size; background: var(--black); }
.clip:nth-child(2) { grid-column: 4; }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.peek-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 20px 24px; border: 1px solid var(--gray-300); }
.peek-cta p { margin: 0; font-weight: 600; }

/* Production Only packages: the Best Value card is inverted and lifted */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin: 28px 0 40px; }
.package { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--gray-300); }
.package h3 { font-size: 20px; font-weight: 400; margin: 0; }
.package h3 span { font-family: 'Bebas Neue', Arial, sans-serif; font-size: 60px; line-height: 1; }
.package-price { font-family: 'Bebas Neue', Arial, sans-serif; font-size: 48px; line-height: 1; margin: 10px 0 4px; }
.package-rate { color: var(--gray-500); font-size: 15px; }
.package ul { list-style: none; margin: 12px 0 20px; flex: 1; }
.package li { padding: 9px 0; border-bottom: 1px solid var(--gray-300); font-size: 16px; }
.package li:last-child { border-bottom: 0; }
.package .btn { text-align: center; }
.package-save { font-weight: 700; }
.package.best { background: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-12px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }
.package.best .package-rate { color: var(--gray-300); }
.package.best li { border-color: var(--gray-700); }
.package-badge { position: absolute; top: -14px; left: 24px; padding: 4px 12px; background: var(--white); color: var(--black); border: 2px solid var(--black); border-radius: 100px; font-size: 13px; font-weight: 700; }
.extra-hour { margin: -12px 0 36px; }
.addons-title { font-size: 20px; }
.addons { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.addons li { padding: 6px 14px; border: 1px solid var(--gray-300); border-radius: 100px; font-size: 15px; }
.addons-note { font-weight: 600; }


.faq details { border-bottom: 1px solid var(--gray-300); padding: 16px 0; max-width: 820px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.faq details p { margin: 10px 0 0; }

.cta { background: var(--black); color: var(--white); padding: 56px 32px; border: 0; margin: 24px 0; }
.cta p { color: var(--gray-300); }
.cta .btn { margin-top: 12px; }

.foot { max-width: 1200px; margin: 0 auto; padding: 32px 16px 48px; color: var(--gray-500); font-size: 15px; border-top: 1px solid var(--gray-300); }
.foot p { margin-bottom: 6px; }

/* /artikel/* pages reuse this stylesheet */
.article { max-width: 760px; margin: 0 auto; padding: 24px 0 56px; }
.article h1 { font-size: clamp(40px, 6vw, 64px); }
.article h2 { margin-top: 44px; }
.article p, .article li { max-width: none; }
.article ul { padding-left: 22px; margin-bottom: 12px; }
.article li { margin-bottom: 6px; }
.meta { color: var(--gray-500); font-size: 15px; }
.article-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; margin: 28px 0; background: var(--gray-100); }
.table-wrap { overflow-x: auto; }
.article table { width: 100%; border-collapse: collapse; font-size: 16px; }
.article th, .article td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--gray-300); }
.article thead th { border-bottom: 2px solid var(--black); }
.article tbody th { font-weight: 700; white-space: nowrap; }
.checklist { list-style: none; padding-left: 0 !important; }
.checklist li { padding-left: 30px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 2px solid var(--black); }

/* floating WhatsApp button, same look as the homepage .wa-fab (styles.css) */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; background: #25d366; color: #0b3d1f; border-radius: 100px; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab { border: 0; font-family: inherit; cursor: pointer; }
.wa-fab:focus-visible, .wa-sheet :focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.wa-sheet { position: fixed; right: 20px; bottom: 85px; top: auto; left: auto; margin: 0; width: min(380px, calc(100vw - 32px)); max-height: min(650px, calc(100vh - 100px)); padding: 0; border: 1px solid var(--gray-300); border-radius: 16px; background: var(--white); color: var(--black); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22); overflow-y: auto; overscroll-behavior: contain; }
.wa-sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
.wa-sheet form { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px; }
.wa-sheet h3 { font-family: 'Bebas Neue', Arial, sans-serif; font-weight: 400; font-size: 26px; margin-bottom: 2px; }
.wa-note { color: var(--gray-500); font-size: 14px; margin-bottom: 8px; }
.wa-sheet label { font-size: 13px; font-weight: 700; color: var(--gray-700); margin-top: 6px; }
.wa-sheet input, .wa-sheet select, .wa-sheet textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 4px; font: inherit; font-size: 15px; background: var(--white); color: var(--black); }
.wa-sheet textarea { min-height: 70px; resize: vertical; }
.wa-error { color: #b00020; font-size: 14px; margin-top: 8px; }
.wa-submit { margin-top: 16px; width: 100%; cursor: pointer; font-family: inherit; }
.wa-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--gray-500); }
.foot { padding-bottom: 96px; }

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; gap: 28px; }
    .features { grid-template-columns: 1fr 1fr; }
    .hero-media { aspect-ratio: 4 / 5; max-height: 70vh; }
    .peek { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .clip:nth-child(2) { grid-column: 2; }
    .peek-cta { padding: 18px 16px; }
    .packages { grid-template-columns: 1fr; gap: 28px; }
    .package.best { transform: none; }
    .wa-fab { width: 56px; padding: 0; justify-content: center; }
    .wa-fab span { display: none; }
    .wa-sheet { right: 16px; bottom: 82px; width: calc(100vw - 32px); max-width: 390px; max-height: calc(100vh - 95px); }
    .article th, .article td { padding: 10px 8px; font-size: 15px; }
    .article tbody th { white-space: normal; }
    .cta { padding: 40px 20px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .wa-fab { transition: none; } }