/* ═══════════ cover.css — Sampul halaman pertama SPMB (index.php) ═══════════
   Aktif selama .kn-stage.is-cover (sebelum "Masuk gerbang sekolah" diketuk). */
.kn-stage.is-cover .kn-dialog{ transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s; }
.kn-cover{ animation:cvRise .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes cvRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.kn-cover > *{ animation:cvIn .5s cubic-bezier(.22,1,.36,1) both; }
.kn-cover > *:nth-child(2){ animation-delay:.06s } .kn-cover > *:nth-child(3){ animation-delay:.12s } .kn-cover > *:nth-child(4){ animation-delay:.18s }
.kn-cover > *:nth-child(5){ animation-delay:.24s } .kn-cover > *:nth-child(6){ animation-delay:.3s } .kn-cover > *:nth-child(7){ animation-delay:.36s }
@keyframes cvIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Label program */
.cv-ribbon{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cv-ribbon span{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:800; padding:5px 10px; border-radius:99px;
  background:rgba(7,28,55,.6); border:1px solid rgba(217,170,60,.4); color:#e6edf6; }
.cv-ribbon span:first-child{ background:rgba(155,197,61,.18); border-color:rgba(155,197,61,.55); color:#d9f28f; }
.cv-ribbon i{ font-style:normal; }

/* Judul */
.kn-cover h1{ font-size:clamp(1.55rem, 5.8vw, 2.25rem) !important; line-height:1.08 !important; letter-spacing:-.01em; margin-bottom:8px !important; }
.kn-cover h1 span{ display:block; background:linear-gradient(90deg,#9BC53D,#22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kn-cover > p.cv-lead{ margin-bottom:12px; }

/* Fakta singkat */
.cv-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.cv-facts div{ text-align:center; padding:9px 6px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.cv-facts b{ display:block; font-family:var(--fdisplay); font-size:1.15rem; line-height:1.1; color:#fff6d7; }
.cv-facts small{ font-size:.7rem; color:#b9c6d8; font-weight:600; }

/* Jalur 5 tahap */
.cv-path{ list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:repeat(5,1fr); position:relative; }
.cv-path::before{ content:""; position:absolute; left:10%; right:10%; top:19px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); }
.cv-path::after{ content:""; position:absolute; left:10%; top:19px; height:3px; width:0; border-radius:3px; background:linear-gradient(90deg,#9BC53D,#22D3EE); animation:cvLine 2.4s .6s ease-in-out forwards; }
@keyframes cvLine{ to{ width:80%; } }
.cv-path li{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.cv-path .dot{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px;
  background:#0f2a4f; border:2px solid rgba(255,255,255,.18); box-shadow:0 6px 14px rgba(0,0,0,.25); animation:cvDot .5s cubic-bezier(.34,1.56,.64,1) both; }
.cv-path li:nth-child(1) .dot{ animation-delay:.7s; border-color:#9BC53D; } .cv-path li:nth-child(2) .dot{ animation-delay:1.1s; }
.cv-path li:nth-child(3) .dot{ animation-delay:1.5s; } .cv-path li:nth-child(4) .dot{ animation-delay:1.9s; } .cv-path li:nth-child(5) .dot{ animation-delay:2.3s; }
@keyframes cvDot{ from{ transform:scale(.5); opacity:.3; } to{ transform:none; opacity:1; } }
.cv-path span{ font-size:.7rem; font-weight:700; color:#d1dbe8; line-height:1.2; }

/* Tombol utama */
.cv-go{ position:relative; overflow:hidden; display:flex !important; align-items:center; justify-content:center; gap:10px; font-size:1.02rem !important; padding:15px 18px !important; }
.cv-go::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:cvShine 3.2s ease-in-out 1.2s infinite; }
@keyframes cvShine{ 0%{ left:-40%; } 45%,100%{ left:130%; } }
.cv-go .ar{ display:inline-block; transition:transform .2s; }
.cv-go:hover .ar{ transform:translateX(4px); }
.cv-foot{ margin:10px 0 0 !important; text-align:center; font-size:.76rem !important; color:#9fb0c8 !important; }

/* Gelembung sapaan Ustadzah Khadijah di panggung */
.cv-bubble{ position:absolute; z-index:4; left:50%; top:calc(env(safe-area-inset-top,0px) + 140px); transform:translateX(-50%); max-width:min(80vw,300px);
  background:#fff; color:#12233f; font-size:.86rem; font-weight:700; line-height:1.4; padding:10px 14px; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.28);
  animation:cvBub .5s .9s cubic-bezier(.34,1.56,.64,1) both; pointer-events:none; }
.cv-bubble::after{ content:""; position:absolute; left:50%; bottom:-7px; width:14px; height:14px; margin-left:-7px; background:#fff; transform:rotate(45deg); }
@keyframes cvBub{ from{ opacity:0; transform:translateX(-50%) translateY(8px) scale(.9); } to{ opacity:1; transform:translateX(-50%); } }
.kn-stage:not(.is-cover) .cv-bubble{ display:none; }

/* Latar ikut gerak kursor/gawai (parallax halus) */
.kn-stage.is-cover .kn-bg{ transform:translate3d(var(--px,0), var(--py,0), 0) scale(1.06); transition:transform .25s ease-out, opacity .8s; }

/* Layar lebar: tokoh di kiri, kartu sampul di kanan — wajah tokoh tidak tertutup */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .kn-stage.is-cover .kn-dialog{ left:auto; right:max(3vw, 24px); top:calc(env(safe-area-inset-top,0px) + 84px); bottom:18px; width:min(500px, 44vw); max-width:none;
    padding:0; display:flex; flex-direction:column; justify-content:center; }
  .kn-stage.is-cover .kn-box{ max-height:100%; overflow-y:auto; scrollbar-width:thin; }
  .kn-stage.is-cover .kn-cast{ right:48%; bottom:0 !important; }
  .kn-stage.is-cover .cv-bubble{ left:26%; top:calc(env(safe-area-inset-top,0px) + 150px); }
  .kn-stage.is-cover .kn-place{ left:26%; }
}
/* HP: kartu lebih ringkas agar kepala tokoh tetap terlihat */
@media (max-width:520px){
  .cv-facts{ margin-bottom:12px; } .cv-facts b{ font-size:1rem; }
  .cv-path .dot{ width:34px; height:34px; font-size:15px; } .cv-path::before, .cv-path::after{ top:16px; }
  .cv-path span{ font-size:.64rem; }
  .kn-cover > p.cv-lead{ font-size:.86rem; }
  .cv-bubble{ top:calc(env(safe-area-inset-top,0px) + 118px); font-size:.8rem; }
}
@media (max-height:700px){ .cv-facts{ display:none; } .kn-cover h1{ font-size:clamp(1.4rem, 3vw, 1.8rem) !important; } }
@media (max-width:520px){ .kn-stage.is-cover .kn-place{ opacity:0; } .cv-ribbon .full{ display:none; } }
@media (min-width:521px){ .cv-ribbon .short{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .kn-cover, .kn-cover > *, .cv-path::after, .cv-path .dot, .cv-go::after, .cv-bubble{ animation:none !important; }
  .cv-path::after{ width:80%; } .kn-stage.is-cover .kn-bg{ transform:none; }
}