/* =====================================================================
   SEBELUM CAHAYA: halaman Direktori
   Kepala langit subuh + buku besar hasil, bilah filter lengket,
   kisi kartu, tampilan peta, dan legenda lencana.
   ===================================================================== */

/* ---------- Kepala ---------- */
.dir-hero{padding-bottom:clamp(96px,11vw,150px)}
.dir-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:40px;align-items:end}
.dir-hero__notice{margin-top:4px}
.dir-hero .notice{background:rgba(243,229,194,.94)}

/* Buku besar hasil: kartu kaca berbingkai emas di atas langit */
.ledger{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(10,20,44,.62),rgba(16,32,67,.4));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(217,178,90,.55),0 24px 48px -30px rgba(0,0,0,.8)}
.ledger::before{content:"";position:absolute;inset:5px;border:1px solid rgba(217,178,90,.2);border-radius:calc(var(--r-lg) - 4px);pointer-events:none}
.ledger__k{font:700 10.5px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-glow)}
.ledger__n{display:flex;align-items:flex-end;gap:12px;margin-top:6px}
.ledger__n>b{font:300 64px/.9 var(--f-display);letter-spacing:-.04em;color:var(--on-navy);font-variant-numeric:lining-nums tabular-nums}
.ledger__n>span{font-size:13px;line-height:1.35;color:var(--on-navy-soft);padding-bottom:4px}
.ledger__rows{list-style:none;display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(233,201,127,.2)}
.ledger__row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;color:var(--on-navy-soft)}
.ledger__row i{width:11px;height:11px;clip-path:var(--star8)}
.ledger__row b{font:600 13px var(--f-ui);color:var(--on-navy);font-variant-numeric:tabular-nums}
.ledger__bar{grid-column:2/4;height:3px;border-radius:3px;background:rgba(233,201,127,.14);overflow:hidden;margin-top:-4px}
.ledger__bar span{display:block;height:100%;border-radius:inherit;transition:width var(--d-3) var(--ease)}
.ledger__row.is-zero{opacity:.45}
.ledger__link{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--f-ui);color:var(--sun);align-self:flex-start}
.ledger__link .icon{width:15px;height:15px;transition:transform var(--d-2) var(--ease)}
.ledger__link:hover .icon{transform:translateX(3px)}
@media (max-width:900px){
  .dir-hero__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .ledger__rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}

/* ---------- Bilah filter lengket ---------- */
.fbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h));z-index:40;margin-top:-1px;
  background:rgba(251,247,236,.9);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px)}
.fbar::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);pointer-events:none}
.fbar.is-stuck{box-shadow:0 18px 30px -26px rgba(20,28,51,.55)}
.fbar__in{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,172px)) auto;
  grid-template-areas:"q prov stat afil view" "chips chips chips sort tgl";gap:10px 12px;align-items:center;padding-block:14px 12px}
.fbar__q{grid-area:q;height:44px}
.fbar__q .field__kbd{flex:none}
.fbar__view{grid-area:view;justify-self:end}
.fbar__open{display:none}
.fbar__badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--navy);color:var(--sun);font:700 11px var(--f-ui)}

