/* Dynamic Island: navigasi bersama untuk semua halaman (diambil dari v5/07) */
.iw{position:fixed;left:0;right:0;top:12px;z-index:30;display:flex;justify-content:center;pointer-events:none;padding:0 12px}
.isl{--rad:999px;position:relative;pointer-events:auto;display:flex;align-items:center;gap:6px;height:46px;padding:0 7px 0 16px;background:#000;color:#f2f2f4;border-radius:var(--rad);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.07);
  clip-path:inset(0 0 0 0 round var(--rad));transform-origin:50% 0;
  transition:clip-path .9s cubic-bezier(.5,1.35,.4,1),box-shadow .4s}
.isl.pre{clip-path:inset(0 calc(50% - 64px) 0 calc(50% - 64px) round 23px)}
.isl>*{transition:opacity .45s .35s,filter .45s .35s,transform .6s .3s var(--ease)}
.isl.pre>*{opacity:0;filter:blur(6px);transform:scale(.92)}
.isl::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(160px 60px at var(--mx,50%) 0%,rgba(255,255,255,.16),transparent 70%)}
.isl:hover::before{opacity:1}
.isl:hover{box-shadow:0 18px 40px -12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14)}
.isl.bump{animation:isl-bump .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes isl-bump{0%{transform:scale(1)}35%{transform:scale(1.035,1.12)}100%{transform:scale(1)}}
:root[data-theme="dark"] .isl{box-shadow:0 14px 34px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,125,156,.16),0 0 26px -8px rgba(255,125,156,.35)}
.isl .clk{display:flex;align-items:center;gap:8px;font:400 21px/1 var(--display);letter-spacing:.05em;padding-right:6px;font-variant-numeric:tabular-nums}
.isl .clk i{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#f7bfca,#efbf93);animation:isl-pulse 2.4s ease-in-out infinite}
@keyframes isl-pulse{50%{opacity:.35;transform:scale(.75)}}
.isl .nav{position:relative;display:flex;gap:2px;font-size:13.5px;font-weight:600}
.isl .nav a{position:relative;z-index:1;text-decoration:none;color:rgba(242,242,244,.62);padding:7px 12px;border-radius:999px;transition:color .25s}
.isl .nav a:hover,.isl .nav a:focus-visible,.isl .nav a[aria-current="true"]{color:#fff}
.isl .nav a:focus-visible{outline:1.5px solid rgba(247,191,202,.7);outline-offset:-2px}
.isl .ind{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.3,1.3,.5,1),width .5s cubic-bezier(.3,1.3,.5,1),opacity .3s;opacity:0}
.isl .stat{display:flex;align-items:center;gap:8px;padding:0 8px 0 10px;margin-left:4px;border-left:1px solid rgba(255,255,255,.12);font-size:12.5px;white-space:nowrap}
.isl .stat .vw{color:rgba(242,242,244,.5);font-weight:500}
.isl .sts{position:relative;display:inline-grid;min-width:84px;height:18px;overflow:hidden}
.isl .sts>span{grid-area:1/1;font-weight:700;line-height:18px;transform:translateY(110%);opacity:0;filter:blur(3px);transition:transform .55s cubic-bezier(.3,1.25,.5,1),opacity .35s,filter .35s}
.isl .sts>span.on{transform:none;opacity:1;filter:none;background:linear-gradient(100deg,#f7bfca,#efbf93);-webkit-background-clip:text;background-clip:text;color:transparent}
.isl .sts>span.off{transform:translateY(-110%)}
.isl .ring{width:18px;height:18px;transform:rotate(-90deg)}
.isl .ring circle{fill:none;stroke-width:2.4}
.isl .ring .tr{stroke:rgba(255,255,255,.14)}
.isl .ring .pg{stroke:url(#isl-rg);stroke-linecap:round;stroke-dasharray:44;stroke-dashoffset:44}
.isl .ctl{border-color:rgba(255,255,255,.14);border-radius:999px;height:32px;min-width:32px;color:#f2f2f4;transition:border-color .25s,background-color .25s,color .25s}
.isl .ctl:hover{border-color:rgba(247,191,202,.6);background:rgba(255,255,255,.08);color:#f7bfca}
.isl .ctls{display:flex;gap:4px}
.isl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:760px){
  .iw{top:8px;padding:0 10px}
  .isl{--rad:26px;width:100%;max-width:440px;height:auto;flex-wrap:wrap;padding:8px 6px 6px 14px;row-gap:4px;column-gap:4px}
  .isl.pre{clip-path:inset(0 calc(50% - 60px) calc(100% - 36px) calc(50% - 60px) round 18px)}
  .isl .clk{order:1;font-size:20px}
  .isl .stat{order:2;flex:1;border-left:0;margin:0;padding:0 4px;justify-content:center}
  .isl .ctls{order:3}
  .isl .nav{order:4;flex:0 0 100%;justify-content:space-between;margin-left:-8px;font-size:13px}
  .isl .nav a{padding:7px 10px}
}
@media (prefers-reduced-motion:reduce){.isl.pre{clip-path:none}.isl.pre>*{opacity:1;filter:none;transform:none}}