/* Dock bawah (HP & tablet < 1024px) — dipakai halaman aplikasi (galeri) DAN halaman /ucapan & /blog supaya menu sama.
   Dipindah dari <style> di web/user/index.html. Di desktop (>= 1024px) disembunyikan: menu ada di header. */
/* ---- Dock bawah mobile ---- */
.sk-dock{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;height:66px;border-radius:24px;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 4px;
  background:var(--color-base-100);background:color-mix(in oklab,var(--color-base-100) 94%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 14px 34px -14px #24204A80,0 2px 6px -2px #24204A26,inset 0 0 0 1px color-mix(in oklab,#E64C8B 14%,transparent)}
.sk-dock>*{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;
  font:600 10.5px/1 'Poppins',system-ui,sans-serif;letter-spacing:.01em;color:var(--color-base-content);opacity:.6;transition:opacity .2s,color .2s;-webkit-tap-highlight-color:transparent}
.sk-dock svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.sk-dock svg .fill{fill:currentColor;fill-opacity:0;transition:fill-opacity .2s}
.sk-dock>.dock-active{opacity:1;color:#E64C8B}
.sk-dock>.dock-active svg{transform:translateY(-1px) scale(1.08)}
.sk-dock>.dock-active svg .fill{fill-opacity:.22}
.sk-dock>.dock-active::after{content:"";position:absolute;bottom:7px;width:5px;height:5px;border-radius:9px;background:#E64C8B}
.sk-dock>.dock-active span{font-weight:800}
/* Prangko: tombol bulat menonjol di tengah */
.sk-dock .sk-mid{opacity:1}
/* Prangko di tengah: perangko bergerigi itu sendiri (bukan kotak merah), di atas lingkaran putih yang menonjol */
.sk-dock .sk-mid i{display:grid;place-items:center;width:56px;height:56px;margin-top:-30px;border-radius:999px;transform:rotate(-6deg);
  background:var(--color-base-100);box-shadow:0 10px 22px -10px #E64C8BAA,0 0 0 4px var(--color-base-100),inset 0 0 0 1.5px color-mix(in oklab,#E64C8B 22%,transparent)}
.sk-dock .sk-mid i img{width:42px;height:42px;transform:rotate(6deg);filter:drop-shadow(0 3px 4px #E64C8B55)}
.sk-dock .sk-mid.dock-active::after{display:none}
.sk-dock .sk-mid.dock-active i{transform:rotate(0) scale(1.06)}
.sk-dock .open-dot{position:absolute;top:8px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;font-size:10px}
@media (max-width:340px){.sk-dock{left:8px;right:8px}.sk-dock>*{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.sk-dock *{transition:none}}
@media (min-width:1024px){.sk-dock{display:none!important}}
@media (max-width:1023.98px){body:has(> .sk-dock){padding-bottom:calc(110px + env(safe-area-inset-bottom))}}