.pao-page { background: var(--bg); color: var(--text); }
.pao-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.pao-page h1, .pao-page h2, .pao-page h3, .pao-page p { margin-top: 0; }
.pao-page em { color: var(--amber); font-style: normal; }
.pao-intro em, .pao-benefit-section em, .pao-solutions-section em, .pao-product-certification-section em, .pao-video-section em { color: var(--accent-dark); }
.pao-product-solution-card p em { color: var(--accent-dark); }
.pao-hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; background: var(--text); color: #fff; }
.pao-hero-image { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,35,59,.98) 0%, rgba(22,35,59,.84) 28%, rgba(22,35,59,.2) 70%), url('../assets/images/produk.jpg') center / cover; animation: pao-hero-scale 12s ease-out both; }
.pao-hero-content { position: relative; z-index: 1; padding-top: 40px; }
.pao-eyebrow { margin-bottom: 18px; color: var(--amber); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pao-eyebrow span { margin-left: 15px; color: #c8d1dc; }
.pao-eyebrow-dark { color: var(--accent-dark); }
.pao-hero h1 { max-width: 700px; margin-bottom: 18px; color: #fff; font-family: var(--font-heading); font-size: clamp(48px, 6vw, 78px); line-height: .96; animation: pao-rise var(--motion-slow) .1s var(--motion-ease) both; }
.pao-hero-lead { max-width: 620px; margin-bottom: 30px; color: #d8e0e8; font-size: 16px; animation: pao-rise var(--motion-slow) .22s var(--motion-ease) both; }
.pao-actions { display: flex; align-items: center; gap: 24px; animation: pao-rise var(--motion-slow) .34s var(--motion-ease) both; }
.pao-actions .btn { min-height: 52px; }
.pao-button { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border: 1px solid var(--accent-dark); border-radius: 12px; background: var(--accent-darker); color: #fff; font-size: 14px; font-weight: 600; transition: background var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease); }
.pao-button:hover { background: var(--accent-dark); color: #fff; transform: translateY(-3px); }
.pao-text-link { color: var(--text-light); font-size: 15px; font-weight: 600; }
.pao-text-link i { color: var(--text-light); }
.pao-hero-note { position: absolute; right: 7%; bottom: 74px; display: grid; grid-template-columns: auto auto; gap: 0 13px; padding: 15px 0 15px 20px; border-left: 2px solid var(--amber); color: #fff; font-family: var(--font-heading); font-size: 22px; line-height: 1.05; }
.pao-hero-note span { color: var(--amber); }
.pao-shortcuts { position: sticky; top: 106px; z-index: 30; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(15,23,42,.07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pao-shortcuts-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.pao-shortcuts-label { flex: 0 0 auto; color: var(--accent-darker); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pao-shortcuts-list { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pao-shortcuts-list::-webkit-scrollbar { display: none; }
.pao-shortcut-link { flex: 0 0 auto; padding: 9px 13px; border-radius: 999px; color: var(--text-muted); font-size: 11px; font-weight: 600; transition: background var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard); }
.pao-shortcut-link:hover, .pao-shortcut-link.is-active { background: var(--accent-darker); color: #fff; }
.pao-section { padding: 68px 0; scroll-margin-top: 50px; }
.pao-intro { background: var(--bg); }
.pao-intro-grid, .pao-application-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: start; }
.pao-section-heading h2 { max-width: 610px; margin-bottom: 14px; font-family: var(--font-heading); font-size: clamp(32px, 3vw, 42px); line-height: 1.02; }
.pao-section-heading > p:last-child, .pao-copy, .pao-benefit-section .pao-section-heading > p { color: var(--text-muted); font-size: 13px; }
.pao-copy { padding-top: 6px; }
.pao-copy p { margin-bottom: 22px; }
.pao-feature-visual { position: relative; margin-top: 48px; }
.pao-feature-visual img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; }
.pao-feature-visual > div { position: absolute; left: 24px; bottom: 24px; display: block; max-width: 340px; padding: 18px 20px; background: var(--accent-darker); color: #fff; }
.pao-feature-visual strong { display: block; margin-bottom: 5px; font-family: var(--font-heading); font-size: 22px; line-height: 1; }
.pao-feature-visual small { display: block; color: #eadfe0; font-size: 11px; line-height: 1.45; }
.pao-dark-section, .pao-application-section { background: var(--text); color: #fff; }
.pao-light-heading h2 { color: #fff; }
.pao-light-heading > p:last-child { max-width: 580px; color: #c8d1dc; }
.pao-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 46px; }
.pao-process-card { position: relative; min-height: 285px; padding: 22px; border: 1px solid rgba(255,255,255,.16); overflow: hidden; background: rgba(255,255,255,.05); transition: transform var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease-standard); }
.pao-process-card:hover { border-color: var(--amber); transform: translateY(-6px); }
.pao-process-card > span { color: var(--amber); font-size: 12px; font-weight: 800; }
.pao-process-card i { display: block; margin: 28px 0 18px; color: #fff; font-size: 25px; }
.pao-process-card h3 { margin-bottom: 10px; color: #fff; font-family: var(--font-heading); font-size: 24px; line-height: 1.05; }
.pao-process-card p { position: relative; z-index: 1; color: #c8d1dc; font-size: 12px; line-height: 1.6; }
.pao-benefit-section { overflow: hidden; background: linear-gradient(145deg, #fff 0%, #fff 58%, #f7eeee 100%); }
.pao-benefit-header { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr); gap: 72px; align-items: end; margin-bottom: 40px; }
.pao-benefit-header h2 { max-width: 690px; margin: 0; font-family: var(--font-heading); font-size: clamp(36px, 4vw, 56px); line-height: 1; }
.pao-benefit-header > p { max-width: 510px; margin: 0 0 4px; color: var(--text-muted); font-size: 13px; line-height: 1.75; }
.pao-timeline { margin: 0 0 40px; }
.pao-timeline-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.pao-timeline-heading > div > span { display: block; margin-bottom: 8px; color: var(--accent-dark); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.pao-timeline-heading h3 { margin: 0; color: var(--text); font-family: var(--font-heading); font-size: 29px; line-height: 1; }
.pao-timeline-heading h3 em { color: var(--accent-dark); }
.pao-timeline-replay { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(119,3,22,.22); border-radius: 8px; background: #fff; color: var(--accent-darker); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard); }
.pao-timeline-replay:hover { background: var(--accent-darker); color: #fff; }
.pao-timeline-card { padding: 24px 24px 18px; border: 1px solid #273247; border-radius: 16px; background: linear-gradient(145deg, #16233b, #101a2d); color: #fff; box-shadow: 0 18px 38px rgba(22,35,59,.16); }
.pao-timeline-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 2px 13px; }
.pao-timeline-meta > span { color: #b8c5d4; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.pao-timeline-meta strong { color: var(--amber); font-size: 14px; font-variant-numeric: tabular-nums; }
.pao-timeline-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.pao-timeline-legend span { display: inline-flex; align-items: center; gap: 6px; color: #d7e0ea; font-size: 10px; }
.pao-timeline-dot { width: 8px; height: 8px; border-radius: 50%; }
.pao-timeline-dot-risk { background: #ef6b55; }.pao-timeline-dot-pao { background: #31ab74; }
.pao-timeline-visual { position: relative; }
.pao-timeline-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pao-timeline-grid line { stroke: rgba(207,219,232,.17); stroke-width: 1; }
.pao-timeline-flash-zone { fill: #e8a23c; opacity: .11; transition: opacity .25s ease; }
.pao-timeline-axis, .pao-timeline-tick { fill: #aebccc; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.pao-timeline-tick { font-size: 11px; letter-spacing: 0; }.pao-timeline-zone-label { fill: #f3bf67; font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: .08em; opacity: .8; }
.pao-timeline-risk-fill { fill: url(#paoTimelineFill); opacity: 0; transition: opacity .3s ease; }.pao-timeline-line { fill: none; stroke-width: 4; stroke-linecap: round; }.pao-timeline-line-risk { stroke: #ef6b55; }.pao-timeline-line-pao { stroke: #31ab74; }
.pao-timeline-cursor { stroke: rgba(255,255,255,.54); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0; }.pao-timeline-point { opacity: 0; }.pao-timeline-point-risk { fill: #ef6b55; }.pao-timeline-point-pao { fill: #31ab74; }.pao-timeline-check { opacity: 0; }.pao-timeline-check circle { fill: #31ab74; }.pao-timeline-check path { fill: none; stroke: #102035; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pao-timeline-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid currentColor; border-radius: 999px; background: #16233b; box-shadow: 0 8px 18px rgba(0,0,0,.2); font-size: 10px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, -125%) scale(.9); transition: opacity .24s ease, transform .24s ease; white-space: nowrap; }.pao-timeline-badge.is-visible { opacity: 1; transform: translate(-50%, -135%) scale(1); }.pao-timeline-badge-pao, .pao-timeline-badge-safe { color: #49c789; }.pao-timeline-badge-risk { color: #f0957d; }
.pao-timeline-notes { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(207,219,232,.18); }.pao-timeline-notes span { display: inline-flex; align-items: flex-start; gap: 7px; color: #c6d1dd; font-size: 10px; line-height: 1.5; }.pao-timeline-notes i { margin-top: 2px; color: var(--amber); }.pao-timeline-notes b { color: #fff; }
.pao-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pao-benefit-card { position: relative; min-height: 215px; padding: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.9); transition: transform var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease-standard), box-shadow var(--motion-base) var(--motion-ease-standard); }
.pao-benefit-card::after { position: absolute; right: -34px; bottom: -45px; width: 110px; height: 110px; border: 18px solid rgba(119,3,22,.04); border-radius: 50%; content: ''; }
.pao-benefit-card:hover { z-index: 1; border-color: rgba(198,40,40,.4); box-shadow: 0 18px 34px rgba(22,35,59,.09); transform: translateY(-5px); }
.pao-benefit-card > span { position: absolute; top: 22px; right: 22px; color: #a9b0bb; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.pao-benefit-card > i { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 26px; border-radius: 12px; background: #f7e9eb; color: var(--accent-darker); font-size: 17px; }
.pao-benefit-card h3 { max-width: 260px; margin-bottom: 9px; font-family: var(--font-heading); font-size: 25px; line-height: 1; }
.pao-benefit-card p { position: relative; z-index: 1; margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.65; }
.pao-benefit-card-accent { border-color: var(--accent-darker); background: var(--accent-darker); }
.pao-benefit-card-accent > span { color: rgba(255,255,255,.55); }
.pao-benefit-card-accent > i { background: rgba(255,255,255,.12); color: var(--amber); }
.pao-benefit-card-accent h3 { color: #fff; }
.pao-benefit-card-accent p { color: #eadfe0; }
.pao-benefit-card-accent::after { border-color: rgba(255,255,255,.07); }
.pao-impact-panel { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 0; margin-top: 18px; overflow: hidden; border-radius: 18px; background: var(--text); color: #fff; }
.pao-impact-intro, .pao-impact-item { min-height: 150px; padding: 25px; }
.pao-impact-intro { background: var(--accent-darker); }
.pao-impact-intro span { display: block; margin-bottom: 16px; color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.pao-impact-intro h3 { max-width: 240px; color: #fff; font-family: var(--font-heading); font-size: 27px; line-height: 1; }
.pao-impact-item { display: flex; align-items: flex-start; gap: 13px; border-left: 1px solid rgba(255,255,255,.12); }
.pao-impact-item > i { margin-top: 2px; color: var(--amber); font-size: 17px; }
.pao-impact-item strong { display: block; margin-bottom: 8px; font-family: var(--font-heading); font-size: 19px; line-height: 1; }
.pao-impact-item p { margin: 0; color: #c8d1dc; font-size: 10px; line-height: 1.6; }
.pao-solutions-section { background: var(--bg); }
.pao-solutions-section .home-product-grid { margin-top: 42px; }
.pao-products-action { display: flex; justify-content: center; margin-top: 30px; }
.pao-products-action .btn { justify-content: center; min-width: 240px; }
.pao-product-certification-section { border-top: 1px solid var(--border); background: #fff; }
.pao-certification-header { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr); gap: 72px; align-items: end; }
.pao-certification-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 34px; }
.pao-certification-card { display: grid; flex: 0 1 calc((100% - 36px) / 3); grid-template-columns: 38% minmax(0, 1fr); min-width: 0; min-height: 190px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.pao-certification-product-image { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.pao-certification-content { display: flex; min-width: 0; flex-direction: column; padding: 22px; }
.pao-certification-status { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pao-certification-card h3 { margin: 22px 0 24px; color: var(--text); font-family: var(--font-heading); font-size: 23px; font-weight: 700; line-height: 1.1; text-transform: none; }
.pao-certification-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.pao-certification-detail strong { color: var(--text); font-size: 13px; }
.pao-solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 42px; }
.pao-product-solution-card { display: grid; grid-template-columns: 38% 1fr; min-height: 230px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease-standard); }
.pao-product-solution-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(28,16,13,.1); }
.pao-product-solution-card img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.pao-product-solution-card > div { padding: 23px; }
.pao-product-solution-card span { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.pao-product-solution-card h3 { margin: 11px 0 10px; font-family: var(--font-heading); font-size: 25px; line-height: 1; }
.pao-product-solution-card p { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.pao-application-intro { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.pao-application-note { max-width: 260px; margin: 0 0 5px; padding-left: 16px; border-left: 2px solid var(--amber); color: #c8d1dc; font-size: 12px; }
.pao-application-note span { display: block; margin-bottom: 8px; color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.pao-application-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; margin-top: 48px; }
.pao-application-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: #101b2d; transition: transform var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease-standard); }
.pao-application-card:hover { border-color: var(--amber); transform: translateY(-6px); }
.pao-application-card img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: transform var(--motion-image) var(--motion-ease), opacity var(--motion-base) var(--motion-ease-standard); }
.pao-application-card:hover img { opacity: .78; transform: scale(1.06); }
.pao-application-card::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(229, 233, 241, 0.04) 50%, rgba(22,35,59,.96) 100%); content: ''; }
.pao-application-card-overlay { position: absolute; right: 20px; bottom: 19px; left: 20px; z-index: 1; }
.pao-application-card-overlay h3 { max-width: 240px; margin: 0px 0 5px; color: #fff; font-family: var(--font-heading); font-size: 27px; line-height: .95; }
.pao-application-card-overlay p { max-width: 270px; margin: 0; color: #d8e0e8; font-size: 11px; line-height: 1.45; }
.pao-video-section { background: var(--bg-soft); }
.pao-video-header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); gap: 52px; align-items: end; }
.pao-video-header > p { max-width: 480px; margin: 0 0 4px; color: var(--text-muted); font-size: 13px; line-height: 1.75; }
.pao-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.pao-video-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; transition: border-color var(--motion-base) var(--motion-ease-standard), transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease-standard); }
.pao-video-card:hover { border-color: rgba(122,31,43,.35); box-shadow: 0 16px 34px rgba(22,35,59,.09); transform: translateY(-4px); }
.pao-video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; background: var(--text); cursor: pointer; }
.pao-video-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--motion-base) var(--motion-ease-standard), transform var(--motion-image) var(--motion-ease); }
.pao-video-card:hover .pao-video-frame img { opacity: .78; transform: scale(1.04); }
.pao-video-play { position: absolute; top: 50%; left: 50%; display: grid; width: 66px; height: 66px; place-items: center; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: var(--accent-darker); color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.28); transform: translate(-50%, -50%); transition: background var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease); }
.pao-video-play i { margin-left: 4px; font-size: 20px; }
.pao-video-trigger:hover .pao-video-play { background: var(--accent-dark); transform: translate(-50%, -50%) scale(1.08); }
.pao-video-trigger:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.pao-video-copy { padding: 20px 22px 22px; }
.pao-video-copy > span { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.pao-video-copy h3 { margin: 9px 0 8px; color: var(--text); font-family: var(--font-heading); font-size: 25px; line-height: 1.05; }
.pao-video-copy p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.pao-video-modal { position: fixed; inset: 0; z-index: 900; display: grid; padding: 110px 20px 28px; place-items: center; opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease; }
.pao-video-modal.is-open { opacity: 1; visibility: visible; }
.pao-video-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(25, 8, 8, 0.244); cursor: pointer; }
.pao-video-modal-dialog { position: relative; z-index: 1; width: min(760px, calc(100% - 24px)); overflow: visible; padding: 10px; border: 1px solid var(--bg); border-radius: 18px; background: var(--bg); box-shadow: 0 28px 80px rgba(0,0,0,.45); transform: translateY(16px) scale(.98); transition: transform .24s ease; }
.pao-video-modal.is-open .pao-video-modal-dialog { transform: translateY(0) scale(1); }
.pao-video-modal-close { position: absolute; top: 18px; right: 18px; z-index: 3; display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--accent-darker); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pao-video-modal-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 11px; background: #000; }
.pao-video-modal-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.pao-video-youtube-link { display: none; }
.pao-video-youtube-link i { color: #ff3145; font-size: 17px; }
body.pao-video-modal-open { overflow: hidden; }
@keyframes pao-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pao-hero-scale { from { transform: scale(1.05); } to { transform: scale(1); } }
@media (min-width: 601px) and (max-width: 900px) { .pao-intro-grid, .pao-application-grid { gap: 30px; } .pao-feature-visual img { height: 260px; } .pao-benefit-header, .pao-certification-header { gap: 35px; } .pao-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pao-impact-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pao-impact-item:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } .pao-impact-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.12); } .pao-video-header { gap: 30px; } }
@media (max-width: 600px) { .pao-intro-grid, .pao-application-grid { gap: 28px; } .pao-feature-visual { margin-top: 26px; } .pao-feature-visual img { height: 210px; } .pao-benefit-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; } .pao-benefit-header h2 { font-size: 34px; } .pao-benefit-grid { grid-template-columns: 1fr; gap: 12px; } .pao-benefit-card { min-height: 0; } .pao-impact-panel { grid-template-columns: 1fr; } .pao-impact-intro, .pao-impact-item { min-height: 0; padding: 22px; } .pao-impact-item { border-top: 1px solid rgba(255,255,255,.12); border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .pao-hero-image { animation: none; } .pao-hero h1, .pao-hero-lead, .pao-actions { animation: none; } .pao-video-modal, .pao-video-modal-dialog { transition: none; } }
@media (max-width: 900px) { .pao-shell { padding: 0 32px; } .pao-process-grid { grid-template-columns: repeat(2, 1fr); } .pao-intro-grid, .pao-benefit-grid, .pao-application-grid { gap: 38px; } .pao-application-intro { align-items: flex-start; flex-direction: column; gap: 22px; } .pao-application-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; } .pao-solution-grid { grid-template-columns: 1fr; } .pao-cta-inner { align-items: flex-start; flex-direction: column; } }
@media (max-width: 600px) { body { font-size: 14px; } .pao-shell { width: 100%; padding: 0 20px; } .pao-hero { min-height: 680px; } .pao-hero-image { background-position: 62% center; } .pao-hero h1 { font-size: 40px; } .pao-hero-lead { font-size: 14px; } .pao-eyebrow span { display: block; margin: 7px 0 0; } .pao-actions { flex-wrap: nowrap; align-items: stretch; gap: 8px; } .pao-actions .pao-button, .pao-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 11px 7px; gap: 5px; font-size: 11px; line-height: 1.2; text-align: center; } .pao-hero-note { right: 24px; bottom: 28px; font-size: 17px; } .pao-shortcuts { top: 90px; } .pao-shortcuts-inner { min-height: 58px; padding-right: 0; } .pao-shortcuts-label { display: none; } .pao-shortcuts-list { padding-right: 20px; } .pao-shortcut-link { padding: 8px 11px; font-size: 11.5px; } .pao-section { padding: 44px 0; scroll-margin-top: 160px; } .pao-intro-grid, .pao-benefit-grid, .pao-application-grid, .pao-video-header, .pao-video-grid { grid-template-columns: 1fr; } .pao-certification-header { grid-template-columns: 1fr; gap: 15px; } .pao-certification-header > p { font-size: 13px; } .pao-certification-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; } .pao-certification-card { min-height: 0; padding: 16px 18px; } .pao-certification-status { font-size: 11px; letter-spacing: .08em; } .pao-certification-card h3 { margin: 8px 0 10px; font-size: 17px; } .pao-certification-detail { display: block; padding-top: 8px; font-size: 11px; } .pao-certification-detail strong { display: block; margin-top: 3px; font-size: 13px; } .pao-section-heading h2 { font-size: 28px; } .pao-section-heading > p:last-child, .pao-copy, .pao-benefit-section .pao-section-heading > p { font-size: 14px; } .pao-feature-visual { margin-top: 32px; } .pao-feature-visual img { height: 280px; } .pao-process-grid { grid-template-columns: 1fr; } .pao-process-card { min-height: 245px; } .pao-benefit-image, .pao-benefit-image img { min-height: 360px; } .pao-product-solution-card { grid-template-columns: 1fr; } .pao-product-solution-card img { height: 170px; min-height: 0; } .pao-application-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 12px; margin-top: 32px; } .pao-application-card-overlay { right: 11px; bottom: 11px; left: 11px; } .pao-application-card-overlay span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; } .pao-application-card-overlay h3 { margin: 6px 0 4px; font-size: 17px; } .pao-application-card-overlay p { font-size: 12px; line-height: 1.4; } .pao-application-caption { display: block; } .pao-application-caption span { display: block; margin-top: 5px; } .pao-application-list { grid-template-columns: 1fr 1fr; margin-top: 44px; } .pao-video-header { gap: 16px; } .pao-video-grid { gap: 14px; margin-top: 28px; } .pao-video-play { width: 52px; height: 52px; } .pao-video-copy { padding: 16px; } .pao-video-copy h3 { font-size: 21px; } .pao-video-copy p { font-size: 13px; } .pao-video-modal { padding: 16px; } .pao-video-modal-dialog { padding: 6px; border-radius: 13px; } .pao-video-modal-close { top: -14px; right: -8px; width: 36px; height: 36px; } .pao-video-youtube-link { margin-top: 8px; font-size: 12px; } .pao-cta { padding: 28px 0; } .pao-cta-inner { width: calc(100% - 24px); padding: 30px 26px; } .pao-cta h2 { font-size: 24px; } }
@media (min-width: 601px) and (max-width: 900px) { .pao-benefit-grid { gap: 14px; } }
@media (max-width: 600px) { .pao-benefit-grid { gap: 12px; } }
@media (max-width: 600px) { .pao-hero { min-height: 620px; } .pao-hero h1 { font-size: 42px; } .pao-hero-lead { font-size: 14px; } }

@media (max-width: 700px) {
    .pao-timeline { margin-bottom: 30px; }
    .pao-timeline-heading { align-items: flex-start; flex-direction: column; }
    .pao-timeline-replay { padding: 9px 12px; }
    .pao-timeline-card { padding: 18px 16px; border-radius: 12px; }
    .pao-timeline-meta { align-items: flex-start; flex-direction: column; gap: 10px; padding-bottom: 8px; }
    .pao-timeline-legend { justify-content: flex-start; gap: 8px 12px; }
    .pao-timeline-legend span { font-size: 11px; }
    .pao-timeline-axis { font-size: 10px; }
    .pao-timeline-tick { font-size: 10px; }
    .pao-timeline-zone-label { font-size: 9px; }
    .pao-timeline-line { stroke-width: 3; }
    .pao-timeline-badge { padding: 4px 6px; font-size: 9.5px; }
    .pao-timeline-notes { gap: 8px; margin-top: 9px; padding-top: 10px; }
    .pao-timeline-notes span { font-size: 11px; }
}

/* Kartu sertifikasi PAO mengikuti proporsi kartu sertifikasi halaman Profil. */
@media (min-width: 601px) and (max-width: 900px) {
    .pao-certification-grid { gap: 12px; }
    .pao-certification-card { flex-basis: calc((100% - 12px) / 2); min-height: 150px; }
    .pao-certification-product-image { min-height: 150px; }
    .pao-certification-content { padding: 18px; }
    .pao-certification-status { font-size: 10.5px; letter-spacing: .09em; }
    .pao-certification-card h3 { margin: 12px 0 14px; font-size: 18px; }
    .pao-certification-detail { display: block; padding-top: 10px; font-size: 11px; }
    .pao-certification-detail strong { display: block; margin-top: 4px; overflow-wrap: anywhere; font-size: 13px; }
}

@media (max-width: 600px) {
    .pao-certification-grid { gap: 12px; margin-top: 24px; }
    .pao-certification-card { flex-basis: 100%; grid-template-columns: 110px minmax(0, 1fr); min-height: 0; border-radius: 12px; }
    .pao-certification-product-image { min-height: 100%; }
    .pao-certification-content { padding: 16px 18px; }
    .pao-certification-status { font-size: 11px; letter-spacing: .08em; line-height: 1.3; }
    .pao-certification-card h3 { margin: 8px 0 10px; overflow-wrap: anywhere; font-size: 17px; line-height: 1.2; }
    .pao-certification-detail { display: block; padding-top: 8px; font-size: 11px; line-height: 1.35; }
    .pao-certification-detail strong { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; }
}

/* Popup video tetap berada di bawah navbar dan proporsional di semua layar. */
@media (max-width: 850px) {
    .pao-video-modal {
        inset: 90px 0 0;
    }

    .pao-video-modal-dialog {
        width: min(680px, calc(100% - 16px));
    }
}

@media (max-width: 600px) {
    .pao-video-modal {
        inset: 86px 0 0;
        padding: 12px 16px;
    }

    .pao-video-modal-dialog {
        width: 100%;
    }

    .pao-video-modal-close {
        top: 12px;
        right: 12px;
    }
}

/* Simulasi respons PAO: ringkas, kontras, dan mudah dibandingkan. */
.pao-timeline { max-width: 1120px; margin: 0 auto 34px; }
.pao-timeline-heading { margin-bottom: 14px; }
.pao-timeline-heading h3 { font-size: clamp(24px, 2.4vw, 32px); }
.pao-timeline-controls { display: flex; align-items: center; gap: 7px; }
.pao-timeline-mode, .pao-timeline-replay { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border: 1px solid #d7dce4; border-radius: 7px; background: #fff; color: #273247; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard); }
.pao-timeline-mode { padding: 0 12px; }
.pao-timeline-replay { width: 36px; padding: 0; }
.pao-timeline-mode:hover, .pao-timeline-replay:hover { border-color: var(--accent-darker); color: var(--accent-darker); }
.pao-timeline-mode.is-active { border-color: var(--accent-darker); background: var(--accent-darker); color: #fff; }
.pao-timeline-card { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .74fr); gap: 22px; min-height: 332px; padding: 19px 20px; border: 1px solid #dfe3e9; border-radius: 12px; background: #fff; color: var(--text); box-shadow: 0 14px 32px rgba(22,35,59,.07); }
.pao-timeline-chart-side { min-width: 0; }
.pao-timeline-meta { padding: 0 0 8px; border-bottom: 1px solid #e8ebf0; }
.pao-timeline-meta > span { color: #647187; font-size: 9px; }
.pao-timeline-meta strong { color: var(--accent-darker); font-size: 13px; }
.pao-timeline-status { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 999px; background: #eff6f1; color: #26724b !important; font-size: 8px !important; letter-spacing: .06em; }
.pao-timeline-visual { margin-top: 7px; }
.pao-timeline-grid line { stroke: #dfe5eb; }
.pao-timeline-flash-zone { fill: #f1b84b; }
.pao-timeline-axis, .pao-timeline-tick { fill: #738096; font-size: 10px; }
.pao-timeline-zone-label { fill: #a45f00; }
.pao-timeline-line { stroke-width: 4.5; }
.pao-timeline-line-risk { stroke: #d05b44; }
.pao-timeline-line-pao { stroke: #087a55; }
.pao-timeline-cursor { stroke: #718096; }
.pao-timeline-point-risk { fill: #d05b44; }.pao-timeline-point-pao { fill: #087a55; }
.pao-timeline-check circle { fill: #087a55; }.pao-timeline-check path { stroke: #fff; }
.pao-timeline-badge { background: #fff; box-shadow: 0 6px 14px rgba(22,35,59,.13); }
.pao-timeline-badge-pao, .pao-timeline-badge-safe { color: #087a55; }.pao-timeline-badge-risk { color: #b94331; }
.pao-timeline-guide { display: flex; flex-direction: column; min-width: 0; padding: 3px 0 1px 22px; border-left: 1px solid #e3e7ec; }
.pao-timeline-guide-label { margin: 0 0 9px; color: var(--accent-dark); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.pao-timeline-legend { display: grid; gap: 8px; margin-bottom: 14px; }
.pao-timeline-legend span { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 7px; align-items: center; color: #334057; font-size: 10px; }
.pao-timeline-legend small { grid-column: 2; margin-top: 1px; color: #788397; font-size: 9px; line-height: 1.35; }
.pao-timeline-dot { grid-row: span 2; width: 8px; height: 8px; }.pao-timeline-dot-pao { background: #087a55; }.pao-timeline-dot-risk { background: #d05b44; }
.pao-timeline-story { min-height: 114px; padding: 13px; border: 1px solid #e4e8ed; border-radius: 8px; background: #fafbfc; }
.pao-timeline-story strong { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 11px; }.pao-timeline-story strong i { color: var(--accent-darker); }
.pao-timeline-story ol { display: grid; gap: 4px; margin: 9px 0 0; padding-left: 17px; color: #667287; font-size: 9px; line-height: 1.35; }
.pao-timeline-disclaimer { margin: auto 0 0; color: #7b8597; font-size: 8px; line-height: 1.4; }.pao-timeline-disclaimer i { margin-right: 5px; color: var(--accent-dark); }
.pao-timeline[data-pao-mode="tanpa-pao"] .pao-timeline-status { background: #fff0eb; color: #b94331 !important; }
.pao-timeline[data-pao-mode="tanpa-pao"] .pao-timeline-story { border-color: #f1d8d2; background: #fffaf8; }.pao-timeline[data-pao-mode="tanpa-pao"] .pao-timeline-story strong i { color: #b94331; }

@media (max-width: 800px) {
    .pao-timeline-card { grid-template-columns: 1fr; min-height: 0; gap: 15px; }.pao-timeline-guide { padding: 15px 0 0; border-top: 1px solid #e3e7ec; border-left: 0; }.pao-timeline-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pao-timeline-story { min-height: 0; }.pao-timeline-disclaimer { margin-top: 11px; }
}

@media (max-width: 600px) {
    .pao-timeline-heading { gap: 12px; }.pao-timeline-controls { width: 100%; }.pao-timeline-mode { flex: 1; padding: 0 7px; font-size: 9px; }.pao-timeline-replay { flex: 0 0 34px; }.pao-timeline-card { padding: 14px; }.pao-timeline-meta { align-items: center; flex-direction: row; }.pao-timeline-legend { grid-template-columns: 1fr; }.pao-timeline-status { margin-left: auto; }.pao-timeline-guide { padding-top: 12px; }.pao-timeline-axis { font-size: 7px; }.pao-timeline-tick { font-size: 8px; }.pao-timeline-zone-label { font-size: 6px; }.pao-timeline-badge { display: none; }
}

/* Simulasi ditempatkan sebagai bagian tersendiri setelah kartu keunggulan. */
.pao-benefit-section .pao-shell { display: flex; flex-direction: column; }
.pao-benefit-header { order: 1; }
.pao-benefit-grid { order: 2; }
.pao-timeline { order: 3; width: 100%; max-width: 960px; margin: 42px auto 40px; }
.pao-impact-panel { order: 4; }
.pao-timeline-heading { flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; text-align: center; }
.pao-timeline-controls { justify-content: center; padding: 5px; border: 1px solid #e3e7ed; border-radius: 10px; background: #f7f8fa; }
.pao-timeline-mode { min-height: 35px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: #677287; font-size: 10px; }
.pao-timeline-mode:hover { background: #fff; color: var(--accent-darker); }
.pao-timeline-mode.is-active { background: var(--accent-darker); color: #fff; box-shadow: 0 5px 12px rgba(119,3,22,.16); }
.pao-timeline-card { display: block; min-height: 0; padding: 26px 34px 22px; border: 1px solid #e2e6eb; border-radius: 14px; background: #fff; box-shadow: 0 16px 34px rgba(22,35,59,.07); }
.pao-timeline-visual { margin: 0; }
.pao-timeline-chart { max-height: 300px; }
.pao-timeline-grid line { stroke: #e4e8ed; }
.pao-timeline-line { stroke-width: 5; }
.pao-timeline-line-pao { stroke: #2c82c9; }
.pao-timeline-line-risk { stroke: #d9513f; }
.pao-timeline-pao-fill { fill: url(#paoTimelinePaoFill); opacity: 0; transition: opacity .35s ease; }
.pao-timeline-risk-fill { fill: url(#paoTimelineFill); transition: opacity .35s ease; }
.pao-timeline-flash-zone { fill: #ffab00; }
.pao-timeline-check circle { fill: #2c82c9; }
.pao-timeline-cursor, .pao-timeline-badge { display: none; }
.pao-timeline-axis-group text { font-family: var(--font-body); font-weight: 700; }

@media (max-width: 600px) {
    .pao-timeline { margin: 28px auto 30px; }.pao-timeline-controls { width: auto; gap: 3px; padding: 4px; }.pao-timeline-mode { flex: 0 1 auto; min-height: 32px; padding: 0 8px; font-size: 8px; }.pao-timeline-card { padding: 19px 13px 15px; border-radius: 10px; }.pao-timeline-chart { max-height: 190px; }.pao-timeline-check circle { r: 8px; }
}

/* Perangkat PAO, titik api, dan efek semprot pada grafik simulasi */
.pao-timeline-device { opacity: 0; transition: opacity .4s ease; }
.pao-timeline-device.is-visible { opacity: 1; }
.pao-timeline-device-mount { stroke: #98a4b3; stroke-width: 2; }
.pao-timeline-device-body { fill: #1f3a57; stroke: #2c82c9; stroke-width: 1.4; }
.pao-timeline-device-cap { fill: #2c82c9; }
.pao-timeline-device-led { fill: #4fd18b; }
.pao-timeline-device-label { fill: #56637a; font-family: var(--font-body); font-size: 8px; font-weight: 800; letter-spacing: .08em; }

.pao-timeline-flame { opacity: 0; pointer-events: none; transform-box: view-box; transform-origin: 0 0; }
.pao-timeline-flame.is-visible { opacity: 1; }
.pao-timeline-flame.is-visible path { transform-box: view-box; transform-origin: 0 0; animation: paoFlameFlicker 1.4s ease-in-out infinite; }
.pao-timeline-flame.is-out { opacity: 0; }
.pao-timeline-flame.is-out path { animation: none; }
.pao-timeline-flame path { fill: #ff7a1a; }
.pao-timeline-flame .pao-timeline-flame-core { fill: #ffe28a; stroke: none; }
@keyframes paoFlameFlicker {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(.98, 1.025); }
}

.pao-timeline-spray { opacity: 0; pointer-events: none; }
.pao-timeline-spray.is-spraying { animation: paoSprayShow .7s ease-out; }
.pao-timeline-spray-cone { fill: #6cc4ff; opacity: .55; }
.pao-timeline-spray-dot { fill: #bfe6ff; }
@keyframes paoSprayShow {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

.pao-timeline-device-led.is-active { fill: #ff5252; animation: paoLedBlink .5s ease-in-out infinite; }
@keyframes paoLedBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* Stabilitas ukuran grafik dan kontrol pada layar sempit. */
.pao-timeline, .pao-timeline-heading, .pao-timeline-visual { min-width: 0; max-width: 100%; }
.pao-timeline { max-width: 820px; margin: 28px auto; }
.pao-timeline-card { padding: 14px 20px; }
.pao-timeline-caption { margin: 4px 0 0; color: #677287; font-size: 10px; line-height: 1.5; text-align: center; }
.pao-timeline-heading { margin-bottom: 10px; }
.pao-timeline-signal { fill: none; stroke: #e45b36; stroke-width: 2.5; stroke-dasharray: 5 5; opacity: 0; }
.pao-timeline-spray.is-spraying { animation: none; opacity: 1; }
.pao-timeline-spray-cone { opacity: .65; }
.pao-timeline-flame { transition: none; }
.pao-timeline-flame path { stroke: #e95b0c; stroke-width: .7; }
.pao-timeline-device-label { font-size: 14px; }
.pao-timeline-risk-fill, .pao-timeline-pao-fill { transition: none; }
.pao-timeline-controls { flex-wrap: wrap; max-width: 100%; }
.pao-timeline-mode { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.pao-timeline-mode:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.pao-timeline-chart { height: auto; max-height: none; aspect-ratio: 1000 / 390; overflow: hidden; }
.pao-timeline-point-pao { fill: #2c82c9; }
.pao-timeline-pulse { fill: none; stroke: #2c82c9; stroke-width: 2; opacity: 0; pointer-events: none; }
.pao-timeline-pulse.is-pulsing { animation: paoTimelinePulse .8s ease-out; }
@keyframes paoTimelinePulse { from { r: 6px; opacity: .8; } to { r: 24px; opacity: 0; } }
.pao-timeline.is-paused * { animation-play-state: paused !important; }
@media (max-width: 600px) {
    .pao-timeline-controls { width: 100%; }
    .pao-timeline-mode { flex: 1 1 80px; min-height: 40px; font-size: 10px; padding: 6px; }
    .pao-timeline-card { padding: 14px 6px; }
    .pao-timeline-tick { font-size: 24px; }
    .pao-timeline-axis { font-size: 20px; letter-spacing: 0; }
    .pao-timeline-device-label { font-size: 18px; }
    .pao-timeline-check circle { r: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .pao-timeline *, .pao-timeline.reveal { animation: none !important; transition: none !important; }
}


/* WordPress: sertifikasi tanpa gambar tetap memakai seluruh lebar kartu. */
.pao-certification-card { padding: 0; color: inherit; text-decoration: none; }
.pao-certification-card:not(.pao-certification-card-has-image) { display: flex; flex-direction: column; }
.pao-certification-card-linked { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pao-certification-card-linked:hover { border-color: rgba(122,31,43,.35); color: inherit; box-shadow: 0 10px 24px rgba(17,31,52,.08); transform: translateY(-2px); }
.pao-certification-content { flex: 1; }
.pao-product-solution-placeholder { display: grid; min-height: 230px; place-items: center; background: var(--bg-soft); color: var(--accent-dark); }
.pao-product-solution-placeholder i { font-size: 34px; opacity: .45; }
.pao-products-empty { margin: 24px 0 0; color: var(--text-muted); }