/* FSBPI — pembuka perjuangan & animasi bendera resmi (2026) */
.fsbpi-intro[hidden]{display:none!important}
.fsbpi-intro{
 position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:99990;
 display:block;overflow:hidden;isolation:isolate;background:#101928;
 opacity:0;visibility:hidden;pointer-events:none;transform:scale(1);filter:blur(0)
}
.fsbpi-intro.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.fsbpi-intro.is-visible.is-exiting{
 opacity:0;transform:scale(1.055);filter:blur(22px);pointer-events:none;
 transition:opacity 1350ms ease,transform 1350ms ease,filter 1350ms ease
}
body.fsbpi-intro-lock{overflow:hidden}
.fsbpi-intro-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#101928}
.fsbpi-intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30),transparent 28%,transparent 63%,rgba(0,0,0,.38));pointer-events:none}
.fsbpi-intro-label{position:absolute;left:clamp(18px,4vw,56px);top:clamp(20px,4.5vh,48px);display:flex;align-items:center;gap:12px;color:#fff;text-shadow:0 1px 8px #090d16;font:800 clamp(12px,1.25vw,17px)/1.3 system-ui,sans-serif;letter-spacing:.10em;text-transform:uppercase}
.fsbpi-intro-label img{width:40px;height:40px;object-fit:contain;border-radius:3px;border:1px solid #ffffff77;box-shadow:0 6px 24px #0007}
.fsbpi-intro-skip{position:absolute;top:clamp(22px,4.5vh,48px);right:clamp(18px,4vw,56px);padding:12px 19px;z-index:2;background:#101927aa;color:#fff;border:1px solid #ffffffb5;border-radius:999px;font:700 13px/1.1 system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(10px)}
.fsbpi-intro-skip:hover,.fsbpi-intro-skip:focus-visible{background:#b21d3b;outline:2px solid #fff;outline-offset:3px}
.fsbpi-intro-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:#ffffff50}
.fsbpi-intro-progress::after{content:"";display:block;background:#cc2044;width:0;height:100%}
.fsbpi-intro.is-visible .fsbpi-intro-progress::after{animation:fsbpi-intro-countdown 10s linear both}
@keyframes fsbpi-intro-countdown{from{width:0}to{width:100%}}
/* Kompatibilitas dengan paket patch intro sebelumnya (tanpa menimpa template lama). */
.fsbpi-intro-content{position:absolute;left:clamp(18px,5vw,80px);right:20px;bottom:clamp(42px,9vh,95px);max-width:720px;color:#fff;text-shadow:0 2px 14px #060a11}
.fsbpi-intro-eyebrow{display:block;font:750 clamp(11px,1.25vw,15px)/1.4 system-ui,sans-serif;letter-spacing:.14em;color:#fddce3;text-transform:uppercase}
.fsbpi-intro-title{font:900 clamp(23px,4.8vw,58px)/1.06 system-ui,sans-serif;letter-spacing:-.035em;margin:9px 0 0}
.fsbpi-intro-subtitle{font:500 clamp(12px,1.6vw,18px)/1.4 system-ui,sans-serif;margin:9px 0 0}
/* Animasi ringan, tanpa mengganti atau merusak gambar resmi yang diberikan. */
.brand-logo.fsbpi-brand-flag{
 width:66px;height:66px;object-fit:cover;object-position:center;border-radius:3px;
 flex-shrink:0;transform-origin:7% 50%;backface-visibility:hidden;
 box-shadow:-3px 0 0 #a9b0be,0 2px 9px #0003;
 animation:fsbpi-flag-wave 3.25s ease-in-out infinite
}
@keyframes fsbpi-flag-wave{
 0%,100%{transform:perspective(180px) rotateY(-9deg) skewY(-1deg) scaleX(.985);filter:brightness(.99)}
 28%{transform:perspective(180px) rotateY(9deg) skewY(1.8deg) scaleX(1.025);filter:brightness(1.12)}
 58%{transform:perspective(180px) rotateY(-4deg) skewY(-1.6deg) scaleX(.97);filter:brightness(.94)}
 80%{transform:perspective(180px) rotateY(12deg) skewY(1deg) scaleX(1.03);filter:brightness(1.06)}
}
@media(max-width:600px){
 .fsbpi-intro-video{object-fit:contain}
 .fsbpi-intro-label{font-size:11px;max-width:55%;letter-spacing:.05em;gap:6px}
 .fsbpi-intro-label img{width:31px;height:31px}
 .fsbpi-intro-skip{padding:11px 13px;font-size:12px}
 .brand-logo.fsbpi-brand-flag{width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){
 .fsbpi-intro.is-visible.is-exiting{transition:none;transform:none;filter:none}
 .fsbpi-intro.is-visible .fsbpi-intro-progress::after{animation:none}
 .brand-logo.fsbpi-brand-flag{animation:none}
}