/* ============================================
   HERO SLIDER — taken verbatim from hero-preview.html
   Spec: docs/execution/09-HERO-SLIDER-FINAL.md (LOCKED 2026-05-01)
   4 slide, slot 05 dihilangkan, no caption strip, mobile responsive
   + animasi: floating gold dust, sparkle twinkle, Ken Burns zoom
   ============================================ */
.hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero .slide.active{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) contrast(1.12) saturate(.7) sepia(.18) hue-rotate(-8deg);transform:scale(1.04);transition:transform 7s ease-out}
.hero .slide.active img{transform:scale(1.10)}  /* Ken Burns zoom in slow */

/* per-slide focal tuning */
.hero .slide.s1 img{object-position:center 35%}
.hero .slide.s2 img{object-position:center 30%}
.hero .slide.s3 img{object-position:center 28%}
.hero .slide.s4 img{object-position:center 35%}

/* gradient overlays */
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 38%,rgba(13,13,13,.15) 70%,rgba(13,13,13,.55) 100%);z-index:2;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,transparent 0%,rgba(0,0,0,.55) 100%);z-index:2;pointer-events:none;mix-blend-mode:multiply}

/* corner frame ornament */
.hero-frame{position:absolute;inset:24px;border:1px solid rgba(201,168,76,.32);z-index:5;pointer-events:none}
.hero-frame::before,.hero-frame::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold)}
.hero-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.hero-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ============================================
   ANIMASI ELEGANT — gold particles + sparkles
   ============================================ */

/* Floating gold dust particles layer */
.hero-particles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.particle{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:radial-gradient(circle, rgba(229,193,106,.95) 0%, rgba(201,168,76,.6) 40%, rgba(201,168,76,0) 70%);box-shadow:0 0 6px rgba(229,193,106,.5);opacity:0;animation:floatUp linear infinite}
@keyframes floatUp{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  10%{opacity:.85}
  50%{opacity:1;transform:translate3d(20px,-50vh,0) scale(1)}
  90%{opacity:.6}
  100%{transform:translate3d(-15px,-110vh,0) scale(.4);opacity:0}
}

/* Sparkle stars (✦) di corner frame */
.sparkle{position:absolute;color:var(--gold);font-size:14px;line-height:1;z-index:6;pointer-events:none;opacity:0;animation:twinkle 3.5s ease-in-out infinite;text-shadow:0 0 8px rgba(229,193,106,.7)}
.sparkle.s-tl{top:14px;left:14px;animation-delay:0s}
.sparkle.s-tr{top:14px;right:14px;font-size:10px;animation-delay:.8s}
.sparkle.s-bl{bottom:96px;left:14px;font-size:9px;animation-delay:1.6s}
.sparkle.s-br{bottom:14px;right:14px;font-size:12px;animation-delay:2.4s}
.sparkle.s-mid{top:30%;right:6%;font-size:8px;animation-delay:1.2s;color:var(--gold-soft)}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}
  40%{opacity:1;transform:scale(1.1) rotate(180deg)}
  60%{opacity:.6;transform:scale(1) rotate(360deg)}
}

/* Gold pulse pada tick aktif */
.hero-nav .tick.on{
  position:relative;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,168,76,.6);
  animation:pulseTick 2s ease-in-out infinite
}
@keyframes pulseTick{
  0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.5)}
  50%{box-shadow:0 0 0 6px rgba(201,168,76,0)}
}

/* text overlay */
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 9%;z-index:6}
.hero h2.heroh{font-family:"Cinzel Decorative",serif;font-weight:900;font-size:62px;line-height:1.05;color:var(--cream);margin:0 0 18px;max-width:780px;letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.7);border:none;padding:0}
.hero h2.heroh em{color:var(--gold);font-style:normal}
.hero p.heroline{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--cream);max-width:540px;margin:0 0 28px;text-shadow:0 2px 20px rgba(0,0,0,.7)}

/* nav (prev/next/pager/ticks) */
.hero-nav{position:absolute;left:9%;bottom:38px;z-index:7;display:flex;align-items:center;gap:18px}
.hero-nav .pager{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--cream);letter-spacing:.2em}
.hero-nav .pager .cur{color:var(--gold);font-size:15px}
.hero-nav .ticks{display:flex;gap:8px;margin-left:20px}
.hero-nav .tick{width:34px;height:2px;background:rgba(236,228,210,.22);cursor:pointer;transition:background .3s;border:none;padding:0}
.hero-nav .tick.on{background:var(--gold)}
.hero-nav button{background:transparent;border:1px solid rgba(201,168,76,.45);color:var(--gold);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:all .25s}
.hero-nav button:hover{background:var(--gold);color:#000}

/* logo corner mark */
.hero-logo{position:absolute;top:28px;right:36px;z-index:7;display:flex;align-items:center;gap:12px;color:var(--cream)}
.hero-logo img{width:42px;height:42px;border-radius:50%;border:1px solid rgba(201,168,76,.4)}
.hero-logo .t{font-family:"Cinzel Decorative",serif;font-size:13px;letter-spacing:.15em;color:var(--gold)}
.hero-logo .s{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.2em;color:var(--cream-dim);text-transform:uppercase}

/* ============================================
   MOBILE — tulisan & nav diperkecil, layout dipertahankan
   ============================================ */
@media (max-width: 920px){
  .hero-frame{inset:16px}
  .hero-content{padding:0 0 0 7%}

  .hero h2.heroh{font-size:34px;line-height:1.1;margin:0 0 14px;max-width:90%}
  .hero p.heroline{font-size:15px;margin:0 0 22px;max-width:85%}

  .hero-nav{left:7%;bottom:24px;gap:12px}
  .hero-nav .pager{font-size:10px}
  .hero-nav .pager .cur{font-size:13px}
  .hero-nav .ticks{margin-left:10px;gap:6px}
  .hero-nav .tick{width:22px}
  .hero-nav button{width:32px;height:32px;font-size:13px}

  .hero-logo{top:16px;right:18px;gap:8px}
  .hero-logo img{width:34px;height:34px}
  .hero-logo .t{font-size:11px}
  .hero-logo .s{font-size:8px}
}

@media (max-width: 560px){
  .hero h2.heroh{font-size:26px}
  .hero p.heroline{font-size:13.5px}
  .hero-logo .t,.hero-logo .s{display:none}
  .hero-logo img{width:30px;height:30px}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .slide,
  .hero .slide img{transition:none;transform:none}
  .hero .slide.active img{transform:none}
  .particle,.sparkle,.hero-nav .tick.on{animation:none}
  .sparkle{opacity:.5}
}