/* Zoom foto & ikon tooltip KRIBAW */
:root{--fz-kuning:#FFD21E;--fz-biru:#1C2A8E;--fz-coklat:#4A2A14;--fz-ijo:#0F7A35;--fz-gelap:#1a0f07}
.fz-wadah{position:relative}
.fz-foto.fz-bisa-klik{cursor:zoom-in}
.fz-foto.fz-bisa-klik:focus-visible{outline:3px solid var(--fz-biru);outline-offset:3px}
.fz-foto.fz-lensa-on{cursor:crosshair}

/* ---------- ikon aksi di pojok foto ---------- */
.fz-ikon{position:absolute;z-index:8;display:flex;flex-direction:column;gap:8px;pointer-events:none;
  top:calc(var(--fz-t,0px) + 10px);left:calc(var(--fz-l,0px) + var(--fz-w,100%) - 10px);transform:translateX(-100%)}
.fz-ikon--kiri-atas{left:calc(var(--fz-l,0px) + 10px);transform:none}
.fz-ikon--kanan-bawah{top:calc(var(--fz-t,0px) + var(--fz-h,100%) - 10px);transform:translate(-100%,-100%)}
.fz-ikon--kiri-bawah{top:calc(var(--fz-t,0px) + var(--fz-h,100%) - 10px);left:calc(var(--fz-l,0px) + 10px);transform:translateY(-100%)}
.fz-ikon__tombol{pointer-events:auto;position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),opacity .25s,background .2s,color .2s;transition-delay:calc(var(--i,0) * 45ms)}
.fz-ikon__tombol svg{width:20px;height:20px}
.fz-ikon--kaca .fz-ikon__tombol{background:rgba(255,255,255,.8);color:var(--fz-coklat);border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 16px -6px rgba(26,15,7,.5);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4)}
.fz-ikon--solid .fz-ikon__tombol{background:var(--fz-kuning);color:var(--fz-biru);border:2px solid var(--fz-biru);box-shadow:0 3px 0 var(--fz-biru)}
.fz-ikon--garis .fz-ikon__tombol{background:rgba(26,15,7,.55);color:#fff;border:1.5px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fz-ikon .fz-ikon__tombol.fz-aksi--kronjo{background:var(--fz-ijo);color:#fff;border-color:#0A5A27}
.fz-ikon--kaca button.fz-ikon__tombol:hover{background:#fff;color:var(--fz-biru)}
.fz-ikon--solid button.fz-ikon__tombol:hover{background:#fff}
.fz-ikon--garis button.fz-ikon__tombol:hover{background:rgba(26,15,7,.85)}
.fz-ikon button.fz-ikon__tombol.fz-aksi--kronjo:hover{background:#12893C;color:#fff}
.fz-ikon__tombol:focus-visible{outline:3px solid var(--fz-kuning);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .fz-ikon__tombol{opacity:0;transform:translateX(10px) scale(.85)}
  .fz-ikon--kiri-atas .fz-ikon__tombol,.fz-ikon--kiri-bawah .fz-ikon__tombol{transform:translateX(-10px) scale(.85)}
  .fz-ikon.is-tampil .fz-ikon__tombol,.fz-ikon:focus-within .fz-ikon__tombol{opacity:1;transform:none}
  .fz-ikon.is-tampil button.fz-ikon__tombol:hover{transform:scale(1.12)}
}
@media (max-width:620px){.fz-ikon{gap:6px}.fz-ikon__tombol{width:34px;height:34px}.fz-ikon__tombol svg{width:17px;height:17px}}

/* ---------- tooltip ---------- */
.fz-tip{position:fixed;z-index:2147483000;left:0;top:0;max-width:240px;padding:7px 11px;border-radius:10px;background:var(--fz-biru);color:#fff;
  font:700 .8rem/1.3 'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:0 8px 20px -8px rgba(16,26,98,.6);pointer-events:none;opacity:0;transition:opacity .15s}
.fz-tip.is-on{opacity:1}
.fz-tip::after{content:"";position:absolute;left:var(--panah,50%);bottom:-5px;width:10px;height:10px;background:inherit;border-radius:2px;transform:translateX(-50%) rotate(45deg)}
.fz-tip.is-bawah::after{bottom:auto;top:-5px}

/* ---------- zoom samping ---------- */
.fz-lensa{position:fixed;z-index:2147482000;left:0;top:0;pointer-events:none;border:2px solid #fff;outline:2px solid var(--fz-kuning);border-radius:8px;
  background:rgba(255,210,30,.16);box-shadow:0 4px 14px rgba(26,15,7,.3);opacity:0;transition:opacity .15s}
.fz-lensa.is-on{opacity:1}
.fz-samping{position:fixed;z-index:2147482001;left:0;top:0;overflow:hidden;border-radius:18px;background:#fff;border:3px solid var(--fz-kuning);
  box-shadow:0 24px 50px -18px rgba(26,15,7,.6),0 0 0 6px rgba(255,210,30,.25);pointer-events:none;opacity:0;scale:.92;transition:opacity .18s,scale .18s}
.fz-samping.is-on{opacity:1;scale:1}
.fz-samping__gambar{position:absolute;inset:0;background-repeat:no-repeat;background-color:#fff}
.fz-samping__label{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:4px 10px;border-radius:999px;background:rgba(26,15,7,.75);color:#fff;
  font:800 .72rem/1.3 'Plus Jakarta Sans',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:none),(max-width:899px){.fz-samping,.fz-lensa{display:none}}

/* ---------- zoom modal ---------- */
html.fz-kunci{overflow:hidden}
.fz-modal{position:fixed;inset:0;z-index:2147481000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.fz-modal[hidden],.fz-modal [hidden]{display:none!important}
.fz-modal__latar{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(74,42,20,.93),rgba(16,9,4,.97));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.fz-modal.is-buka .fz-modal__latar{opacity:1}
.fz-modal__atas{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(10px,3vw,24px);opacity:0;transform:translateY(-10px);transition:opacity .3s .08s,transform .3s .08s}
.fz-modal__bawah{position:relative;z-index:2;display:grid;gap:10px;justify-items:center;padding:8px clamp(10px,3vw,24px) max(14px,env(safe-area-inset-bottom));opacity:0;transform:translateY(10px);transition:opacity .3s .08s,transform .3s .08s}
.fz-modal.is-buka .fz-modal__atas,.fz-modal.is-buka .fz-modal__bawah{opacity:1;transform:none}
.fz-modal__hitung{flex:none;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums}
.fz-modal__alat{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none;max-width:100%}
.fz-modal__alat::-webkit-scrollbar{display:none}
.fz-alat{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background .2s,transform .2s,opacity .2s}
.fz-alat svg{width:20px;height:20px}
.fz-alat:hover{background:rgba(255,210,30,.25);transform:translateY(-1px)}
.fz-alat:focus-visible,.fz-modal__nav:focus-visible,.fz-modal__jempol button:focus-visible{outline:3px solid var(--fz-kuning);outline-offset:2px}
.fz-alat[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.fz-alat--tutup{background:var(--fz-kuning);color:var(--fz-biru);border-color:var(--fz-kuning)}
.fz-alat--tutup:hover{background:#fff}
.fz-modal__panggung{position:relative;z-index:1;display:grid;place-items:center;min-height:0;overflow:hidden;touch-action:none}
.fz-modal__bingkai{display:grid;place-items:center;max-width:100%;max-height:100%}
.fz-modal__img{display:block;width:auto;height:auto;max-width:min(92vw,1400px);max-height:calc(100vh - 190px);object-fit:contain;border-radius:14px;background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85);transform-origin:center;transition:transform .25s cubic-bezier(.2,.8,.2,1);user-select:none;-webkit-user-drag:none;cursor:zoom-in}
@supports (height:100dvh){.fz-modal__img{max-height:calc(100dvh - 190px)}}
.fz-modal.is-zoom .fz-modal__img{cursor:grab}
.fz-modal__img.is-tarik{transition:none}
.fz-modal.is-zoom .fz-modal__img.is-tarik{cursor:grabbing}
.fz-modal.is-penuh .fz-modal__img{max-height:calc(100vh - 150px)}
.fz-modal__muat{position:absolute;width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:var(--fz-kuning);opacity:0;pointer-events:none;animation:fz-putar .8s linear infinite}
.fz-modal.is-muat .fz-modal__muat{opacity:1}
@keyframes fz-putar{to{transform:rotate(360deg)}}
.fz-modal__nav{position:absolute;z-index:3;top:50%;width:52px;height:52px;margin-top:-26px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.fz-modal__nav:hover{background:var(--fz-kuning);color:var(--fz-biru);transform:scale(1.06)}
.fz-modal__nav--kiri{left:clamp(8px,2vw,24px)}
.fz-modal__nav--kanan{right:clamp(8px,2vw,24px)}
.fz-modal--satu .fz-modal__nav,.fz-modal--satu .fz-modal__jempol{display:none}
.fz-modal__judul{margin:0;max-width:70ch;text-align:center;font-weight:700;font-size:.95rem;color:#FFE9A8}
.fz-modal__jempol{position:relative;display:flex;gap:8px;max-width:100%;padding:4px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}
.fz-modal__jempol button{flex:none;width:58px;height:58px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;opacity:.55;scroll-snap-align:center;transition:opacity .2s,border-color .2s,transform .2s}
.fz-modal__jempol button:hover{opacity:.85}
.fz-modal__jempol button img{display:block;width:100%;height:100%;object-fit:cover}
.fz-modal__jempol button[aria-current="true"]{opacity:1;border-color:var(--fz-kuning);transform:translateY(-2px)}
.fz-modal__petunjuk{position:absolute;z-index:4;left:50%;bottom:8%;transform:translateX(-50%);max-width:90%;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.6);font-size:.82rem;font-weight:700;text-align:center;pointer-events:none;animation:fz-pudar 3.4s ease forwards}
@keyframes fz-pudar{0%,72%{opacity:1}100%{opacity:0}}
@media (max-width:700px){
  .fz-modal__nav{display:none}
  .fz-alat{width:38px;height:38px;border-radius:10px}
  .fz-modal__img{max-width:96vw;max-height:calc(100vh - 210px);border-radius:10px}
  .fz-modal__jempol button{width:48px;height:48px}
}

/* ---------- pesan singkat ---------- */
.fz-toast{position:fixed;z-index:2147483001;left:50%;bottom:24px;padding:10px 18px;border-radius:999px;background:var(--fz-biru);color:#fff;font:800 .85rem/1.3 'Plus Jakarta Sans',system-ui,sans-serif;
  box-shadow:0 10px 24px -10px rgba(16,26,98,.6);opacity:0;transform:translate(-50%,20px);transition:opacity .2s,transform .2s;pointer-events:none}
.fz-toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .fz-modal *,.fz-ikon__tombol,.fz-samping,.fz-lensa{transition:none!important;animation:none!important}
}