/* ZHAZ Interior - assets/visitor.css : statistik pengunjung realtime di header (PC & mobile) */
.vs-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#25d366;flex:none;position:relative}
.vs-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;animation:vsPulse 1.8s ease-out infinite}
@keyframes vsPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
[data-vs]{font-variant-numeric:tabular-nums}
.vs-bump{animation:vsBump .5s ease}
@keyframes vsBump{0%{transform:scale(1)}40%{transform:scale(1.3);color:var(--gold-text,#9a7424)}100%{transform:scale(1)}}

/* ===== Chip di header (paling kiri area kanan header) ===== */
.nav-right>.vs-nav{position:relative;padding:0 18px;opacity:0;transition:opacity .4s}
.nav-right>.vs-nav.vs-ready{opacity:1}
#vs-pill{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border:1px solid var(--line,#e7dcc8);border-radius:999px;background:var(--soft,#f7f2e9);color:var(--ink,#1b1b1b);font:600 .78rem/1 'Montserrat',sans-serif;cursor:pointer;transition:.2s;white-space:nowrap}
#vs-pill:hover,#vs-pill[aria-expanded="true"]{border-color:var(--gold,#c9a24b);background:#fff}
#vs-pill:focus-visible{outline:3px solid var(--gold,#c9a24b);outline-offset:2px}
#vs-pill b{font-weight:800;font-size:.9rem;color:var(--accent,#2f5d46)}
#vs-pill .vs-lbl{color:var(--muted,#6a655c);font-weight:500}

/* ===== Panel rincian + riwayat ===== */
#vs-panel{position:absolute;right:0;top:calc(100% + 16px);width:310px;max-width:calc(100vw - 24px);padding:16px;border-radius:16px;background:#fff;color:var(--ink,#1b1b1b);border-top:3px solid var(--gold,#c9a24b);box-shadow:0 20px 60px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:70;text-align:left}
#vs-panel.open{opacity:1;visibility:visible;transform:none}
#vs-panel h4{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:700 .72rem/1.2 'Montserrat',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text,#9a7424)}
.vs-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.vs-grid div{padding:9px 10px;border-radius:12px;background:var(--soft,#f7f2e9);line-height:1.2}
.vs-grid div.big{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--accent,#2f5d46);color:#fff}
.vs-grid div.big b{font-size:1.5rem}
.vs-grid b{display:block;font-size:1.1rem;font-weight:800}
.vs-grid span{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.vs-hist-t{margin:14px 0 6px;font:700 .66rem/1 'Montserrat',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6a655c)}
#vs-chart{display:flex;align-items:flex-end;gap:4px;height:64px}
.vs-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0}
.vs-col i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:var(--wood-light,#c9a27a);transition:height .4s}
.vs-col.now i{background:var(--accent,#2f5d46)}
.vs-col em{font:500 .58rem/1 'Montserrat',sans-serif;font-style:normal;color:var(--muted,#6a655c)}
.vs-foot{margin-top:10px;font-size:.66rem;color:var(--muted,#6a655c);line-height:1.4}

/* PC sempit (menu penuh masih tampil): chip ringkas */
@media(min-width:1241px) and (max-width:1400px){
  #vs-pill .vs-lbl{display:none}
  .nav-right>.vs-nav{padding:0 12px}
}

/* ===== Mobile: panel menempel di bawah header, lebar layar ===== */
@media(max-width:600px){
  .nav-right>.vs-nav{padding:0 4px}
  #vs-pill{height:32px;padding:0 10px 0 9px;gap:6px}
  #vs-pill .vs-lbl{display:none}
  .nav-right>.vs-nav{position:static}
  #vs-panel{position:fixed;left:12px;right:12px;top:calc(var(--hh,74px) + 8px);width:auto;max-width:380px;margin:0 auto}
  .vs-grid{gap:6px}
  .vs-grid b{font-size:1rem}
}
@media(max-width:360px){
  #vs-pill{padding:0 8px 0 7px}
  #vs-pill b{font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){.vs-dot::after,.vs-bump{animation:none}.vs-nav,#vs-panel,#vs-pill,.vs-col i{transition:none}}

/* ===== Cegah menu header turun baris (mis. "MEDIA SOSIAL") setelah chip pengunjung ditambahkan ===== */
.menu a,.sub-toggle{white-space:nowrap}
@media(min-width:1241px) and (max-width:1360px){
  .menu{gap:12px}
  .menu a,.sub-toggle{font-size:.72rem;letter-spacing:.04em}
  .nav-right>.vs-nav{padding:0 8px}
  .nav-right>.nav-soc{padding:0 8px 0 12px}
}

/* Beri jarak logo dengan menu & rapatkan sedikit jarak antar menu (PC) */
@media(min-width:1241px){
  .logo{margin-right:24px}
  .menu{gap:clamp(12px,1.3vw,22px)}
}
@media(min-width:1241px) and (max-width:1360px){.menu{gap:12px}}

/* ===== Background header bernuansa interior (foto /image/header-bg.jpg + lapisan krem agar menu tetap terbaca) ===== */
header{
  background-color:#fff;
  background-image:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(252,248,240,.74) 35%,rgba(246,238,224,.58) 70%,rgba(240,228,208,.50) 100%),url('/image/header-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media(max-width:600px){
  header{background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(250,244,234,.72) 50%,rgba(244,234,216,.62) 100%),url('/image/header-bg.jpg')}
}

/* ===== Footer di tablet & HP =====
   Atas   : ZHAZ Interior (profil + media sosial), selebar layar
   Tablet (481-1000px) : Layanan Unggulan | Menu | Hubungi Kami = 3 kolom
   HP (maks. 480px)    : Layanan Unggulan | Menu = 2 kolom, lalu Hubungi Kami selebar layar
                         (alamat 3 baris ramping seperti di PC) */
@media(max-width:1000px){
  .foot-grid{grid-template-columns:1.15fr .8fr 1.25fr;gap:30px 22px}
  .foot-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:600px){
  .foot-grid{gap:26px 12px}
  footer.site-footer{padding:44px 0 24px}
  .site-footer h3{font-size:.66rem;letter-spacing:.06em;line-height:1.35;margin-bottom:12px}
  .site-footer li{margin-bottom:8px;line-height:1.4}
  .site-footer nav a,.foot-grid>div:last-child{font-size:.74rem}
  .foot-grid>div:last-child p,.foot-grid>div:last-child address{line-height:1.55;margin-bottom:10px;overflow-wrap:anywhere}
  .foot-logo{font-size:1.3rem}
  .foot-bottom{margin-top:30px;line-height:1.8;font-size:.78rem}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px 18px}
  .foot-grid>div:last-child{grid-column:1/-1;font-size:.88rem}
  .site-footer h3{font-size:.8rem;letter-spacing:.1em}
  .site-footer nav a{font-size:.86rem}
  .foot-grid>div:last-child p,.foot-grid>div:last-child address{line-height:1.7;margin-bottom:12px}
}

/* ===== Media sosial di footer (PC, tablet & HP): 4 ikon sejajar satu baris, ikon di atas, nama di bawah ===== */
.foot-social{flex-wrap:nowrap;justify-content:flex-start;gap:0 14px}
.foot-social a{flex-direction:column;justify-content:flex-start;gap:6px;min-width:0;font-size:.74rem;text-align:center}
.foot-social a .soc-ic{width:24px;height:24px}
@media(min-width:1001px) and (max-width:1100px){.foot-social{gap:0 8px}}
@media(max-width:600px){.foot-social{gap:0 16px}.foot-social a{font-size:.72rem}}

/* ===== Ikon di blok "Hubungi Kami" (telepon, email, lokasi) ===== */
.site-footer .fc{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.site-footer .fc>span{min-width:0;overflow-wrap:anywhere}
.fc-ic{flex:none;box-sizing:content-box;width:17px;height:17px;padding:8px;border-radius:50%;background:rgba(201,162,75,.14);border:1px solid rgba(201,162,75,.35);fill:none;stroke:var(--gold,#c9a24b);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.site-footer .fc:hover .fc-ic{background:rgba(201,162,75,.26);border-color:var(--gold,#c9a24b)}
@media(max-width:600px){.fc-ic{width:14px;height:14px;padding:6px}.site-footer .fc{gap:9px}}
@media(max-width:480px){.fc-ic{width:17px;height:17px;padding:8px}.site-footer .fc{gap:12px}}