/* Beranda: banner paling atas (slideshow). */
.hero{position:relative;min-height:min(84vh,740px);display:flex;align-items:center;color:#fff;overflow:hidden;background:linear-gradient(135deg,#0b1e3f,#12305c 60%,#0b1e3f)}
.hero::before{content:"";position:absolute;right:-8%;top:50%;width:520px;height:520px;border:2px solid rgba(201,164,92,.35);transform:translateY(-50%) rotate(45deg);animation:spin 40s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(405deg)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,17,31,.84),rgba(8,17,31,.5) 60%,rgba(8,17,31,.3));z-index:1}
.slides,.slide{position:absolute;inset:0}
/* Foto banner tampil UTUH (tidak terpotong). Sisi kiri/kanan yang kosong diisi warna tepi foto (dihitung banner.js), dan tepi foto dilembutkan agar menyatu. */
.slide{background:#1a2230;overflow:hidden;opacity:0;transition:opacity 1.4s ease}
.slide .bg{position:absolute;inset:0}
.slide .bgr{-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 80%);mask-image:linear-gradient(90deg,transparent 20%,#000 80%)}
.slide img{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:100%;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.slide.on{opacity:1}
.hero-in{position:relative;z-index:2;padding-top:90px;padding-bottom:140px;width:100%}
.kick{font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.82rem;color:#d9b768;margin:0 0 4px}
.tag{font-size:.9rem;color:#d6deec;margin:0 0 22px}
.hero h1{color:#fff;max-width:22ch;font-size:clamp(2rem,4.4vw,3.2rem)}
.hero .lead{color:#d6deec;max-width:56ch;margin:20px 0 30px}
.hero .kick,.hero .tag,.hero h1,.hero .lead,.hero .actions{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.hero .tag{animation-delay:.1s}
.hero h1{animation-delay:.2s}
.hero .lead{animation-delay:.35s}
.hero .actions{animation-delay:.5s}
.hero .btn{background:#c9a45c;color:#0b1e3f}
.hero .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.sl-ctl{position:absolute;z-index:3;bottom:150px;right:24px;display:flex;gap:8px;align-items:center}
.ar{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(8,17,31,.4);color:#fff;cursor:pointer;font-size:1.3rem;line-height:1}
.ar:hover{background:rgba(255,255,255,.2)}
.dots{display:flex;gap:6px;margin:0 6px}
.dot{width:9px;height:9px;border-radius:5px;background:rgba(255,255,255,.45);border:0;padding:0;cursor:pointer;transition:width .3s,background .3s}
.dot.on{width:26px;background:#c9a45c}
@media (max-width:640px){.hero-in{padding-top:60px}.sl-ctl{bottom:170px;right:12px}}