/* =====================================================================
   Kopdit Obormas — Halaman Kantor Cabang (FR-11, blueprint §22.2/§23)
   Dipakai bersama css/styles.css, css/page.css, css/berita.css.
   Tata letak: SATU KOLOM penuh (tanpa sidebar). Peta interaktif
   (Leaflet + OpenStreetMap) dengan pin tiap cabang menjadi fokus utama,
   lalu pencarian + daftar cabang dikelompokkan per wilayah.

   CATATAN DATA: alamat, telepon, dan jam operasional tiap cabang BELUM
   tersedia dari klien (blueprint §26.2) — ditandai .pending / "menyusul".
   Koordinat pin bersifat PERKIRAAN (level kota/ibukota kabupaten) sampai
   koordinat resmi masuk lewat CMS (entitas Branch.Latitude/Longitude).
   ===================================================================== */

/* ---------- Peta interaktif (Leaflet) — fokus utama halaman ---------- */
.branch-map{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--soft);margin-bottom:24px}
.map-canvas{width:100%;height:clamp(380px,52vh,560px);background:linear-gradient(135deg,#eef2f5,#e3e9ee);z-index:0}
.map-canvas:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.branch-map .map-note{display:flex;align-items:flex-start;gap:11px;padding:14px 18px;background:#fff;border-top:1px solid var(--line);font-size:13px;color:var(--slate);line-height:1.55}
.branch-map .map-note svg{flex-shrink:0;width:18px;height:18px;color:var(--gold-700);margin-top:1px}
.branch-map .map-note b{color:var(--ink);font-weight:700}

/* legenda kecil di atas peta */
.map-legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:22px;font-size:13px;color:var(--slate)}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.map-legend i{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 1px 3px rgba(20,32,43,.4)}
.map-legend i.lg-utama{background:var(--ink)}
.map-legend i.lg-cab{background:var(--gold)}

/* pin kustom (divIcon) — tanpa bergantung pada aset gambar Leaflet */
.map-pin{display:block;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--gold);border:2px solid #fff;box-shadow:0 2px 6px rgba(20,32,43,.4);transform:rotate(-45deg);transition:transform .15s var(--ease)}
.map-pin.is-utama{background:var(--ink);width:26px;height:26px}
.leaflet-marker-icon:hover .map-pin{transform:rotate(-45deg) scale(1.15)}
.leaflet-popup-content{font-family:"Inter",sans-serif;font-size:13px;line-height:1.5;color:var(--ink-2)}
.leaflet-popup-content strong{font-family:"Sora",sans-serif;color:var(--ink)}
.leaflet-popup-content em{color:var(--slate);font-size:11.5px}

/* ---------- Bar alat: pencarian ---------- */
.branch-tools{margin-bottom:6px}
.branch-search{position:relative;display:flex;align-items:center}
.branch-search svg{position:absolute;left:16px;width:19px;height:19px;color:var(--slate);pointer-events:none}
.branch-search input{width:100%;font-family:"Inter",sans-serif;font-size:15.5px;color:var(--ink);padding:14px 16px 14px 46px;border:1.5px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.branch-search input::placeholder{color:var(--slate)}
.branch-search input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-50)}

/* ---------- Ringkasan jumlah hasil ---------- */
.branch-result{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
.branch-result .count{font-size:14px;color:var(--slate)}
.branch-result .count b{color:var(--ink);font-weight:700}
.branch-result .note{font-size:13px;color:var(--slate)}

/* ---------- Kelompok wilayah ---------- */
.region-block{margin-bottom:34px;scroll-margin-top:96px}
.region-block:last-child{margin-bottom:0}
.region-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.region-head .rh-ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--gold-50);display:grid;place-items:center}
.region-head .rh-ic svg{width:20px;height:20px;color:var(--gold-700)}
.region-head h2{font-family:"Sora",sans-serif;font-size:clamp(17px,2.2vw,21px);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.region-head .rh-count{margin-left:auto;font-family:"Sora",sans-serif;font-size:12px;font-weight:700;color:var(--gold-700);background:var(--gold-50);padding:5px 12px;border-radius:999px;white-space:nowrap}

/* ---------- Grid kartu cabang (satu kolom penuh → banyak kolom) ---------- */
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.branch-grid{grid-template-columns:repeat(2,1fr)}}

