/* Pencarian di header. Bar melebar mengisi header, judul memudar, area di bawahnya menggelap; saran muncul satu per satu.
   Hanya memakai token tema, jadi ikut mode gelap dan palet. Ikon berdiri sendiri (tanpa kotak atau lingkaran latar); garis pinggir aktif = gradasi tipis.
   Gerak (Emil Kowalski): ease-out, di bawah 300ms untuk elemen kecil, tekan = scale(.97 atau lebih kecil), hover hanya untuk kursor. */
.gs-wrap{display:contents;--gs-bw:300px;--gs-rr:130px;--gs-ease:cubic-bezier(.23,1,.32,1);--gs-drawer:cubic-bezier(.32,.72,0,1)}
.gs-wrap[hidden]{display:none}
.gs-slot{flex:none;width:var(--gs-bw)}

.gs{position:absolute;z-index:3;top:12px;height:44px;left:calc(100% - var(--gs-rr) - var(--gs-bw));right:var(--gs-rr);display:flex;align-items:center;gap:2px;padding:0 12px 0 6px;
  border:1px solid var(--bd);border-radius:14px;background:var(--surface);color:var(--ink);
  transition:left .36s var(--gs-drawer),right .36s var(--gs-drawer),border-color .2s,background-color .2s}
.gs::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(100deg,#8B5CF6,#3B82F6 55%,#14B8A6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gs.on{left:16px;right:16px;border-color:transparent}
.gs.on::before{opacity:1}
@media (hover:hover) and (pointer:fine){.gs:not(.on):hover{border-color:var(--ink-3)}}

.gs-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;
  transition:color .2s,transform .16s var(--gs-ease);-webkit-tap-highlight-color:transparent}
.gs-ic:focus{outline:none}
.gs-ic:focus-visible{color:var(--blue);transform:scale(1.12)}
.gs-ic:active{transform:scale(.9)}
.gs.on .gs-ic{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.gs-ic:hover{color:var(--ink)}}
.gs-morph{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;display:block}
.gs-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

.gs input{flex:1;min-width:0;height:100%;margin:0;padding:0 6px 0 2px;border:0;border-radius:0;background:none;box-shadow:none;outline:0;font:500 14px var(--sans,inherit);color:var(--ink);text-overflow:ellipsis}
.gs input:focus{box-shadow:none;border:0}
.gs input::placeholder{color:var(--ink-3);font-weight:400}
.gs-rt{display:flex;align-items:center;gap:6px;flex:none}
.gs-rt kbd,.gs-pf kbd{font:600 11px var(--sans,inherit);border:1px solid var(--bd);border-bottom-width:2px;border-radius:6px;padding:0 6px;line-height:18px;color:var(--ink-2);background:var(--surface-2,transparent)}
.gs-k-esc{display:none}
.gs.on .gs-k-slash{display:none}.gs.on .gs-k-esc{display:inline-block}
.gs-rt.has-text kbd{display:none!important}
.gs-x{width:28px;height:28px;display:none;place-items:center;padding:0;margin:0;border:0;background:none;color:var(--ink-3);cursor:pointer;transition:color .15s,transform .16s var(--gs-ease)}
.gs-x.on{display:grid}.gs-x:focus{outline:none}.gs-x:active{transform:scale(.9)}
.gs-x .gs-i{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.gs-x:hover{color:var(--ink)}}

/* judul dan tombol kanan memudar di bawah bar */
.top>*:not(.gs-wrap){transition:opacity .16s ease,transform .22s var(--gs-ease)}
.top.gs-open>*:not(.gs-wrap){opacity:0;pointer-events:none}
.top.gs-open>h1{transform:translateX(-10px)}

.gs-scrim{position:fixed;inset:0;z-index:19;background:var(--scrim,rgba(7,20,40,.45));opacity:0;pointer-events:none;transition:opacity .26s ease}
.gs-scrim.on{opacity:1;pointer-events:auto}

/* panel saran */
.gs-panel{position:absolute;z-index:2;top:64px;left:16px;right:16px;max-height:calc(100vh - 96px);overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  box-shadow:0 1px 2px rgba(15,27,61,.06),0 18px 44px rgba(15,27,61,.2);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.985);transform-origin:50% 0;
  transition:opacity .15s ease,transform .22s var(--gs-ease),visibility 0s .22s}
