/* product-detail: gaya aktif sesuai tanggung jawab modul. */
.product-main { padding-block: 26px 76px; }
.product-page .nav-dropdown-toggle[aria-current] { text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 13px; }
.product-page .nav-dropdown-menu a[aria-current] { color: var(--purple); font-weight: 650; }
.product-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 7vw, 104px); align-items: start; padding-block: 32px 42px; }
.product-intro h1 { font-size: clamp(35px, 3.6vw, 50px); font-weight: 550; letter-spacing: -.055em; line-height: 1.12; max-width: 700px; }
.detail-format { color: var(--purple); font-size: 11px; margin-bottom: 18px; }
.detail-deck { font: italic 25px/1.4 Georgia, serif; color: var(--purple); letter-spacing: -.025em; margin-top: 22px; max-width: 580px; }
.product-intro .lead { color: var(--muted); font-size: 14px; line-height: 1.9; margin-top: 20px; max-width: 620px; }
.product-meta-line { display: flex; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }
.product-meta-line > span { color: var(--muted); font-size: 11px; line-height: 1.7; }
.product-pricing { display: flex; align-items: start; gap: 28px; margin-top: 24px; }
.product-price-cell { min-width: 130px; }
.price-label { color: var(--muted); font-size: 11px; }
.price-current { font-size: 32px; font-weight: 550; line-height: 1.3; letter-spacing: -.04em; margin-top: 6px; }
.price-original { color: var(--muted); font-size: 13px; text-decoration: line-through; margin-top: 6px; }
.price-note { color: var(--muted); font-size: 12px; line-height: 1.8; flex: 1; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.product-showcase { width: min(100%, 430px); justify-self: end; }
.product-cover { position: relative; width: 100%; }
.product-cover > img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.intro-facts { padding-top: 22px; }
.detail-checks { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.detail-checks li { padding-left: 5px; margin-top: 6px; }
.detail-checks li > span:first-child { display: none; }
.detail-jumps { display: flex; gap: 28px; position: sticky; top: var(--header); z-index: 30; background: var(--paper); border-block: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.detail-jumps a { display: inline-flex; align-items: center; min-height: 52px; flex: 0 0 auto; font-size: 12px; }
.detail-jumps a:hover { color: var(--purple); }
.detail-section { padding-block: 38px 0; margin-top: 64px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 82px); }
.detail-section:first-of-type { border-top: 0; }
.detail-jumps + .detail-section { border-top: 0; margin-top: 0; }
.detail-section h2 { max-width: 720px; font-size: clamp(32px, 3.25vw, 46px); font-weight: 500; line-height: 1.16; letter-spacing: -.045em; }
.detail-section h3 { font-size: 21px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.detail-section p { color: var(--muted); font-size: 14px; line-height: 1.9; margin-top: 16px; }
.detail-section .section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 40px; margin-bottom: 34px; }
.detail-section .section-heading h2 { margin-top: 0; }
.detail-section .section-heading > p { max-width: 440px; margin-top: 0; }
.detail-section .section-heading p { max-width: 780px; }
.detail-section .section-heading + .detail-grid { margin-top: 28px; }
.detail-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.detail-points > div { padding-block: 22px; border-bottom: 1px solid var(--line); }
.detail-points > div:first-child { padding-top: 0; }
.detail-points p { margin-top: 10px; }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 28px; margin-top: 28px; }
.detail-item { padding-top: 20px; border-top: 1px solid var(--line); }
.detail-item-body { display: block; height: 100%; }
.detail-icon { color: var(--purple); margin-bottom: 18px; }
.detail-icon .icon { width: 25px; height: 25px; }
.detail-label { display: block; color: var(--purple); font-size: 10px; margin-bottom: 10px; }
.detail-item h3 { font-size: 21px; }
.detail-item p { font-size: 13px; margin-top: 12px; }
.detail-item > span:first-child { display: block; color: var(--purple); font: 12px Consolas, monospace; margin-bottom: 12px; }
.detail-item > strong { font-size: 20px; font-weight: 500; line-height: 1.4; display: block; }
.detail-grid .button { white-space: normal; text-align: left; margin-top: 16px; }
.detail-step > span { color: var(--purple); font: 12px Consolas, monospace; }
.detail-preview { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.4fr); gap: 36px; align-items: start; margin-top: 32px; }
.detail-preview-copy p { font-size: 13px; }
.detail-frame > img, .detail-preview-media > img { width: 100%; height: auto; object-fit: contain; }
.detail-mini-list { padding-left: 20px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.detail-mini-list li { margin-top: 8px; }
.detail-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .5fr); gap: 72px; align-items: center; }
.detail-access-link { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 64px; padding: 20px 24px; border-radius: 6px; white-space: normal; }
.detail-access-link span { font-size: 12px; }
.detail-access-link strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
.detail-access-link:hover strong { color: var(--ink); }
.support-links { display: flex; flex-wrap: wrap; gap: 12px; }
.detail-faq { margin-top: 28px; max-width: 900px; }
.detail-faq .faq-item p { margin-top: 0; }
.detail-version-link { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.detail-version-link p { width: 100%; color: var(--muted); font-size: 12px; }
.product-showcase figcaption { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 14px; }
.product-image-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; font-size: 10px; pointer-events: none; }
.product-image-hint .icon { width: 15px; height: 15px; }
.product-page .button { border-radius: 6px; }
.product-facts { display: flex; flex-wrap: wrap; gap: 14px 32px; list-style: none; margin: 0; padding: 24px 0; border-block: 1px solid var(--line); }
.product-facts li { font-size: 12px; line-height: 1.8; color: var(--muted); }
.product-included { margin-top: 20px; }
.product-included summary { display: inline-flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 46px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 600; list-style: none; }
.product-included summary::-webkit-details-marker { display: none; }
.product-included summary:hover { border-color: var(--ink); }
.product-included summary .icon { width: 16px; height: 16px; }
.product-included[open] summary .icon { transform: rotate(180deg); }
.product-included .detail-checks { padding-block: 18px 8px; columns: 2; column-gap: 44px; }
.product-included .detail-checks li { break-inside: avoid; margin-bottom: 8px; }
.product-terms { margin-top: 18px; font-size: 11px; color: var(--muted); line-height: 1.8; }
.product-intro + .detail-jumps, .product-included + .detail-jumps, .product-facts + .detail-jumps { margin-top: 28px; }
.detail-preview-media { align-self: start; }
.detail-card-visual { margin-bottom: 22px; }
.detail-card-visual img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.detail-item:has([data-product-card]) { border-top: 0; padding-top: 0; }
.detail-item:has([data-product-card]) .detail-icon { display: none; }
[data-product-card] { display: flex; flex-direction: column; }
[data-product-card]:hover h3 { color: var(--purple); }

