/* v3.1 cover Ka'bah + gerak gulir (t_01014587). Berkas mandiri: tidak menimpa latar-v31.css / menu-kaca.css.
 * Semua gerak berbasis transform/opacity (tanpa layout shift). prefers-reduced-motion = statis. */

/* ---------- Hero cover: Ka'bah & kiswah malam ---------- */
.hero__media img{object-position:50% 38%}
@media (max-width:767px){.hero__media img{object-position:50% 30%}}
/* tirai: navy pekat di sisi teks, Ka'bah tetap terang di kanan; bawah memudar ke navy lalu pasir */
.hero__tirai{background:
  radial-gradient(70% 60% at 72% 42%,rgba(227,204,148,.10),rgba(227,204,148,0) 70%),
  linear-gradient(180deg,rgba(6,14,31,.80) 0%,rgba(6,14,31,.58) 22%,rgba(8,19,40,.72) 45%,rgba(10,23,48,.78) 70%,rgba(10,23,48,.94) 100%)}
@media (min-width:1024px){.hero__tirai{background:
  radial-gradient(55% 70% at 78% 45%,rgba(227,204,148,.10),rgba(227,204,148,0) 70%),
  linear-gradient(90deg,rgba(6,14,31,.92) 0%,rgba(8,19,40,.84) 36%,rgba(10,23,48,.55) 50%,rgba(10,23,48,.18) 68%,rgba(10,23,48,.10) 100%),
  linear-gradient(180deg,rgba(6,14,31,.55) 0%,rgba(6,14,31,0) 22%,rgba(6,14,31,0) 70%,rgba(10,23,48,.7) 100%)}}
/* cahaya emas lembut (lapisan parallax ke-2) */
.hero__cahaya{position:absolute;inset:-10% -5%;z-index:1;pointer-events:none;
  background:radial-gradient(40% 35% at 70% 30%,rgba(232,191,101,.20),rgba(232,191,101,0) 70%),
             radial-gradient(35% 30% at 20% 85%,rgba(201,164,92,.14),rgba(201,164,92,0) 70%);
  mix-blend-mode:screen;will-change:transform}
/* ornamen khatam emas tipis (lapisan parallax ke-3) */
.hero__ornamen{position:absolute;inset:-12% 0 -12% 0;z-index:1;pointer-events:none;opacity:.10;
  background-image:var(--khatam);background-size:72px 72px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 35%,transparent 60%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 35%,transparent 60%);will-change:transform}
@media (max-width:1023px){.hero__ornamen{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 55%,#000 100%);opacity:.08}}
.hero__judul,.hero__sub,.hero .pintu-wizard{text-shadow:0 1px 2px rgba(6,14,31,.6),0 2px 18px rgba(6,14,31,.55)}
.hero .wadah,.hero__media,.hero__cahaya,.hero__ornamen{will-change:transform}

/* penunjuk gulir */
.hero__gulir{position:absolute;left:50%;bottom:28px;z-index:3;width:44px;height:44px;margin-left:-22px;display:none}
.hero__gulir::before{content:"";position:absolute;top:0;bottom:0;left:8px;right:8px;border:1.5px solid rgba(227,204,148,.75);border-radius:16px}
.hero__gulir span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--emas-300);animation:cg-gulir 1.8s var(--ease-tenang) infinite}
@media (min-width:1024px){.hero__gulir{display:block}}
@keyframes cg-gulir{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* ---------- Gerak per section (dipasang cover-gerak.js; tanpa JS = tampil normal) ---------- */
.cg-siap [data-cg]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--ease-tiba),transform .9s var(--ease-tiba);transition-delay:var(--cg-tunda,0ms)}
.cg-siap [data-cg="kiri"]{transform:translate3d(-28px,0,0)}
.cg-siap [data-cg="kanan"]{transform:translate3d(28px,0,0)}
.cg-siap [data-cg="skala"]{transform:scale(.94)}
.cg-siap [data-cg="geser"]{opacity:1;transform:translate3d(0,22px,0)}
.cg-siap [data-cg].cg-tampil{opacity:1;transform:none}

/* tirai antar section: garis emas bergradasi tumbuh saat section masuk */
.cg-siap .cg-tirai{position:relative}
.cg-siap .cg-tirai>.cg-garis{position:absolute;left:50%;top:0;z-index:2;width:min(240px,40vw);height:2px;margin-left:min(-120px,-20vw);pointer-events:none;
  background:linear-gradient(90deg,rgba(201,164,92,0),rgba(232,191,101,.95) 50%,rgba(201,164,92,0));
  box-shadow:0 0 18px rgba(232,191,101,.45);transform:scaleX(0);opacity:0;transition:transform 1.1s var(--ease-tiba),opacity .6s}
.cg-siap .cg-tirai.cg-masuk>.cg-garis{transform:scaleX(1);opacity:1}

/* kartu paket: angkat lembut + kilau emas saat disorot */
.kartu .kartu__foto{transition:transform .6s var(--ease-tiba),box-shadow .6s var(--ease-tiba)}
.kartu .kartu__foto img{transition:transform 1.2s var(--ease-tiba)}
@media (hover:hover){
  .kartu:hover .kartu__foto{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(10,23,48,.55),0 0 0 1px rgba(227,204,148,.5)}
  .kartu:hover .kartu__foto img{transform:scale(1.05)}
}

@media (prefers-reduced-motion:reduce){
  .cg-siap [data-cg]{opacity:1!important;transform:none!important;transition:none!important}
  .hero__gulir span{animation:none}
  .kartu .kartu__foto,.kartu .kartu__foto img{transition:none!important}
  .kartu:hover .kartu__foto,.kartu:hover .kartu__foto img{transform:none!important}
  .hero .wadah,.hero__media,.hero__cahaya,.hero__ornamen{transform:none!important}
}
@media print{.hero__cahaya,.hero__ornamen,.hero__gulir,.cg-garis{display:none}.cg-siap [data-cg]{opacity:1;transform:none}}