/* ============================================================
   RSU WAJAK HUSADA — COVERFLOW CAROUSEL + LIGHTBOX
   Dipakai section PROMO & AKTIVITAS di Beranda (instance terpisah).
   Gambar tidak pernah di-crop: object-fit:contain di atas latar blur.
   ============================================================ */
.wh-cf{
  --cf-main:58%;          /* lebar banner utama terhadap lebar carousel */
  --cf-ratio:16/9;        /* rasio bingkai banner */
  --cf-shift:72%;         /* jarak geser banner samping (relatif lebar banner) */
  --cf-side-scale:.8;
  --cf-blur:3px;
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;        /* cegah horizontal overflow halaman */
  outline:none;
}
.wh-cf:focus-visible{box-shadow:0 0 0 3px rgba(255,101,15,.35);border-radius:16px;}

.wh-cf-stage{position:relative;width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;}
.wh-cf-stage.is-dragging{cursor:grabbing;}
/* Penentu tinggi: elemen tak terlihat dengan lebar & rasio banner utama */
.wh-cf-sizer{width:var(--cf-main);margin:0 auto;aspect-ratio:var(--cf-ratio);pointer-events:none;}

.wh-cf-slide{
  position:absolute;top:0;left:50%;
  width:var(--cf-main);aspect-ratio:var(--cf-ratio);
  margin:0;padding:0;border:0;background:none;
  border-radius:16px;overflow:hidden;
  cursor:pointer;
  transform:translateX(-50%);
  transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .55s ease,opacity .55s ease,box-shadow .55s ease;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.wh-cf-stage.is-dragging .wh-cf-slide{transition:none;}
.wh-cf-slide.is-active{box-shadow:0 16px 38px rgba(23,48,77,.18);}
.wh-cf-slide:focus-visible{outline:3px solid #ffb98e;outline-offset:3px;}
.wh-cf-slide.is-hidden{opacity:0;pointer-events:none;}

/* Latar blur dari gambar yang sama → tidak ada area kosong, tanpa crop */
.wh-cf-bg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(18px) saturate(1.1);opacity:.55;transform:scale(1.05);}
.wh-cf-img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;}
.wh-cf-frame{position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-soft,#fff2e8),#f3f5f7);}
.wh-cf-fallback{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:var(--primary,#ff650f);font-size:42px;opacity:.45;}
.wh-cf-fallback[hidden]{display:none;}
.wh-cf-zoom{
  position:absolute;right:12px;bottom:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--primary,#ff650f);
  display:grid;place-items:center;font-size:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .25s ease;
}
.wh-cf-slide.is-active .wh-cf-zoom{opacity:1;transform:none;}
.wh-cf-count{position:absolute;left:12px;top:12px;z-index:2;background:rgba(23,48,77,.72);color:#fff;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:20px;}

/* Navigasi panah */
.wh-cf-nav{
  position:absolute;top:50%;z-index:20;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--primary,#ff650f);
  box-shadow:0 6px 18px rgba(23,48,77,.16);
  display:grid;place-items:center;font-size:16px;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.wh-cf-nav:hover{background:var(--primary,#ff650f);color:#fff;transform:translateY(-50%) scale(1.06);}
.wh-cf-nav:focus-visible{outline:3px solid #ffb98e;outline-offset:2px;}
.wh-cf-nav.prev{left:calc((100% - var(--cf-main)) / 2 - 22px);}
.wh-cf-nav.next{right:calc((100% - var(--cf-main)) / 2 - 22px);}

/* Pagination dots */
.wh-cf-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:16px 0 0;padding:0;list-style:none;}
.wh-cf-dot{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:#d9dee5;cursor:pointer;transition:width .3s ease,background .3s ease;}
.wh-cf-dot.is-active{width:26px;background:var(--primary,#ff650f);}
.wh-cf-dot:focus-visible{outline:3px solid #ffb98e;outline-offset:2px;}

/* Informasi item aktif */
.wh-cf-info{text-align:center;margin-top:14px;min-height:1px;}
.wh-cf-title{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;color:var(--ink,#17304d);font-size:clamp(17px,2vw,22px);letter-spacing:.3px;margin:0;line-height:1.25;}
.wh-cf-date{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary,#5f6b7a);font-size:13px;margin-top:6px;}
.wh-cf-date i{color:var(--primary,#ff650f);}
.wh-cf-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:12px;}
.wh-cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:24px;font-weight:700;font-size:13.5px;text-decoration:none;border:2px solid var(--primary,#ff650f);transition:background .2s ease,color .2s ease,transform .2s ease;}
.wh-cf-btn--primary{background:var(--primary,#ff650f);color:#fff;}
.wh-cf-btn--primary:hover{background:var(--primary-dark,#ed5700);border-color:var(--primary-dark,#ed5700);transform:translateY(-1px);}
.wh-cf-btn--ghost{background:#fff;color:var(--primary,#ff650f);}
.wh-cf-btn--ghost:hover{background:var(--primary-soft,#fff2e8);transform:translateY(-1px);}
.wh-cf-btn:focus-visible{outline:3px solid #ffb98e;outline-offset:2px;}
.wh-cf-empty{text-align:center;padding:36px 16px;border:1px dashed var(--gray-300,#dde2e8);border-radius:14px;color:var(--text-muted,#8a95a3);}

/* ---------- Responsif ---------- */
@media (min-width:768px) and (max-width:1023px){
  .wh-cf{--cf-main:68%;--cf-shift:78%;--cf-side-scale:.82;--cf-blur:2px;}
}
@media (max-width:767px){
  .wh-cf{--cf-main:82%;--cf-shift:96%;--cf-side-scale:.86;--cf-blur:1px;}
  .wh-cf-nav{display:none;}            /* mobile: swipe + dots */
  .wh-cf-slide{border-radius:12px;}
  .wh-cf-dots{margin-top:12px;}
  .wh-cf-info{margin-top:10px;}
  .wh-cf-actions .wh-cf-btn{flex:1 1 0;min-width:0;padding:0 12px;}
}
@media (max-width:375px){
  .wh-cf{--cf-main:86%;--cf-shift:98%;}
  .wh-cf-actions{flex-direction:column;}
  .wh-cf-actions .wh-cf-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .wh-cf-slide,.wh-cf-dot,.wh-cf-zoom{transition:none;}
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.wh-lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(10,18,30,.9);padding:56px 64px;}
.wh-lb.open{display:flex;animation:wh-lb-in .2s ease;}
@keyframes wh-lb-in{from{opacity:0}to{opacity:1}}
.wh-lb-figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px;}
.wh-lb-img{display:block;max-width:calc(100vw - 128px);max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.45);touch-action:pinch-zoom;background:#1b2635;}
.wh-lb-caption{color:#fff;text-align:center;font-size:14px;line-height:1.5;max-width:720px;}
.wh-lb-caption small{display:block;color:rgba(255,255,255,.7);margin-top:2px;}
.wh-lb-close,.wh-lb-nav{position:absolute;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;transition:background .2s ease;}
.wh-lb-close:hover,.wh-lb-nav:hover{background:rgba(255,255,255,.28);}
.wh-lb-close:focus-visible,.wh-lb-nav:focus-visible{outline:3px solid #ffb98e;outline-offset:2px;}
.wh-lb-close{top:14px;right:14px;width:46px;height:46px;font-size:20px;}
.wh-lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:18px;}
.wh-lb-nav.prev{left:12px;}
.wh-lb-nav.next{right:12px;}
.wh-lb-nav[hidden]{display:none;}
body.wh-lb-lock{overflow:hidden;}
@media (max-width:767px){
  .wh-lb{padding:56px 8px 16px;}
  .wh-lb-img{max-width:calc(100vw - 16px);max-height:calc(100vh - 120px);border-radius:4px;}
  .wh-lb-nav{top:auto;bottom:14px;transform:none;width:44px;height:44px;}
  .wh-lb-nav.prev{left:calc(50% - 56px);}
  .wh-lb-nav.next{right:calc(50% - 56px);}
  .wh-lb.has-nav{padding-bottom:72px;}
  .wh-lb.has-nav .wh-lb-img{max-height:calc(100vh - 170px);}
}

/* ============================================================
   PENYESUAIAN SECTION BERANDA (PROMO & AKTIVITAS)
   ============================================================ */
#homePromoSection,#homeActivitySection{overflow:hidden;}
#homePromoSection .section-heading,#homeActivitySection .section-heading{gap:12px;}
@media (max-width:767px){
  #homePromoSection .section-link,#homeActivitySection .section-link{font-size:12px;}
}
