/* Gaya bersama semua halaman PSB Al-Umm Putra
   Palet: #00412E hijau tua · #96BF8A sage · #E8EAE5 abu kehijauan · #FFFFFF */
[x-cloak]{display:none!important}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#1f2a24}


.judul-kecil{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#5B8A50}
.garis{display:block;width:44px;height:3px;border-radius:3px;background:#96BF8A}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;font-weight:700;transition:background-color .2s,color .2s,border-color .2s}
.btn-hijau{background:#00412E;color:#fff}.btn-hijau:hover{background:#0D5640}
.btn-sage{background:#96BF8A;color:#00281D}.btn-sage:hover{background:#B6D4AA}
.btn-garis{border:1.5px solid rgba(255,255,255,.55);color:#fff}.btn-garis:hover{background:rgba(255,255,255,.1)}

.kartu{background:#fff;border:1px solid #E1E5DE;border-radius:1rem}

.in{width:100%;border:1px solid #cdd5ca;border-radius:.65rem;padding:.65rem .85rem;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.in:focus{border-color:#00412E;box-shadow:0 0 0 3px rgba(150,191,138,.35)}
.in.err{border-color:#dc2626}
.in:disabled{background:#F4F6F2;color:#475569}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero-slide.is-active{animation:kenburns 7s ease-out forwards}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-slide.is-active{animation:none}}

.pb-safe{padding-bottom:max(.6rem,env(safe-area-inset-bottom))}
.no-sb{scrollbar-width:none}.no-sb::-webkit-scrollbar{display:none}
.hero-bg{background:#00412E}
.chip{display:inline-block;border-radius:999px;padding:.15rem .6rem;font-size:.7rem;font-weight:700}

/* ---------- promosi & animasi ---------- */
/* tiket: sisi kanan berlubang seperti kupon */
.tiket{position:relative;display:flex;border-radius:1rem;overflow:visible}
.tiket>.kiri{border-radius:1rem 0 0 1rem}
.tiket>.kanan{position:relative;border-radius:0 1rem 1rem 0;border-left:2px dashed rgba(0,40,29,.35)}
.tiket>.kanan::before,.tiket>.kanan::after{content:"";position:absolute;left:-9px;width:16px;height:16px;border-radius:50%;background:var(--lubang,#00281D)}
.tiket>.kanan::before{top:-8px}.tiket>.kanan::after{bottom:-8px}

/* stiker bulat bergaya cap */
.stiker{display:grid;place-items:center;text-align:center;border-radius:50%;background:#96BF8A;color:#00281D;font-weight:900;line-height:1.05;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45);outline:2px dashed rgba(0,40,29,.45);outline-offset:-7px;transform:rotate(-12deg);
  animation:cap .7s cubic-bezier(.2,1.6,.4,1) .6s both;transition:transform .3s}
.stiker:hover{transform:rotate(0) scale(1.05)}
@keyframes cap{from{opacity:0;transform:rotate(-40deg) scale(2.2)}to{opacity:1;transform:rotate(-12deg) scale(1)}}

/* teks berjalan */
.marquee{display:flex;width:max-content;animation:jalan 38s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes jalan{to{transform:translateX(-50%)}}

/* kartu terangkat */
.angkat{transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.angkat:hover{transform:translateY(-5px);box-shadow:0 18px 36px -18px rgba(0,40,29,.35)}

/* angka hitung mundur */
.digit{font-variant-numeric:tabular-nums;transition:transform .25s}
.digit.ganti{animation:detak .35s ease}
@keyframes detak{0%{transform:translateY(-6px);opacity:.4}100%{transform:none;opacity:1}}

/* tombol utama: panah bergeser saat hover */
.btn .fa-arrow-right{transition:transform .2s}.btn:hover .fa-arrow-right{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){.stiker{animation:none}.marquee{animation:none}.angkat:hover{transform:none}}