.gs-open .gs-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:.07s,.07s,0s}
html[data-theme="dark"] .gs-panel{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.5)}
.gs-ph{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 4px;font:600 11px var(--sans,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.gs-link{border:0;background:none;padding:0;font:500 12px var(--sans,inherit);letter-spacing:0;text-transform:none;color:var(--blue);cursor:pointer}
.gs-link:focus-visible{outline:none;text-decoration:underline}
.gs-list{list-style:none;margin:0;padding:4px 8px 8px}
.gs-list li{display:flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 10px;border-radius:10px;cursor:pointer;color:var(--ink-2)}
.gs-list li[aria-selected="true"]{background:color-mix(in srgb,var(--blue) 11%,transparent)}
.gs-si{display:grid;place-items:center;color:var(--ink-3)}
.gs-list li[aria-selected="true"] .gs-si{color:var(--blue)}
.gs-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px;color:var(--ink-3)}
.gs-tx b{color:var(--ink);font-weight:700}
.gs-panel.gs-recent .gs-tx{color:var(--ink)}
.gs-tx em{font-style:normal;font-size:12.5px;margin-left:10px;color:var(--ink-3)}
.gs-cat{display:flex;align-items:center;gap:6px;flex:none;width:112px;font-size:12px;font-weight:500;color:var(--ink-3)}
.gs-cat .gs-i{width:16px;height:16px}
.gs-fill{width:36px;height:36px;display:grid;place-items:center;padding:0;margin:0;border:0;background:none;color:var(--ink-3);cursor:pointer;flex:none;transition:color .15s,transform .16s var(--gs-ease)}
.gs-fill:focus{outline:none}.gs-fill:active{transform:scale(.9) translate(1px,-1px)}
@media (hover:hover) and (pointer:fine){.gs-fill:hover{color:var(--blue);transform:translate(1px,-1px)}}
.gs-list li.gs-new{animation:gs-in .22s var(--gs-ease) both;animation-delay:calc(var(--i,0)*55ms + 40ms)}
@keyframes gs-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.gs-list li.gs-none{display:block;height:auto;padding:12px 10px;cursor:default;font-size:13.5px;color:var(--ink-2)}
.gs-pf{display:flex;flex-wrap:wrap;gap:6px 16px;padding:9px 16px;border-top:1px solid var(--line);background:var(--surface-2,transparent);font-size:12px;color:var(--ink-3)}
.gs-pf>span{display:inline-flex;align-items:center;gap:6px}

/* label filter yang aktif, tepat di bawah header */
.gs-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 28px 0}
.gs-chips[hidden]{display:none}
.gs-flabel{font-size:12.5px;color:var(--ink-3)}
.gs-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 12px;border:1px solid var(--bd);border-radius:999px;background:color-mix(in srgb,var(--blue) 9%,var(--surface));
  color:var(--ink);font:600 13px var(--sans,inherit);animation:gs-chip .2s var(--gs-ease) both}
.gs-chip .gs-i{width:16px;height:16px;color:var(--blue)}
.gs-chip em{font-style:normal;font-weight:500;color:var(--ink-3);margin-left:6px}
.gs-chip button{width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--ink-3);cursor:pointer;transition:color .15s,transform .16s var(--gs-ease)}
.gs-chip button:active{transform:scale(.9)}.gs-chip button:focus-visible{outline:none;color:var(--blue)}
.gs-chip button .gs-i{width:15px;height:15px;color:inherit}
@media (hover:hover) and (pointer:fine){.gs-chip button:hover{color:var(--bad,#C2362B)}}
@keyframes gs-chip{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

/* kolom cari lama di toolbar halaman disembunyikan bila bar header aktif (filternya tampil sebagai label di bawah header) */
body[data-gsearch] .toolbar .field.search{display:none}

@media (max-width:820px){.gs-chips{padding:12px 16px 0}}
@media (max-width:700px){
  .gs-wrap{--gs-bw:44px}
  .gs{padding:0 0 0 2px}
  .gs:not(.on){border-color:transparent;background:none}
  .gs:not(.on) .gs-rt{display:none}
  .gs input{flex:0 0 0;width:0;padding:0;opacity:0}
  .gs.on input{flex:1;width:auto;padding:0 6px 0 2px;opacity:1}
  .gs-cat span,.gs-tx em{display:none}.gs-cat{width:20px}
}
@media (prefers-reduced-motion:reduce){
  .gs,.top>*:not(.gs-wrap){transition-duration:.01ms}
  .gs-panel{transform:none;transition:opacity .12s ease,visibility 0s .12s}.gs-open .gs-panel{transition-delay:0s}
  .gs-list li.gs-new,.gs-chip{animation:none}
}
@media print{.gs-wrap,.gs-scrim,.gs-chips{display:none!important}}