/* ============================================================
   GearPOS — Landing page / company profile produk.
   Satu file CSS dipakai bersama semua halaman (Beranda, Produk,
   Harga, Tentang, Kontak). Gaya "glass" di sini SENGAJA tidak
   memakai backdrop-filter (berat di GPU/CPU biasa) — cukup
   background putih semi-transparan + box-shadow inset highlight,
   sama seperti pola yang dipakai di bengkel-website.
   ============================================================ */

/* --- Reset & base ------------------------------------------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;background:#eef0f3;color:#201e1d;font-family:"Instrument Sans",system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:#ae1800;text-decoration:none}
a:hover{color:#7c1405}
select,input,button,textarea{font-family:inherit;font-size:inherit;color:inherit}
.h{font-family:Archivo,system-ui,sans-serif;font-weight:800;letter-spacing:-.035em}
.mono{font-family:ui-monospace,Menlo,monospace}

@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)}}

/* --- Ambient blobs (filter:blur pada elemen dekoratif saja,
   BUKAN backdrop-filter di atas konten yang bertumpuk) --------- */
.blob{position:fixed;border-radius:50%;filter:blur(22px);pointer-events:none;z-index:0}

/* --- Nav ------------------------------------------------------ */
.nav-link{color:#201e1d;transition:background .2s ease,color .2s ease}
.nav-link:hover{background:rgba(32,30,29,.06);color:#201e1d}
.nav-link.active{background:rgba(236,48,19,.1);color:#ae1800;font-weight:700}
.nav-toggle{display:none;flex:none;width:38px;height:38px;align-items:center;justify-content:center;border-radius:9px;border:none;background:transparent;color:#201e1d;cursor:pointer;padding:0}
.nav-toggle:hover{background:rgba(32,30,29,.06)}

/* --- Buttons ---------------------------------------------------- */
.btn-pri,.btn-glass,.btn-outline,.btn-dark{transition:transform .18s cubic-bezier(.2,.8,.3,1),background .14s ease,box-shadow .14s ease}
.btn-pri:hover{background:#dd2b0f;box-shadow:0 14px 30px rgba(236,48,19,.36);transform:translateY(-2px)}
.btn-glass:hover{background:rgba(32,30,29,.06);transform:translateY(-2px)}
.btn-outline:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(32,30,29,.1)}
.btn-dark:hover{background:#3a3634;transform:translateY(-2px);box-shadow:0 10px 24px rgba(32,30,29,.28)}
.btn-pri:active,.btn-glass:active,.btn-outline:active,.btn-dark:active{transform:translateY(0) scale(.97)}

/* --- Kartu hover-lift -------------------------------------------- */
.card-lift{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.card-lift:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(32,30,29,.14);background:rgba(255,255,255,.94)}

/* --- Placeholder pattern (screenshot/foto belum ada) ------------- */
.ph{background-image:repeating-linear-gradient(135deg,rgba(32,30,29,.06) 0 8px,rgba(32,30,29,0) 8px 16px)}

/* --- Form field ---------------------------------------------------- */
.fld{width:100%;border:1px solid rgba(32,30,29,.16);border-radius:14px;padding:13px 14px;font-family:"Instrument Sans",system-ui,sans-serif;font-size:14.5px;background:rgba(255,255,255,.85);outline:none;color:#201e1d;box-sizing:border-box;transition:border-color .14s ease,box-shadow .14s ease}
.fld:focus{border-color:#ec3013;box-shadow:0 0 0 3px rgba(236,48,19,.14)}
.fld.err{border-color:#dc4444}
input::placeholder,textarea::placeholder{color:rgba(32,30,29,.4)}

/* --- Tour tabs (halaman Produk) ----------------------------------- */
.tour-tab{transition:background .16s ease,border-color .16s ease}
.tour-tab.is-active{background:rgba(236,48,19,.08) !important;border-color:#ec3013 !important}
.tour-tab.is-active .tour-tab-label{color:#ae1800 !important}
.tour-panel{display:none}
.tour-panel.active{display:flex}

/* --- Pricing cycle toggle (halaman Harga) -------------------------- */
.cycle-btn{transition:background .16s ease,color .16s ease}
[data-price-yr]{display:none}
.cycle-yr [data-price-bln]{display:none}
.cycle-yr [data-price-yr]{display:block}

/* --- Jenis bengkel pill select (form kontak) ------------------------ */
.opt-pill{transition:background .14s ease,border-color .14s ease,color .14s ease}
.opt-pill.sel{background:rgba(236,48,19,.09) !important;border-color:#ec3013 !important;color:#ae1800 !important}

/* --- FAQ accordion -------------------------------------------------- */
.faq-btn{transition:background .16s ease}
.faq-btn:hover{background:rgba(32,30,29,.04)}
.faq-item[data-open="0"] .faq-answer{display:none}
.faq-item[data-open="1"] .faq-answer{display:block}

/* --- Scroll-reveal ([data-reveal]) ---------------------------------- */
[data-reveal]{opacity:0;transform:translateY(24px);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}

/* --- Footer link hover ------------------------------------------------ */
.footer-lnk{transition:color .14s ease,opacity .14s ease}
.footer-lnk:hover{color:#fff;opacity:1}

/* --- Layout util --------------------------------------------------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
/* Jangkar section Beranda: sisakan ruang untuk header sticky saat lompat ke #id */
.anchor{scroll-margin-top:90px}

/* --- Responsif --------------------------------------------------- */
@media (max-width:980px){
  .hero-h1{font-size:38px!important;line-height:1.1!important}
  .grid-2,.hero-grid{grid-template-columns:1fr!important}
  .grid-3{grid-template-columns:repeat(2,1fr)!important}
  .grid-4,.grid-5{grid-template-columns:repeat(2,1fr)!important}
  .grid-6{grid-template-columns:repeat(3,1fr)!important}
  .sticky-side{position:static!important}
  .nav-toggle{display:flex}
  .nav-links-row{display:none!important;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column!important;align-items:stretch!important;gap:4px!important;background:#fff;border:1px solid rgba(32,30,29,.08);border-radius:18px;padding:10px;box-shadow:0 18px 40px rgba(32,30,29,.18)}
  .nav-links-row.open{display:flex!important}
  .nav-links-row .nav-link{text-align:left;padding:14px 16px!important;font-size:15px!important;border-radius:12px!important}
  .nav-links-row .btn-glass,.nav-links-row .btn-pri{display:block;margin:0!important;text-align:center;width:100%;padding:14px 16px!important;font-size:14.5px!important;border-radius:14px!important}
  .nav-links-row .btn-glass{margin-top:8px!important;background:#fff!important}
  .hide-mobile{display:none!important}
  .footer-brand{width:100%!important}
  .footer-cols{flex:1 1 100%!important;grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:640px){
  .grid-3,.grid-4,.grid-5{grid-template-columns:1fr!important}
  .cta-btns{width:100%}
  .cta-btns a{flex:1 1 100%;text-align:center}
  .grid-6{grid-template-columns:repeat(2,1fr)!important}
  .footer-cols{gap:28px 20px!important}
  .footer-lnk{overflow-wrap:anywhere}
  .wa-full{display:none}
  .wa-short{display:inline}
}

/* Fade-in gambar lazy — kelas .img-fading dipasang JS HANYA pada gambar yang belum selesai dimuat, dilepas saat load/error (tanpa JS gambar tampil normal). */
img.img-fading{opacity:0}
img[loading="lazy"]{transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){img[loading="lazy"]{transition:none}}
@media (max-width:360px){.footer-cols{grid-template-columns:1fr!important}}
h2.h,h3.h{margin-top:0;margin-bottom:0}

/* --- Halaman dokumen (Kebijakan Privasi) --------------------------- */
.doc-card{border-radius:24px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.86);box-shadow:0 20px 44px rgba(32,30,29,.08), inset 0 1px 0 rgba(255,255,255,.65);padding:40px}
.doc h2{font-family:Archivo,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:21px;line-height:1.2;margin:38px 0 10px;scroll-margin-top:90px}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:15.5px;margin:20px 0 6px}
.doc p{margin:10px 0;font-size:15px;line-height:1.75;color:rgba(32,30,29,.72)}
.doc ul{margin:10px 0;padding-left:22px}
.doc li{font-size:15px;line-height:1.7;color:rgba(32,30,29,.72);margin:5px 0}
.doc strong{color:#201e1d}
.doc-toc{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:4px 24px;margin:0;padding:0;list-style:none}
.doc-toc a{display:block;padding:6px 0;font-size:14px;color:#201e1d}
.doc-toc a:hover{color:#ae1800}
@media (max-width:640px){.doc-card{padding:24px 20px}.doc-toc{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}