/* ============================================================
   GearPOS — Bengkel Website (company profile, artikel, cabang,
   halaman status). Dipakai bersama oleh SEMUA view — dulu tiap
   view punya <style> sendiri isinya banyak duplikat persis sama,
   sekarang satu file supaya browser cache sekali dipakai di semua
   halaman, dan perubahan visual (warna/spacing/animasi) cukup di
   satu tempat.
   ============================================================ */

/* --- Reset & base ------------------------------------------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;background:#eceef1;color:#161a1f;font-family:"IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:oklch(0.52 0.11 250);text-decoration:none}
a:hover{color:oklch(0.42 0.12 250)}
select,input,button,textarea{font-family:inherit;font-size:inherit;color:inherit}
/* Panah dropdown bawaan browser mepet tepi kanan — diganti panah sendiri dengan jarak 14px. !important karena select di view memakai shorthand `background`/`padding` inline yang akan menimpa. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23161a1f' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 8px!important;cursor:pointer}

@keyframes gsmFloat{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-26px,0) scale(1.06)}100%{transform:translate3d(0,0,0) scale(1)}}

/* --- Nav ------------------------------------------------------ */
.nav-link{transition:background .2s ease,color .2s ease}
.nav-link:hover{background:rgba(255,255,255,0.8);color:#161a1f}
.nav-link.active{background:rgba(255,255,255,0.85);color:#161a1f;font-weight:600}
.nav-toggle{display:none;flex:none;width:38px;height:38px;align-items:center;justify-content:center;border-radius:9px;border:none;background:transparent;color:#161a1f;cursor:pointer;padding:0}
.nav-toggle:hover{background:rgba(255,255,255,0.8)}

/* --- Buttons ---------------------------------------------------- */
.btn-dark,.btn-glass,.btn-outline,.btn-white{transition:transform .2s cubic-bezier(.2,.8,.3,1),background .2s ease,box-shadow .2s ease}
.btn-dark:hover{background:oklch(0.45 0.12 250);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,24,36,0.22)}
.btn-glass:hover{background:rgba(255,255,255,0.9);color:#161a1f;transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,24,36,0.12)}
.btn-outline:hover{background:#fff;color:#161a1f;transform:translateY(-2px);box-shadow:0 8px 18px rgba(18,24,36,0.1)}
.btn-white:hover{background:oklch(0.9 0.04 250);color:#161a1f;transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,24,36,0.16)}
.btn-dark:active,.btn-glass:active,.btn-outline:active,.btn-white:active{transform:translateY(0) scale(0.96)}

/* --- Kartu hover-lift (service/article/branch card) ------------- */
.service-card:hover,.article-card:hover{transform:translateY(-4px);background:rgba(255,255,255,0.72)}
.branch-card:hover{transform:translateY(-3px);background:rgba(255,255,255,0.72)}
.addon-label:hover{background:rgba(255,255,255,0.86)}

/* --- FAQ accordion ------------------------------------------- */
.faq-btn{transition:background .2s ease,transform .12s ease}
.faq-btn:active{transform:scale(0.99)}
.faq-btn:hover{background:rgba(255,255,255,0.5)}
.faq-item[data-open="0"] .faq-answer{display:none}
.faq-item[data-open="1"] .faq-answer{display:block}

/* --- Form input focus ------------------------------------------ */
.field-input:focus,.search-input:focus{border-color:oklch(0.55 0.12 250);box-shadow:0 0 0 3px oklch(0.55 0.12 250 / 0.14)}
.field-input.err{border-color:#dc4444}

/* --- Scroll-reveal ([data-reveal], lihat company-profile.js) --- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].is-visible{opacity:1;transform:none}

/* --- Pagination (daftar artikel/cabang) ------------------------ */
.pg-btn[aria-disabled="true"]{opacity:0.4;pointer-events:none}

/* --- Utility responsif ------------------------------------------ */
.hide-mobile{display:initial}
.wa-short{display:none}

/* --- Isi artikel ------------------------------------------------ */
article :where(p,ul,ol){margin:0 0 16px;font-size:15.5px;line-height:1.75;color:rgba(22,26,31,0.78)}
article :where(p,ul,ol):last-child{margin-bottom:0}
article h2,article h3{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-0.02em;margin:28px 0 12px}
article img{max-width:100%;border-radius:12px}

/* ============================================================
   Halaman status mandiri (404 / situs belum aktif) — blob
   ambient + kartu tengah. Warna aksen beda per halaman lewat
   modifier class di <body> (status-page--error / --inactive),
   struktur/layout-nya sama.
   ============================================================ */
.status-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:clip}
/* Blob ambient default (biru + oranye) — dipakai apa adanya di halaman
   konten (artikel/cabang/dll). Halaman status (404/nonaktif) override
   warnanya lewat modifier .status-page--*, lihat di bawah. */
.blob{position:fixed;border-radius:50%;filter:blur(21px);pointer-events:none;z-index:0}
.blob.b1{top:-180px;left:-120px;width:520px;height:520px;background:radial-gradient(circle at 35% 35%, oklch(0.78 0.11 250 / .75), transparent 68%);animation:gsmFloat 18s ease-in-out infinite}
.blob.b2{bottom:-160px;right:-140px;width:480px;height:480px;background:radial-gradient(circle at 50% 50%, oklch(0.82 0.1 60 / .7), transparent 68%);animation:gsmFloat 24s ease-in-out infinite}
.status-page--inactive .b1{background:radial-gradient(circle at 35% 35%, oklch(0.75 0.03 60 / .6), transparent 68%)}
.status-page--inactive .b2{background:radial-gradient(circle at 50% 50%, oklch(0.78 0.02 60 / .55), transparent 68%)}
.status-card{position:relative;z-index:1;max-width:480px;width:100%;padding:44px 38px;text-align:center;background:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.94);border-radius:24px;box-shadow:0 18px 48px rgba(18,24,36,0.1), inset 0 1px 0 rgba(255,255,255,0.65)}
.status-icon{width:62px;height:62px;margin:0 auto 22px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Archivo,sans-serif;font-weight:700;font-size:26px}
.status-page--error .status-icon{background:linear-gradient(140deg,oklch(0.7 0.11 250),oklch(0.56 0.12 250))}
.status-page--inactive .status-icon{background:linear-gradient(140deg,oklch(0.65 0.03 60),oklch(0.5 0.02 60))}
.status-code{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;color:rgba(22,26,31,0.5)}
.status-card h1{margin:10px 0 0;font-family:Archivo,sans-serif;font-weight:700;font-size:26px;letter-spacing:-0.02em}
.status-card p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:rgba(22,26,31,0.66)}
.status-card .btn-dark{display:inline-block;margin-top:26px;padding:13px 24px;border-radius:12px;background:#161a1f;color:#fff;font-size:14.5px;font-weight:600}

/* --- Responsif --------------------------------------------------- */
@media (max-width:900px){
  .hero-h1{font-size:32px!important;line-height:1.12!important}
  .grid-2col{grid-template-columns:1fr!important}
  .sticky-card{position:static!important}
  .nav-toggle{display:flex}
  .nav-links-row{display:none!important;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column!important;align-items:stretch!important;gap:6px!important;background:rgba(255,255,255,0.96);border:1px solid rgba(255,255,255,0.8);border-radius:16px;padding:10px;box-shadow:0 16px 36px rgba(18,24,36,0.14), inset 0 1px 0 rgba(255,255,255,0.65)}
  .nav-links-row.open{display:flex!important}
  .nav-links-row .nav-link{text-align:center}
  .nav-links-row .btn-dark{margin-left:0!important;text-align:center}
  .footer-copy{width:100%;margin-top:4px;justify-items:start!important}
}
@media (max-width:640px){
  .hide-mobile{display:none!important}
  .wa-full{display:none}
  .wa-short{display:inline}
}

/* --- Typeahead kolom Kota (assets/js/city-typeahead.js) -------- */
.ta-wrap{position:relative}
.ta-list{position:absolute;left:0;right:0;min-width:min(260px,calc(100vw - 40px));top:calc(100% + 6px);z-index:60;margin:0;padding:6px;list-style:none;max-height:300px;overflow-y:auto;background:#fff;border:1px solid rgba(22,26,31,0.12);border-radius:12px;box-shadow:0 14px 34px rgba(18,24,36,0.16)}
.ta-list[hidden]{display:none}
.ta-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:8px;font-size:14px;cursor:pointer}
.ta-item:hover,.ta-item.is-active{background:oklch(0.55 0.12 250 / 0.1)}
.ta-count{flex:none;white-space:nowrap;font-size:11.5px;color:rgba(22,26,31,0.5);font-family:'IBM Plex Mono',monospace}

/* Leaflet memakai z-index 400–1000 utk panel & kontrolnya; tanpa isolasi angka itu
   ikut bersaing dgn elemen halaman (mis. daftar saran kota) dan menutupinya. */
.leaflet-container{isolation:isolate}

/* --- Ikon media sosial di footer (company_profile) ---------- */
.social-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.social-links a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(22,26,31,0.6);background:rgba(255,255,255,0.7);border:1px solid rgba(22,26,31,0.12);transition:color .15s,border-color .15s,transform .15s}
.social-links a:hover{color:#161a1f;border-color:rgba(22,26,31,0.35);transform:translateY(-1px)}
@media (max-width:900px){.social-links{justify-content:flex-start}}

/* --- Rapikan tampilan HP (direktori, daftar bengkel, detail) ---------- */
@media (max-width:900px){
  /* Gaya inline pada elemen menang atas CSS biasa, jadi ukuran peta/daftar di HP WAJIB !important. */
  .app-grid #map{height:300px !important}
  /* Detail bengkel: peta tidak boleh memanjang mengikuti tinggi layar HP. */
  #map{height:300px !important;min-height:0 !important}
  .app-grid .result-list{max-height:none !important;overflow:visible !important;border-left:0 !important}
  .app-grid .pager-bar{position:static !important;margin:6px 0 0 !important;border-radius:14px !important}
}
@media (max-width:600px){
  .brand-sub{display:none}
  .hero-cta{flex-direction:column}
  .hero-cta a{justify-content:center;text-align:center;box-sizing:border-box}
  .search-form > *{flex:1 1 100% !important;min-width:0 !important}
  .search-form .ta-wrap,.search-form select{flex:1 1 calc(50% - 5px) !important}
  .search-form button[type=submit]{padding:13px 20px !important}
  .search-form .btn-outline{justify-content:center}
}