:root{
        --accent:#c7a17a;     /* highlight */
        --track:#2a2a2a;      /* garis dasar range */
        --thumb:#c7a17a;      /* knob slider */
        --thumb-ring:#e8dbcf; /* ring di knob */
        }

        .filtersheet { position:relative; }
        .filtersheet__backdrop{ display:none; }
        .filtersheet__panel{}

        /* Sembunyikan elemen khusus mobile di desktop */
        .filtersheet__head,
        .filtersheet__footer { display: none; }

        .btn-open-filter{ display:none; } /* desktop hidden */

        /* === MOBILE ≤ 960px === */
        @media (max-width: 960px){
        .btn-open-filter{ display:inline-flex; } /* tombol pembuka di mobile */
        .advance__search--filter .advance__search--btn{ display:none!important; } /* sembunyikan submit inline */

        .filtersheet{ position:fixed; inset:0; display:none; z-index:99; }
        .filtersheet.is-open{ display:block; }
        .filtersheet__backdrop{ display:block; position:absolute; inset:0; background:rgba(0,0,0,.55); }
        .filtersheet__panel{
            position:absolute; left:0; right:0; bottom:0;
            height:88vh; background:#111; color:#fff; border-radius:16px 16px 0 0;
            padding:16px; box-shadow:0 -12px 30px rgba(0,0,0,.35); overflow:auto;
        }
        .filtersheet__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
        .filtersheet__head .title{ font-weight:700; letter-spacing:.3px; }

        .filtersheet__footer{ display:block; position:sticky; bottom:0; background:linear-gradient(#111,#111); padding-top:12px; margin-top:16px; }
        .filtersheet__footer .btn-apply-all{ width:100%; }
        }
        /* Bar kumpulan filter */
        .filterbar__row{display:grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap:1.75rem;align-items:end}

        /* Item & trigger (garis + chevron), animasi fill dari tengah */
        .filter-item{position:relative}
        .filter-trigger{
        display:flex;flex-direction:column;align-items:start;gap:.4rem;padding:.35rem 0;color:#fff;cursor:pointer;user-select:none;
        border-bottom:1px solid rgba(255,255,255,.5);position:relative
        }
        .filter-label-placeholder{display:flex;align-items:start;justify-content:space-between;width:100%}
        .filter-trigger .label{font-weight:600;letter-spacing:.2px;color: var(--accent);font-size:1.3rem;}
        .filter-trigger .value{opacity:.85;margin-left:.25rem}
        .filter-trigger .chev{width:12px;height:12px;transition:transform .25s ease}
        .filter-item.is-open .filter-trigger .chev{transform:rotate(180deg)}
        .filter-trigger::after{
        content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
        transform:scaleX(0);transform-origin:center;transition:transform .35s ease
        }
        .filter-item.is-open .filter-trigger::after{transform:scaleX(1)}

        /* Popover di bawah trigger */
        .filter-popover{
        display:none;position:absolute;left:0;top:100%;transform:translateY(.5rem);
        z-index:30;min-width:385px;max-width:clamp(280px,92vw,420px);
        background:#111;color:#fff;border-radius:.75rem;padding:1rem;box-shadow:0 10px 30px rgba(0,0,0,.35)
        }
        .filter-item.is-open .filter-popover{display:block}
        .pop-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
        .pop-row label{width:42px;color:#bbb}

        /* Dual-range */
        .range{position:relative;height:44px;margin:.75rem 0 .25rem}
        .range__bar,.range__fill{
        position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);border-radius:999px
        }
        .range__bar{background:var(--track)}
        .range__fill{background:var(--accent);left:var(--a,0%);right:calc(100% - var(--b,100%))}

        /* Dua input range ditumpuk di atas bar */
        .range input[type="range"]{
        position:absolute;left:0;right:0;top:0;width:100%;height:100%;
        background:transparent;z-index:4;-webkit-appearance:none;appearance:none
        }
        /* WebKit */
        .range input[type="range"]::-webkit-slider-runnable-track{background:transparent;height:6px}
        .range input[type="range"]::-webkit-slider-thumb{
        -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
        background:var(--thumb);border:3px solid var(--thumb-ring);box-shadow:inset 0 0 0 4px rgba(199,161,122,.35);
        cursor:pointer;margin-top:-6px
        }
        .range input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.06)}
        /* Firefox */
        .range input[type="range"]::-moz-range-track{background:transparent;height:6px}
        .range input[type="range"]::-moz-range-thumb{
        width:18px;height:18px;border-radius:50%;background:var(--thumb);border:3px solid var(--thumb-ring);
        box-shadow:inset 0 0 0 4px rgba(199,161,122,.35);cursor:pointer
        }

        .range input[type="range"] { pointer-events: none; touch-action: none; }
        .range input[type="range"]::-webkit-slider-thumb { pointer-events: all; }
        .range input[type="range"]::-moz-range-thumb { pointer-events: all; }

        /* Bubble nilai */
        .range__bubble{
        position:absolute;top:-36px;padding:.25rem .5rem;background:#6b6b6b;color:#fff;
        font-size:.85rem;border-radius:.35rem;display:none;z-index:5;transform:translateX(-50%)
        }
        .range.range--showbubble .range__bubble{display:block}

        /* Batas kiri-kanan range */
        .range__limits{display:flex;justify-content:space-between;font-size:.9rem;color:#cfcfcf;margin-top:.25rem}

        /* Checkbox list */
        .checkbox-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .75rem;max-height:260px;overflow:auto}
        .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr)) !important;}
        .chk{display:flex;align-items:center;gap:.5rem}

        /* Actions */
        .pop-actions{display:flex;justify-content:space-between;gap:.5rem;margin-top:.5rem}
        .btn-apply,.btn-clear{border:1px solid rgba(255,255,255,.2);border-radius:.5rem;padding:.4rem .8rem;background:#1e1e1e;color:#fff}
        .btn-apply{background:#063436}

        /* ===== Filter Sheet untuk ≤ 960px ===== */
        .filtersheet{ position:relative; }
        .filtersheet__backdrop{ display:none; }
        .filtersheet__panel{}
        .btn-open-filter{ display:none; } /* desktop hidden */

        @media (max-width: 960px){
        .btn-open-filter{ display:block;margin:auto } /* tombol pembuka di mobile */
        .advance__search--filter .advance__search--btn{ display:none!important; } /* sembunyi submit inline */

        .filtersheet{ position:fixed; inset:0; display:none; z-index:99; }
        .filtersheet.is-open{ display:block; }
        .filtersheet__backdrop{ display:block; position:absolute; inset:0; background:rgba(0,0,0,.55); }
        .filtersheet__panel{
            position:fixed; left:0; right:0; top:0;
            background:#111; color:#fff; border-radius: 0; height: 100vh;
            padding:16px; box-shadow:0; overflow:auto; width: 100vw;
        }
        .filterbar__row{display: inline-block;gap:1.75rem;align-items:center;width:100%;}
        .filtersheet__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
        .filtersheet__head .title{ font-weight:700; letter-spacing:.3px; }
        .filtersheet__footer{ position:sticky; bottom:0; background:linear-gradient(#111,#111); padding-top:12px; margin-top:16px; }
        .filtersheet__footer .btn-apply-all{ width:100%; }
        }

        /* Sedikit penghalusan font kecil */
        @media (max-width: 768px){ .filter-trigger{font-size:.95rem} }
        .filter-item{ z-index:1; }
        .filter-item.is-open{ z-index:50; }

        /* Pastikan tombol submit lama benar-benar tersembunyi di mobile */
        @media (max-width:960px){
        button.advance__search--btn[type="submit"],
        .advance__search--btn[type="submit"]{
            display:none !important;
        }
        }
        .filter-item:not(.is-open) .filter-popover { 
        display: none !important; 
        }