@media (max-width: 1100px) {
.product-intro, .detail-story, .detail-access { gap: 40px; }
.detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; }
.detail-item h3 { font-size: 19px; }
.product-pricing { flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 760px) {
.product-main { padding-block: 16px 48px; }
.product-intro { grid-template-columns: 1fr; gap: 30px; padding-block: 20px 30px; }
.product-intro h1 { font-size: clamp(32px, 8vw, 42px); }
.detail-format { margin-bottom: 14px; }
.detail-deck { font-size: 22px; margin-top: 18px; }
.product-intro .lead { font-size: 14px; margin-top: 20px; }
.product-showcase { width: min(100%, 430px); justify-self: center; }
.product-pricing { gap: 20px; }
.price-current { font-size: 30px; }
.price-note { min-width: 130px; }
.detail-actions { margin-top: 22px; gap: 10px; }
.detail-actions .button { min-height: 46px; white-space: normal; padding-inline: 17px; gap: 12px; }
.detail-jumps { top: calc(var(--header) + env(safe-area-inset-top, 0px)); gap: 24px; }
.detail-jumps a { font-size: 11px; min-height: 48px; }
.detail-section { margin-top: 48px; padding-top: 30px; scroll-margin-top: calc(var(--header) + 70px); }
.detail-section h2 { font-size: clamp(30px, 7.8vw, 38px); }
.detail-section h3 { font-size: 20px; }
.detail-story, .detail-preview, .detail-access { grid-template-columns: 1fr; gap: 26px; }
.detail-section p { font-size: 13px; }
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
.detail-item h3 { font-size: 18px; overflow-wrap: anywhere; }
.detail-item p { font-size: 12px; }
.detail-item > strong { font-size: 18px; overflow-wrap: anywhere; }
.detail-section .section-heading { grid-template-columns: 1fr; gap: 18px; }
.detail-section .section-heading > p { max-width: 100%; }
.product-facts { gap: 12px 22px; padding-block: 20px; }
.product-facts li { font-size: 11px; }
.product-included summary { display: flex; width: 100%; text-align: left; }
.product-included .detail-checks { columns: 1; }
.detail-actions { display: grid; grid-template-columns: 1fr; }
.detail-actions .button { min-height: 50px; }
.detail-card-visual { margin-bottom: 14px; }
}
@media print {
.detail-jumps, .carousel-button, .carousel-dots, .detail-actions, .detail-access-link { display: none; }
.product-intro, .detail-story, .detail-preview { display: block; }
}