/* ============================================================
   GearHub — tampilan HP "seperti aplikasi" (direktori, semua
   bengkel, detail bengkel). HANYA berlaku di layar ≤ 900px;
   di atas itu file ini tidak mengubah apa pun.

   Aturan: (1) elemen khusus HP berkelas .m-only → tersembunyi
   di desktop; (2) wadah .sf-fields memakai display:contents di
   desktop sehingga tata letak form pencarian PERSIS seperti
   sebelumnya; (3) semua perubahan ukuran memakai !important
   karena banyak gaya halaman ditulis inline.
   ============================================================ */

/* --- Desktop: elemen khusus HP tidak ada ---------------------- */
.m-only{display:none}
.sf-fields{display:contents}
.rc-row,.ma-row{display:contents}

@media (max-width:900px){
  :root{--m-accent:oklch(0.55 0.12 250);--m-nav-h:60px;--m-safe:env(safe-area-inset-bottom,0px)}
  .m-only{display:revert}
  html{scroll-padding-top:70px}
  body{background:#f1f3f6;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
  /* Latar blob dekoratif dimatikan di HP: lebih ringan & bersih. */
  .blob{display:none!important}

  /* --- Header: satu baris ringkas ----------------------------- */
  .app-header{padding:8px 12px!important;position:sticky;top:0}
  .app-header nav{padding:7px 10px!important;gap:10px!important;border-radius:14px!important;box-shadow:0 2px 10px rgba(18,24,36,0.06)!important}
  .app-header .btn-glass,.app-header .btn-outline,.app-header .nav-link:not(.m-back){display:none!important}
  .app-header .brand-sub{display:block!important;font-size:8.5px!important;letter-spacing:.03em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-header nav > a:first-of-type{flex:0 1 auto;min-width:0}
  .app-header nav > a:first-of-type > span:last-child{min-width:0}
  .m-dl{display:inline-flex!important;align-items:center;gap:5px;flex:none;height:32px;padding:0 13px;border-radius:999px;background:var(--m-accent);color:#fff;font-size:12.5px;font-weight:700;text-decoration:none}
  .app-header nav > a:first-of-type > span:first-child{width:30px!important;height:30px!important;border-radius:9px!important}
  .app-header nav > a:first-of-type{align-items:center!important}
  .app-header nav > a:first-of-type > span:last-child{justify-content:center;min-height:30px}
  .m-back{display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:36px;height:36px;margin:-2px 0 -2px -4px;border-radius:50%;color:#161a1f;background:rgba(22,26,31,0.06);text-decoration:none}
  .m-back:active{background:rgba(22,26,31,0.12)}

  /* --- Konten: rapat & ramah jempol -------------------------- */
  /* z-index:1 bawaan membuat konteks tumpukan yang mengurung lembar bawah (position:fixed) di bawah lapisan gelap. */
  .app-main{z-index:auto!important;padding:12px 14px calc(var(--m-nav-h) + var(--m-safe) + 28px)!important}
  .app-footer{display:none!important}
  .m-hide{display:none!important}

  /* Hero dipadatkan: hanya lencana + judul; paragraf & tombol dipindah ke menu bawah. */
  .hero-grid{gap:0!important}
  .hero-grid h1{font-size:25px!important;line-height:1.15!important;margin-top:10px!important}
  .hero-grid p,.hero-cta{display:none!important}
  /* Halaman Semua bengkel: judul & paragraf pengantar dipadatkan serupa hero. */
  .app-main > h1{font-size:25px!important;line-height:1.15!important;margin-top:10px!important}
  .app-main > p{display:none!important}

  /* --- Pencarian: satu kolom cari + tombol Filter ------------- */
  .search-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important;margin-top:14px!important}
  /* Kolom cari + tombol filter menempel di bawah header saat halaman digulir (pita latar menutupi kartu yang lewat di belakangnya).
     Tanpa backdrop-filter/transform: itu akan mengurung lembar filter yang position:fixed di dalam form. */
  .search-form{position:sticky;top:58px;z-index:25;margin:0 -14px!important;padding:8px 14px!important;background:rgba(236,238,241,0.96)}
  body.m-lock .search-form{z-index:100}
  .search-form > input[name=q]{grid-column:1;min-width:0!important;width:100%;height:46px;padding:0 16px!important;border-radius:14px!important;border:1px solid rgba(22,26,31,0.1)!important;background:#fff!important;font-size:15px!important;box-shadow:0 2px 8px rgba(18,24,36,0.05)}
  .m-filter-btn{grid-column:2;position:relative;width:46px;height:46px;display:inline-flex!important;align-items:center;justify-content:center;border:1px solid rgba(22,26,31,0.1);border-radius:14px;background:#fff;color:#161a1f;cursor:pointer;box-shadow:0 2px 8px rgba(18,24,36,0.05);padding:0}
  .m-filter-btn:active{transform:scale(.94)}
  .m-filter-btn .badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--m-accent);color:#fff;font:700 11px/18px 'IBM Plex Sans',sans-serif;text-align:center}
  .m-filter-btn .badge:empty{display:none}

  /* Panel filter = lembar bawah. */
  .sf-fields{display:flex!important;flex-direction:column;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:88dvh;overflow-y:auto;background:#fff;border-radius:22px 22px 0 0;padding:8px 16px calc(18px + var(--m-safe));box-shadow:0 -12px 40px rgba(18,24,36,0.22);transform:translateY(105%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s linear .28s}
  .sf-fields.open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s}
  /* Spesifisitas dinaikkan: site.css (≤600px) memberi flex-basis pada .search-form select/.ta-wrap yang di kolom ini berarti TINGGI. */
  .search-form .sf-fields > *{flex:none!important;width:100%!important;min-width:0!important;margin:0!important}
  .sf-fields input,.sf-fields select{height:48px;padding:0 14px!important;border-radius:12px!important;border:1px solid rgba(22,26,31,0.14)!important;background-color:#fff!important;font-size:15px!important}
  .sf-fields .ta-wrap input{width:100%}
  .sf-fields button[type=submit]{height:50px;border-radius:14px!important;background:var(--m-accent)!important;font-size:15px!important;font-weight:700!important;box-shadow:0 8px 20px oklch(0.55 0.12 250 / 0.3)}
  .sf-fields .btn-outline{justify-content:center;height:46px;padding:0 16px!important;border-radius:12px!important}
  .sf-head{display:flex!important;align-items:center;justify-content:space-between;padding:6px 0 2px}
  .sf-head::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(22,26,31,0.16)}
  .sf-head b{font:700 17px Archivo,sans-serif;letter-spacing:-0.01em;padding-top:10px}
  .sf-head button{width:36px;height:36px;margin-top:8px;border:none;border-radius:50%;background:rgba(22,26,31,0.07);font-size:20px;line-height:1;cursor:pointer}
  .m-backdrop{display:block!important;position:fixed;inset:0;z-index:85;background:rgba(10,18,30,0.45);opacity:0;pointer-events:none;transition:opacity .25s ease}
  .m-backdrop.open{opacity:1;pointer-events:auto}
  body.m-lock{overflow:hidden}

  /* --- Chip cepat (Terdekat / Motor / Mobil), bisa digeser ---- */
  .m-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;margin:10px -14px 0!important;padding:2px 14px 4px;scrollbar-width:none}
  .m-chips::-webkit-scrollbar{display:none}
  .m-chips > span{display:none!important}
  .m-chips button,.m-chip{flex:none;display:inline-flex!important;align-items:center;height:36px;padding:0 15px!important;border-radius:999px!important;border:1px solid rgba(22,26,31,0.12)!important;background:#fff!important;color:#161a1f!important;font-size:13px!important;font-weight:600!important;text-decoration:none;white-space:nowrap;box-shadow:0 1px 4px rgba(18,24,36,0.05)}
  .m-chips button[aria-pressed=true],.m-chip.on{background:var(--m-accent)!important;border-color:transparent!important;color:#fff!important}
  .m-chips button:active,.m-chip:active{transform:scale(.95)}

  /* --- Segmen Daftar | Peta ---------------------------------- */
  .m-view{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 10px}
  .m-view .cnt{font-size:12.5px;color:rgba(22,26,31,0.55)}
  .m-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(22,26,31,0.07)}
  .m-seg button{border:none;background:transparent;height:32px;padding:0 16px;border-radius:9px;font-size:13px;font-weight:600;color:rgba(22,26,31,0.6);cursor:pointer}
  .m-seg button.on{background:#fff;color:#161a1f;box-shadow:0 1px 4px rgba(18,24,36,0.12)}

  /* --- Daftar & peta ----------------------------------------- */
  .app-grid{border-radius:18px!important;margin-top:0!important;background:transparent!important;border:none!important;box-shadow:none!important;overflow:visible!important}
  .app-grid.view-list #map{display:none}
  .app-grid.view-map .result-list{display:none!important}
  .app-grid #map{height:calc(100dvh - 270px)!important;min-height:300px!important;border-radius:18px;box-shadow:0 4px 16px rgba(18,24,36,0.1)}
  /* Tampilan Peta: hero, banner, dan chip disembunyikan supaya peta mengisi sisa layar di atas bilah navigasi. */
  body.m-mapview .hero-grid,body.m-mapview .m-appbar,body.m-mapview .m-chips{display:none!important}
  body.m-mapview .app-main{padding-top:4px!important}
  .app-grid .result-list{padding:0!important;gap:12px!important}

  .result-card,.shop-card{padding:14px!important;border-radius:18px!important;background:#fff!important;border:1px solid rgba(22,26,31,0.06)!important;box-shadow:0 2px 10px rgba(18,24,36,0.05)!important}
  .result-card:active,.shop-card:active{transform:scale(.99)}
  /* Avatar: inisial berwarna, atau logo toko bila ada (menutup inisial). Nama & jenis digeser ke kanan. */
  .result-card,.shop-card{position:relative}
  .rc-av{display:flex!important;position:absolute;left:14px;top:14px;width:44px;height:44px;border-radius:13px;overflow:hidden;align-items:center;justify-content:center;font-family:Archivo,sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em;color:#fff;background:linear-gradient(140deg,hsl(var(--h) 62% 48%),hsl(calc(var(--h) + 18) 58% 38%))}
  .rc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
  .rc-head,.rc-kind{margin-left:56px!important}
  .rc-head{min-height:22px}
  /* Kartu tanpa baris jenis (rc-kind): alamat langsung di bawah nama harus turun melewati avatar 44px. */
  .rc-head + .rc-addr{margin-top:24px!important}
  .result-card h3,.shop-card h3{font-size:16px!important}
  /* Aksi kartu: satu baris kecil yang bisa digeser ke samping (WA, Rute, Lokasi, Bagikan) + tombol utama di baris sendiri. */
  .rc-actions{display:block!important;border-top:none!important;padding-top:2px!important;margin-top:10px!important}
  .rc-actions > div:not(.rc-row){display:none!important}
  /* Jendela peta bengkel: tombol sama seperti kartu (satu baris geser-x + tombol utama di bawah) */
  #modal-map{height:260px!important}
  #modal-name{font-size:17px!important}
  .ma{display:block!important;padding:12px 16px 16px!important}
  .ma > div:not(.ma-row){display:none!important}
  .ma-row{display:flex;gap:7px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ma-row::-webkit-scrollbar{display:none}
  .ma a{display:inline-flex!important;align-items:center;justify-content:center;flex:none;height:36px;padding:0 13px!important;border-radius:11px!important;font-size:12.5px!important;white-space:nowrap}
  .ma .ma-w,.rc-actions .ma-w{display:none}
  .ma .ma-ic{width:36px;padding:0!important}
  .ma a svg{flex:none}
  .ma .rc-cta{display:flex!important;width:100%;height:40px;margin-top:8px;border-radius:11px!important;font-size:13px!important}
  .rc-row{display:flex;gap:7px;overflow-x:auto;margin:0 -14px;padding:2px 14px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rc-row::-webkit-scrollbar{display:none}
  .rc-actions a{display:inline-flex!important;align-items:center;justify-content:center;flex:none;height:36px;padding:0 13px!important;border-radius:11px!important;font-size:12.5px!important;white-space:nowrap}
  .rc-actions a svg{width:15px;height:15px}
  .rc-actions .rc-ico{width:36px;padding:0!important}
  .rc-actions .rc-ico .rc-lbl{display:none}
  .rc-actions .rc-ico svg{margin:0}
  .rc-actions .rc-cta{display:flex!important;width:100%;height:38px;margin-top:8px;border-radius:11px!important;font-size:13px!important}
  /* Pager ala aplikasi: tombol lebar, tidak melayang. */
  .pager-bar{position:static!important;margin:8px 0 0!important;padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important;display:grid!important;grid-template-columns:1fr auto 1fr;gap:8px!important;align-items:center}
  .pager-bar .pg-btn{justify-content:center;display:flex;min-height:44px;align-items:center;border-radius:12px!important;background:#fff!important}

  /* Promo pemilik bengkel: kartu ringkas, tanpa daftar keuntungan. */
  .promo{margin-top:26px!important;padding:22px!important;border-radius:22px!important}
  .promo-perks-head,.promo-perks{display:none!important}
  .promo h2{font-size:24px!important}
  .promo-top p{font-size:13.5px!important}

  /* --- Navigasi bawah ---------------------------------------- */
  .m-nav{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--m-nav-h) + var(--m-safe));padding:0 6px var(--m-safe);background:rgba(255,255,255,0.94);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid rgba(22,26,31,0.08)}
  .m-nav a,.m-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:rgba(22,26,31,0.5);font:600 11px 'IBM Plex Sans',sans-serif;text-decoration:none;cursor:pointer;padding:0;position:relative;transition:color .15s ease}
  .m-nav svg{transition:transform .18s ease}
  .m-nav a:active svg,.m-nav button:active svg{transform:scale(.86)}
  .m-nav .on{color:var(--m-accent)}
  .m-nav .on::before{content:"";position:absolute;top:0;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 3px 3px;background:var(--m-accent)}
  body.m-detail .m-nav{display:none!important}

  /* --- Menu "Lainnya" (lembar bawah) -------------------------- */
  .m-sheet{display:block!important;position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;border-radius:22px 22px 0 0;padding:10px 14px calc(18px + var(--m-safe));box-shadow:0 -12px 40px rgba(18,24,36,0.22);transform:translateY(105%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s linear .28s}
  .m-sheet.open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s}
  .m-sheet .grip{width:38px;height:4px;border-radius:2px;background:rgba(22,26,31,0.16);margin:0 auto 12px}
  .m-sheet a{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 6px;border-radius:12px;color:#161a1f;text-decoration:none;font-size:15px;font-weight:600}
  .m-sheet a:active{background:rgba(22,26,31,0.06)}
  .m-sheet a small{display:block;font-size:12px;font-weight:400;color:rgba(22,26,31,0.55)}
  .m-sheet .ic{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:oklch(0.55 0.12 250 / 0.1);color:var(--m-accent)}

  /* --- Banner pasang aplikasi -------------------------------- */
  .m-appbar{display:flex!important;align-items:center;gap:10px;margin:0 0 12px;padding:10px 10px 10px 12px;border-radius:16px;background:linear-gradient(135deg,oklch(0.55 0.12 250),oklch(0.42 0.1 250));color:#fff;box-shadow:0 8px 20px oklch(0.45 0.11 250 / 0.28)}
  .m-appbar[hidden]{display:none!important}
  .m-appbar img{flex:none;width:34px;height:34px;padding:5px;border-radius:10px;background:rgba(255,255,255,0.18)}
  .m-appbar div{flex:1;min-width:0;font-size:12.5px;line-height:1.3}
  .m-appbar b{display:block;font:700 13.5px Archivo,sans-serif}
  .m-appbar a{flex:none;padding:8px 14px;border-radius:999px;background:#fff;color:oklch(0.42 0.12 250);font-size:13px;font-weight:700;text-decoration:none}
  .m-appbar button{flex:none;width:30px;height:30px;border:none;border-radius:50%;background:rgba(255,255,255,0.16);color:#fff;font-size:17px;line-height:1;cursor:pointer}

  /* --- Detail bengkel ---------------------------------------- */
  .detail-grid{margin-top:0!important;gap:12px!important}
  .detail-grid .hrs{padding:16px 0 0!important;margin-top:14px}
  .detail-grid > section{padding:18px!important;border-radius:18px!important;background:#fff!important;box-shadow:0 2px 10px rgba(18,24,36,0.05)!important;border:1px solid rgba(22,26,31,0.06)!important}
  .detail-back{display:none!important}
  .detail-actions{position:fixed!important;left:0;right:0;bottom:0;z-index:70;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;margin:0!important;padding:10px 12px calc(10px + var(--m-safe))!important;background:rgba(255,255,255,0.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(22,26,31,0.08)!important;box-shadow:0 -6px 20px rgba(18,24,36,0.08)}
  .detail-actions a{display:flex!important;align-items:center;flex:none;justify-content:center;min-height:46px;padding:0 14px!important;border-radius:14px!important}
  .detail-actions a.btn-whatsapp{flex:1 1 0;min-width:0;font-size:14px!important;white-space:nowrap}
  .detail-actions .rc-lbl{display:none}
  .detail-actions a.rc-rute{flex:none}
  .detail-actions a.rc-ico{flex:none;width:46px;padding:0!important}
  body.m-detail .app-main{padding-bottom:calc(86px + var(--m-safe))!important}
}