@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/poppins-800.woff2') format('woff2')}

:root{
  --blue:#1646AD;
  --blue-deep:#0A2766;
  --sky:#4FA8F0;
  --gold:#D4AE56;
  --gold-soft:#F0DCA0;
  --ink:#0E1F4D;
  --muted:#51608a;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:#fff;min-height:100vh;min-height:100dvh;background:var(--blue-deep);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}

/* ---------- Latar ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:linear-gradient(165deg,#1850BE 0%,#0F3A93 50%,#0A2766 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.o1{width:520px;height:520px;left:-160px;top:-180px;background:#58d17f;animation:drift 18s ease-in-out infinite alternate}
.o2{width:620px;height:620px;right:-200px;bottom:-220px;background:var(--sky);animation:drift 22s ease-in-out infinite alternate-reverse}
.bg::before{
  content:"";position:absolute;inset:0;
  background:repeating-radial-gradient(circle at 100% 0,rgba(255,255,255,.06) 0 1px,transparent 1px 38px);
  mask-image:linear-gradient(200deg,#000 0,transparent 55%);-webkit-mask-image:linear-gradient(200deg,#000 0,transparent 55%);
}
.skyline{position:absolute;left:50%;bottom:0;width:max(1200px,100%);min-width:1000px;transform:translateX(-50%);opacity:.1}
@keyframes drift{to{transform:translate(60px,40px) scale(1.12)}}

/* ---------- Susunan halaman ---------- */
.page{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr)}
.main{
  width:100%;min-width:0;max-width:520px;margin:0 auto;
  padding:calc(36px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;
}

/* ---------- Hero ---------- */
.hero{text-align:center;margin-bottom:28px}
.logo{width:min(300px,76%);height:auto;margin:0 auto 20px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.28));animation:rise .7s var(--ease) both}
h1{font-size:1.3rem;font-weight:800;letter-spacing:.005em;animation:rise .7s .08s var(--ease) both}
h1 span{color:var(--gold-soft)}
.sub{margin-top:8px;font-size:.93rem;font-weight:500;line-height:1.55;opacity:.92;max-width:34ch;margin-inline:auto;animation:rise .7s .14s var(--ease) both}
.tag{display:inline-block;margin-top:14px;padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:800;letter-spacing:.08em;
  color:var(--ink);background:linear-gradient(135deg,var(--gold-soft),var(--gold));box-shadow:0 4px 14px rgba(212,174,86,.35);animation:rise .7s .2s var(--ease) both}

