/* Magnetic Dock + saklar tema (header). Tidak mengubah tata letak: hanya transform/opacity. */
.dock .nav{position:relative}
.dock .nav>*:not(.dock-plate):not(.dock-active):not(.dock-bar){position:relative;z-index:2}
.dock-plate,.dock-active,.dock-bar{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.dock-plate{z-index:1;border-radius:12px;background:var(--plate);border:1px solid var(--line);box-shadow:0 8px 18px rgba(var(--accent-rgb,30,64,175),.14),0 1px 2px rgba(var(--accent-rgb,30,64,175),.1);opacity:0;
 transition:transform .3s cubic-bezier(.22,1.1,.36,1),width .3s cubic-bezier(.22,1.1,.36,1),height .3s cubic-bezier(.22,1.1,.36,1),opacity .18s ease}
.dock-plate.on{opacity:1}
.dock-plate.snap{transition:none}
html[data-theme="dark"] .dock-plate{box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 0 1px rgba(107,166,255,.06) inset}
.dock-active{z-index:0;border-radius:12px;background:var(--active-bg);transition:transform .42s cubic-bezier(.3,1.25,.4,1),width .42s cubic-bezier(.3,1.25,.4,1),height .42s cubic-bezier(.3,1.25,.4,1),opacity .2s}
.dock-bar{z-index:3;width:4px;border-radius:0 4px 4px 0;background:var(--blue);transition:transform .42s cubic-bezier(.3,1.25,.4,1),height .42s cubic-bezier(.3,1.25,.4,1),opacity .2s}
.dock .nav a[aria-current=page],.dock .nav a[aria-current=page]:hover{background:transparent;color:var(--blue)}
.dock .nav a[aria-current=page]::before{display:none}
.dock .nav a:hover,.dock .nav-parent:hover{background:transparent}
.dock .nav-parent.has-current{color:var(--navy)}
.dock .nav-parent.is-target{color:var(--blue)}
/* gerak magnet: hanya transform pada isi item (ikon & teks), tidak menggeser tata letak */
.dock .nav :is(a,.nav-parent)>:is(.i,.txt,.dot-i){transition:transform .22s cubic-bezier(.2,.8,.3,1.1);transform:translateX(var(--mx,0px)) scale(var(--ms,1));transform-origin:left center;will-change:transform}
.dock .nav :is(a,.nav-parent)>.txt{transform:translateX(var(--mx,0px))}
.dock .nav :is(a,.nav-parent)>.dot-i{transform:translateX(var(--mx,0px))}
.dock .nav :is(a,.nav-parent)>.i{transform-origin:center}
.dock.pressing .nav a:active>.i{transform:translateX(var(--mx,0px)) scale(.94)}
.dock .nav a:focus-visible,.dock .nav-parent:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dock-tip{position:fixed;z-index:120;left:0;top:0;padding:7px 11px;border-radius:9px;background:var(--tip-bg);color:var(--tip-ink);font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-6px,-50%);transition:opacity .14s ease,transform .18s cubic-bezier(.2,.8,.3,1.1);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.dock-tip::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;background:inherit;transform:translateY(-50%) rotate(45deg);border-radius:2px}
.dock-tip.on{opacity:1;transform:translate(0,-50%)}
.collapsed .dock-bar{display:none}
.collapsed .dock-active{border-radius:12px}
@media (pointer:coarse){.dock-plate{display:none}.dock-tip{display:none}}
@media (prefers-reduced-motion:reduce){.dock-plate,.dock-active,.dock-bar,.dock .nav :is(a,.nav-parent)>*,.dock-tip{transition:none!important}}
/* ===== SAKLAR TEMA (header) ===== */
.theme-btn{position:relative;overflow:visible}
.theme-btn svg{position:absolute;inset:0;margin:auto;transition:transform .45s cubic-bezier(.3,1.3,.4,1),opacity .25s ease}
.theme-btn .i-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.theme-btn .i-moon{opacity:1;transform:none}
html[data-theme="dark"] .theme-btn .i-sun{opacity:1;transform:none}
html[data-theme="dark"] .theme-btn .i-moon{opacity:0;transform:rotate(90deg) scale(.4)}
.theme-btn::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;padding:6px 10px;border-radius:8px;background:var(--tip-bg);color:var(--tip-ink);font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .14s,transform .16s;z-index:60}
.theme-btn:hover::after,.theme-btn:focus-visible::after{opacity:1;transform:none}
/* Pergantian tema pelan (.8s). Saklar siang/malam (.theme-btn) dikecualikan: animasinya sendiri memakai transform dan opacity. */
html.theme-anim *:not(.theme-btn):not(.theme-btn *),html.theme-anim *:not(.theme-btn):not(.theme-btn *)::before,html.theme-anim *:not(.theme-btn):not(.theme-btn *)::after{transition:background-color .7s ease,border-color .7s ease,color .6s ease,box-shadow .7s ease!important}
@media (prefers-reduced-motion:reduce){html.theme-anim *{transition:none!important}}
@media print{.dock-plate,.dock-active,.dock-bar,.dock-tip,.theme-btn{display:none!important}}

/* ===== Magnetic Dock untuk tombol segmen (.seg), lihat js/segdock.js ===== */
.seg.sd{position:relative;isolation:isolate}
.seg.sd>button{position:relative;z-index:1;transform:translateY(var(--sy,0)) scale(var(--ss,1));transition:transform .18s cubic-bezier(.2,.8,.2,1),color .2s}
.seg.sd>button[aria-pressed=true]{background:transparent!important;box-shadow:none!important}
.seg-pill,.seg-plate{position:absolute;left:0;top:0;border-radius:999px;pointer-events:none;will-change:transform}
.seg-plate{z-index:0;background:rgba(37,99,235,.10);opacity:0;transition:transform .24s cubic-bezier(.2,.8,.2,1),width .24s,height .24s,opacity .16s}
.seg-plate.on{opacity:1}.seg-plate.snap{transition:none}
.seg-pill{z-index:0;background:var(--blue,#2563EB);box-shadow:0 2px 8px rgba(var(--fill-rgb,37,99,235),.35);opacity:0;transition:transform .34s cubic-bezier(.3,1.3,.5,1),width .3s cubic-bezier(.3,1.3,.5,1),opacity .15s}
html[data-theme="dark"] .seg-plate{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .seg-pill{background:var(--pill-dark,#2F6FDB);box-shadow:0 2px 8px rgba(0,0,0,.45)}
html[data-theme="dark"] .seg.sd>button[aria-pressed=true]{color:#fff}
@media (pointer:coarse){.seg.sd>button{transform:none}}
@media (prefers-reduced-motion:reduce){.seg-pill,.seg-plate,.seg.sd>button{transition:none!important}.seg.sd>button{transform:none}}
@media print{.seg-plate{display:none}}

.seg.sd>button:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.seg.sd>button:active{transform:none}}