/* Komponen video PAO, tanpa aturan layout halaman PAO. */
.pao-video-section em { color: var(--accent-dark); }
.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; }
@media (min-width: 601px) and (max-width: 900px) {
.pao-video-header { gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.pao-video-modal, .pao-video-modal-dialog { transition: none; }
}
@media (max-width: 600px) {
.pao-video-header, .pao-video-grid { grid-template-columns: 1fr; }
.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; }
}
@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;
    }
}

.portfolio-video-section { background: var(--bg-soft); }
.portfolio-video-section h2 { margin: 0; }