.branch-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px 20px 18px;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.branch-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold)}

.bc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:13px}
.bc-eyebrow{font-family:"Sora",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700)}
.bc-name{font-family:"Sora",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.22;margin-top:3px;color:var(--ink)}
.bc-badge{flex-shrink:0;font-family:"Sora",sans-serif;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:7px}
.bc-badge.is-utama{background:var(--ink);color:#fff}
.bc-badge.is-cab{background:var(--soft);color:var(--slate);border:1px solid var(--line)}

.bc-rows{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.bc-row{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.bc-row svg{flex-shrink:0;width:16px;height:16px;color:var(--gold-700);margin-top:2px}
.bc-row.pending{color:var(--slate)}
.bc-row.pending svg{color:var(--line)}
.bc-row .pending-tag{display:inline-block;font-size:11px;font-style:italic;color:var(--slate);background:var(--soft);padding:1px 8px;border-radius:6px;border:1px dashed var(--line)}

.bc-foot{margin-top:auto;display:flex;gap:8px}
.bc-foot .btn{flex:1;justify-content:center;padding:10px 12px;font-size:13px;min-height:42px;cursor:pointer}
.bc-foot .btn svg{width:15px;height:15px}

/* ---------- Status kosong (saat pencarian tak menemukan) ---------- */
.branch-empty{display:none;text-align:center;padding:52px 20px;color:var(--slate)}
.branch-empty.show{display:block}
.branch-empty svg{width:42px;height:42px;color:var(--line);margin-bottom:14px}
.branch-empty h3{font-family:"Sora",sans-serif;font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px}
.branch-empty p{font-size:14px;max-width:380px;margin:0 auto}

/* ---------- Disclaimer data menyusul ---------- */
.branch-disclaim{display:flex;align-items:flex-start;gap:11px;margin-top:28px;padding:15px 18px;background:var(--gold-50);border:1px solid var(--gold);border-radius:var(--r);font-size:13px;line-height:1.6;color:var(--ink-2)}
.branch-disclaim svg{flex-shrink:0;width:19px;height:19px;color:var(--gold-700);margin-top:1px}
.branch-disclaim b{color:var(--ink);font-weight:700}

@media (max-width:680px){
  .branch-grid{grid-template-columns:1fr}
  .region-head .rh-count{font-size:11px}
}

/* ---------------------------------------------------------------
   Branch detail view (/kantor-cabang/<slug>)
   --------------------------------------------------------------- */
.branch-detail{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;box-shadow:var(--shadow-sm)}
.bc-info-block{display:flex;flex-direction:column;gap:18px}
.bc-info-row{display:flex;align-items:flex-start;gap:14px}
.bc-info-row > svg{flex-shrink:0;width:22px;height:22px;color:var(--gold-700);margin-top:2px}
.bc-info-row > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.bc-info-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.bc-info-value{font-size:15px;color:var(--ink);font-weight:500;word-break:break-word}
a.bc-info-value{color:var(--gold-700)}
a.bc-info-value:hover{text-decoration:underline}
.bc-back-wrap .btn svg{width:18px;height:18px}

/* Branch photo gallery (shown when a branch has uploaded photos) */
.branch-photos .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.branch-photos .gallery-item{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.branch-photos .gallery-item img{width:100%;height:180px;object-fit:cover;display:block}
.branch-photos .gallery-item.gp-clickable{cursor:pointer}
.branch-photos .gallery-item.gp-clickable img{transition:transform .4s ease}
.branch-photos .gallery-item.gp-clickable:hover img{transform:scale(1.06)}
.branch-photos figcaption{font-size:13px;color:var(--ink-2);padding:8px 12px}
@media (max-width:680px){.branch-photos .gallery-grid{grid-template-columns:1fr 1fr}}