/* ==========================================================================
   FSPPB — panah kiri/kanan slider (hero, iklan samping, iklan header)
   Dimuat paling akhir. Ukuran disesuaikan per konteks, area ketuk >= 44px di HP.
   ========================================================================== */
.hr-ar,.ad-ar,.ta-ar{position:absolute;display:grid;place-items:center;padding:0;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:transform .2s,background .2s,color .2s,opacity .25s,box-shadow .2s,border-color .2s}
.hr-ar svg,.ad-ar svg,.ta-ar svg{width:56%;height:56%;display:block;pointer-events:none}
.hr-ar:after,.ad-ar:after,.ta-ar:after{content:"";position:absolute;inset:-6px}   /* memperluas area ketuk */
.hr-ar:focus-visible,.ad-ar:focus-visible,.ta-ar:focus-visible{outline:3px solid var(--cy);outline-offset:2px}

/* ---- Hero (foto besar di atas) ---- */
.hero{touch-action:pan-y}
.hr-ar{--s:52px;top:44%;z-index:4;width:var(--s);height:var(--s);margin-top:calc(var(--s) / -2);border-radius:50%;color:#fff;
  background:rgba(20,14,60,.38);border:1.5px solid rgba(255,255,255,.42);-webkit-backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(10,6,40,.25)}
.hr-ar.prev{left:max(14px,calc(50% - 672px))}
.hr-ar.next{right:max(14px,calc(50% - 672px))}
.hr-ar:hover{background:var(--cy);color:var(--navyd);border-color:transparent;transform:scale(1.08)}
.hr-ar:active{transform:scale(.92)}
.dots button{position:relative}
.dots button:after{content:"";position:absolute;inset:-12px -4px}

/* Label "Iklan": deklarasi font lama tidak valid (ukuran jadi besar) -> diperbaiki */
.ta-b,.as em,.banner-ad em,.poster em{font:600 10px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.02em}

/* ---- Iklan slideshow (samping/sidebar/rail) ---- */
.as{align-self:center}
.ad-ar{--s:34px;top:50%;z-index:4;width:var(--s);height:var(--s);margin-top:calc(var(--s) / -2);border-radius:50%;color:var(--navy);
  background:rgba(255,255,255,.93);box-shadow:0 4px 14px rgba(20,14,60,.3)}
.ad-ar.prev{left:8px}.ad-ar.next{right:8px}
.ad-ar:hover{background:var(--navy2);color:#fff;transform:scale(1.1)}
.ad-ar:active{transform:scale(.92)}
.rail .ad-ar{--s:28px}.rail .ad-ar.prev{left:5px}.rail .ad-ar.next{right:5px}
.ad-right .as img{max-height:560px;object-fit:contain}

/* ---- Iklan memanjang di header ---- */
.ta-ar{--s:26px;top:50%;z-index:4;width:var(--s);height:var(--s);margin-top:calc(var(--s) / -2);border-radius:50%;color:var(--navy);
  background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(20,14,60,.28)}
.ta-ar.prev{left:5px}.ta-ar.next{right:5px}
.ta-ar:hover{background:var(--navy2);color:#fff}

/* Desktop (mouse): panah iklan muncul saat disorot. HP/tablet: selalu tampak. */
@media(hover:hover) and (pointer:fine) and (min-width:901px){
  .ad-ar,.ta-ar{opacity:0}
  .adslide:hover .ad-ar,.adslide:focus-within .ad-ar,.topad:hover .ta-ar,.topad:focus-within .ta-ar{opacity:1}
}

/* ---- Tablet & HP ---- */
@media(max-width:900px){
  .hr-ar{--s:44px;top:36%}
  .hr-ar.prev{left:12px}.hr-ar.next{right:12px}
  .ad-ar{--s:38px}
  .ta-ar{--s:26px}
  .rl-nav,.rl-nav:hover{width:40px;height:40px}
}
@media(max-width:480px){
  .hr-ar{--s:40px;top:32%;background:rgba(20,14,60,.45)}
  .hr-ar.prev{left:10px}.hr-ar.next{right:10px}
}
@media(hover:none){.hr-ar:hover,.ad-ar:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.hr-ar,.ad-ar,.ta-ar{transition:none}}