/* Panel: di desktop larut ke dalam kisi bilah */
.fpanel,.fpanel__sheet,.fpanel__body{display:contents}
.fpanel__scrim,.fpanel__head,.fpanel__foot{display:none}
.fchips{grid-area:chips;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;
  -webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
.fchips::-webkit-scrollbar{display:none}
.fchips .chip{flex:none}
.fsel{display:block;min-width:0}
.fsel--prov{grid-area:prov}.fsel--stat{grid-area:stat}.fsel--afil{grid-area:afil}.fsel--sort{grid-area:sort}
.fsel__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.fsel select{text-overflow:ellipsis}

/* Sakelar "tampilkan yang dicabut" */
.ftgl{grid-area:tgl;display:inline-flex;align-items:center;gap:10px;cursor:pointer;justify-self:end;font:600 13px var(--f-ui);color:var(--ink-soft);white-space:nowrap;position:relative}
.ftgl input{position:absolute;opacity:0;width:1px;height:1px}
.ftgl__track{position:relative;width:40px;height:24px;border-radius:999px;background:var(--vellum-2);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background var(--d-2),box-shadow var(--d-2);flex:none}
.ftgl__knob{position:absolute;top:3px;left:3px;width:18px;height:18px;clip-path:var(--star8);background:var(--card);transition:transform var(--d-3) var(--ease-spring),background var(--d-2)}
.ftgl input:checked+.ftgl__track{background:var(--vermilion);box-shadow:inset 0 0 0 1px rgba(155,58,38,.6)}
.ftgl input:checked+.ftgl__track .ftgl__knob{transform:translateX(16px) rotate(45deg);background:var(--paper)}
.ftgl input:focus-visible+.ftgl__track{outline:2px solid var(--gold-ink);outline-offset:3px}

/* ---------- Bilah ringkas + panel bawah (ponsel & tablet) ---------- */
@media (max-width:900px){
  /* backdrop-filter membuat position:fixed milik panel terkurung di bilah, jadi dimatikan di sini */
  .fbar{background:rgba(251,247,236,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
  .fbar.has-open{z-index:90}
  .fbar__in{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"q open view";padding-block:12px}
  .fbar__open{display:inline-flex;grid-area:open;height:44px;padding:0 14px}
  .fbar__view .seg__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .fbar__view .seg__btn{padding:0 11px}
  .fbar__q .field__kbd{display:none}

  .fpanel{display:block;position:fixed;inset:0;z-index:85;pointer-events:none;visibility:hidden;transition:visibility 0s linear var(--d-3)}
  .fpanel.is-open{pointer-events:auto;visibility:visible;transition:visibility 0s}
  .fpanel__scrim{display:block;position:absolute;inset:0;background:rgba(10,20,44,.45);opacity:0;transition:opacity var(--d-3)}
  .fpanel.is-open .fpanel__scrim{opacity:1}
  .fpanel__sheet{display:flex;flex-direction:column;position:absolute;left:0;right:0;bottom:0;max-height:min(86vh,720px);
    border-radius:24px 24px 0 0;background:var(--paper) var(--noise);box-shadow:0 -24px 50px -20px rgba(10,20,44,.55);
    transform:translateY(102%);transition:transform var(--d-3) var(--ease)}
  .fpanel__sheet::before{content:"";position:absolute;top:0;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);clip-path:var(--star8);background:var(--gold-light)}
  .fpanel.is-open .fpanel__sheet{transform:none}
  .fpanel__head{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter-r) 12px var(--gutter);border-bottom:1px solid var(--line)}
  .fpanel__head b{font:500 21px var(--f-display)}
  .fpanel__x{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-strong)}
  .fpanel__body{display:flex;flex-direction:column;gap:16px;flex:1 1 auto;min-height:0;padding:18px var(--gutter-r) 20px var(--gutter);overflow-y:auto;overscroll-behavior:contain}
  .fchips{flex-wrap:wrap;overflow:visible;-webkit-mask:none;mask:none}
  .fsel__l{position:static;width:auto;height:auto;clip:auto;display:block;font:700 10.5px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .fsel .select select{height:48px;font-size:15px}
  .ftgl{justify-self:start;padding:6px 0}
  .fpanel__foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:14px var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 16px) var(--gutter);border-top:1px solid var(--line);background:var(--paper)}
}

/* ---------- Hasil ---------- */
.dir-res{padding-top:clamp(28px,4vw,40px)}
.res-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-bottom:22px}
.res-head__sum{font:400 18px/1.4 var(--f-display);color:var(--ink-soft)}
.res-head__sum b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.res-head__tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ftag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 12px;border-radius:8px;background:var(--tint);color:var(--navy);font:600 12.5px var(--f-ui);transition:background var(--d-1)}
.ftag .icon{width:14px;height:14px}
.ftag:hover{background:#d6dfee}
.ftag--reset{background:transparent;color:var(--gold-ink);padding:0 6px;text-decoration:underline;text-decoration-color:var(--gold-light);text-underline-offset:3px}
.ftag--reset:hover{background:transparent;color:var(--navy)}

.dir-grid{--gap:22px}
.dir-grid .lcard{animation-duration:700ms}

.dir-map{margin-bottom:32px}
.dir-map__cap{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted)}
.dir-map__cap .icon{width:16px;height:16px;color:var(--gold)}
.scmap__pin.is-hot polygon{transform:scale(1.9)}
.scmap__pin.is-hot{filter:drop-shadow(0 0 6px rgba(245,200,121,.9))}
@media (hover:none){.dir-map__cap{display:none}}

/* ---------- Legenda ---------- */
.legend{padding:clamp(24px,3.5vw,36px)}
.legend__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.legend__grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
.legend__item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:16px;border-top:1px dashed var(--line)}
.legend__item p{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
@media (max-width:860px){.legend__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.legend__grid{grid-template-columns:minmax(0,1fr)}}