/* ---------- Tombol link ---------- */
.links{list-style:none;width:100%;display:grid;gap:12px}
.links li{animation:rise .6s var(--ease) both}
.item{
  position:relative;display:flex;align-items:center;gap:14px;overflow:hidden;
  min-height:68px;padding:12px 16px;border-radius:18px;
  background:rgba(255,255,255,.97);color:var(--ink);text-decoration:none;
  box-shadow:0 8px 22px rgba(4,16,60,.26);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
a.item::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s var(--ease)}
a.item:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(4,16,60,.34)}
a.item:hover::after{transform:translateX(120%)}
a.item:active{transform:scale(.985)}
a.item:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#2459c9,var(--blue));color:#fff}
.ic svg{width:22px;height:22px;fill:currentColor}
.tx{flex:1;min-width:0}
.lb{display:block;font-weight:700;font-size:.92rem;line-height:1.3}
.ds{display:block;margin-top:2px;font-size:.75rem;font-weight:500;color:var(--muted);line-height:1.3}
.go{flex:none;width:18px;height:18px;fill:none;stroke:#8793b8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
a.item:hover .go{transform:translateX(3px);stroke:var(--blue)}
.item.hl{background:linear-gradient(135deg,#F3E2AC,var(--gold));animation:pulse 2.8s ease-in-out infinite}
.item.hl .ic{background:var(--blue-deep)}
.item.hl .ds{color:#4b3f17}
.item.hl .go{stroke:var(--ink)}
.item.soon{opacity:.75;cursor:default}
.badge{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#e5e9f5;color:var(--muted)}
@keyframes pulse{0%,100%{box-shadow:0 8px 22px rgba(4,16,60,.26),0 0 0 0 rgba(240,220,160,.55)}50%{box-shadow:0 8px 22px rgba(4,16,60,.26),0 0 0 9px rgba(240,220,160,0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Kegiatan: HP (geser ke samping) ---------- */
.mobile-show{width:100%;min-width:0;margin-top:34px}
.sec{font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sec::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--gold)}
.rail{
  min-width:0;max-width:calc(100% + 40px);display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -20px;padding:4px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail{scroll-padding-inline:20px}
.rail figure{flex:none;width:min(62vw,250px);scroll-snap-align:start;border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(4,16,60,.4);border:2px solid rgba(255,255,255,.18)}
.rail img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.rail:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}

/* Keterangan di bawah flyer (tanggal + judul) */
figure{background:rgba(7,26,78,.88)}
figcaption{padding:10px 12px 12px;display:grid;gap:5px;text-align:left}
figcaption .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.68rem;font-weight:600;letter-spacing:.03em;color:var(--gold-soft)}
figcaption .soon-tag{padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:800;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase}
figcaption .ttl{font-size:.76rem;font-weight:600;line-height:1.35;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Footer ---------- */
.foot{margin-top:34px;text-align:center}
.foot img{width:80px;height:auto;margin:0 auto 10px;opacity:.95}
.foot p{font-size:.74rem;font-weight:500;opacity:.8}

/* ---------- Galeri desktop (kolom berjalan) ---------- */
.showcase{display:none}

@media (min-width:960px){
  .page{grid-template-columns:minmax(420px,500px) minmax(0,1fr);gap:56px;padding:0 40px;align-items:start}
  .main{position:relative;z-index:2;max-width:none;margin:0;padding:max(48px,6vh) 0 40px;min-height:100vh;min-height:100dvh;justify-content:center;align-items:stretch}
  .hero{text-align:left;margin-bottom:30px}
  .logo{width:min(340px,70%);margin:0 0 22px}
  h1{font-size:2rem;line-height:1.15}
  .sub{margin-inline:0;font-size:1rem;max-width:40ch}
  .mobile-show{display:none}
  .foot{text-align:left;margin-top:38px;display:flex;align-items:center;gap:14px}
  .foot img{margin:0;width:64px}
  .showcase{
    display:block;position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
    /* Kotak pemotong dilebarkan (isi tetap sama) supaya flyer miring tidak terpotong di tepi */
    margin-left:-64px;margin-right:-40px;padding-left:64px;padding-right:40px;
    -webkit-mask-image:linear-gradient(#0000,#000 12%,#000 88%,#0000);mask-image:linear-gradient(#0000,#000 12%,#000 88%,#0000);
  }
  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:100%;transform:translateX(-14px) rotate(4deg) scale(1.08);transform-origin:center}
  .col{display:flex;flex-direction:column;gap:16px;animation:scrollUp var(--dur,42s) linear infinite}
  .col:nth-child(2){animation-name:scrollDown;--dur:50s}
  .col:nth-child(3){--dur:46s}
  .showcase:hover .col{animation-play-state:paused}
  .col figure{border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.2);box-shadow:0 14px 30px rgba(4,16,60,.45);flex:none}
  .col img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
  .item{min-height:72px;padding:14px 18px}
}
@media (min-width:960px) and (max-height:820px){
  .main{padding-top:28px;padding-bottom:24px}
  .logo{width:230px;margin-bottom:14px}
  .hero{margin-bottom:20px}
  h1{font-size:1.7rem}
  .item{min-height:62px;padding:10px 16px}
  .links{gap:10px}
  .foot{margin-top:22px}
}
@media (min-width:1200px){
  .page{grid-template-columns:minmax(440px,520px) minmax(0,1fr);gap:72px}
  h1{font-size:2.3rem}
}
@media (min-width:1200px) and (max-height:820px){h1{font-size:1.9rem}}
@keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes scrollDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* Layar pendek (HP landscape) */
@media (max-height:520px) and (max-width:959px){.logo{width:180px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}