/* =========================================================================
   QS Services — Design Tokens (Handoff v1.0 §9 / Design System Phase 7)
   Single source of truth for CSS. Mirrors theme.json presets.
   ========================================================================= */
:root {
	/* Color — functional */
	--qs-ink: #0A2540;
	--qs-navy-900: #071A2F;
	--qs-accent: #2563EB;
	--qs-accent-hover: #1D4ED8;
	--qs-accent-soft: #EFF6FF;
	--qs-highlight: #84CC16;
	--qs-highlight-soft: #ECFCCB;
	--qs-bg: #FFFFFF;
	--qs-bg-subtle: #F8FAFC;
	--qs-bg-muted: #F1F5F9;
	--qs-border: #E2E8F0;
	--qs-border-strong: #CBD5E1;
	--qs-text: #0A2540;
	--qs-text-secondary: #475569;
	--qs-text-muted: #64748B;
	--qs-success: #16A34A;
	--qs-warning: #D97706;
	--qs-error: #DC2626;
	--qs-on-dark: #FFFFFF;

	/* ---- FONT FAMILIES (overridable from QS Settings → Typography) ---- */
	--qs-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--qs-font-heading: "Geist", var(--qs-font-sans);

	/* ---- GLOBAL TYPOGRAPHY SYSTEM (Apple/Vercel/Stripe/Linear rhythm) ----
	   Single source of truth. Fluid clamp() = mobile MIN → desktop MAX, tablet auto-scales.
	   Heading sizes multiply by --qs-h-scale (QS Settings → Heading Scale).
	   Desktop: Display 64 · H1 56 · H2 42 · H3 30 · H4 24 · Body-lg 20 · Body 18 · Small 16 · Caption 14
	   Mobile:  Display 44 · H1 38 · H2 30 · H3 24 · H4 20 · Body-lg 18 · Body 16 · Small 16 · Caption 14 */
	--qs-h-scale: 1;
	--qs-display: calc(clamp(2.75rem, 1.55rem + 5.1vw, 4rem) * var(--qs-h-scale));    /* 44 → 64 */
	--qs-h1: calc(clamp(2.375rem, 1.7rem + 2.9vw, 3.5rem) * var(--qs-h-scale));       /* 38 → 56 */
	--qs-h2: calc(clamp(1.875rem, 1.4rem + 2.05vw, 2.625rem) * var(--qs-h-scale));    /* 30 → 42 */
	--qs-h3: calc(clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem) * var(--qs-h-scale));      /* 24 → 30 */
	--qs-h4: calc(clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem) * var(--qs-h-scale));       /* 20 → 24 */
	--qs-body-lg: clamp(1.125rem, 1.0rem + 0.4vw, 1.25rem);  /* 18 → 20 */
	--qs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);       /* 16 → 18 */
	--qs-small: 1rem;                                        /* 16 */
	--qs-caption: 0.875rem;                                  /* 14 */
	/* Component-level label/icon-glyph sizes (outside the text hierarchy) */
	--qs-eyebrow: 0.75rem;                                   /* 12 */
	--qs-micro: 0.6875rem;                                   /* 11 */
	--qs-badge: 0.625rem;                                    /* 10 */
	--qs-icon: 1.5rem;                                       /* 24 glyph */
	--qs-icon-lg: 2rem;                                      /* 32 glyph */

	/* Per-element line-height */
	--qs-lh-display: 1.0;
	--qs-lh-h1: 1.05;
	--qs-lh-h2: 1.1;
	--qs-lh-h3: 1.2;
	--qs-lh-h4: 1.25;
	--qs-lh-base: 1.7;   /* body (overridable: Line Height setting) */
	--qs-lh-small: 1.6;

	/* Per-element letter-spacing */
	--qs-ls-display: -0.04em;
	--qs-ls-h1: -0.03em;
	--qs-ls-h2: -0.02em;
	--qs-ls-h3: -0.01em;
	--qs-ls-body: 0em;   /* overridable: Letter Spacing setting */

	/* Per-element font-weight (avoid heavy bold) */
	--qs-fw-display: 700;
	--qs-fw-h1: 650;
	--qs-fw-h2: 600;
	--qs-fw-h3: 600;
	--qs-fw-h4: 600;
	--qs-fw-body: 400;

	/* Back-compat aliases — legacy names route into the global system */
	--qs-fs-display: var(--qs-display);
	--qs-fs-h1: var(--qs-h1);
	--qs-fs-h2: var(--qs-h2);
	--qs-fs-h3: var(--qs-h3);
	--qs-fs-h4: var(--qs-h4);
	--qs-fs-lg: var(--qs-body-lg);
	--qs-fs-base: var(--qs-body);
	--qs-fs-sm: var(--qs-caption);
	--qs-fs-eyebrow: var(--qs-eyebrow);

	--qs-lh-tight: var(--qs-lh-h1);
	--qs-lh-relaxed: 1.7;
	--qs-tracking-tight: var(--qs-ls-h2);
	--qs-tracking-eyebrow: 0.08em;

	/* Spacing (4px base) */
	--qs-space-1: 0.25rem;
	--qs-space-2: 0.5rem;
	--qs-space-3: 0.75rem;
	--qs-space-4: 1rem;
	--qs-space-5: 1.25rem;
	--qs-space-6: 1.5rem;
	--qs-space-8: 2rem;
	--qs-space-10: 2.5rem;
	--qs-space-12: 3rem;
	--qs-space-16: 4rem;
	--qs-space-20: 5rem;
	--qs-space-24: 6rem;
	--qs-space-30: 7.5rem;

	/* Layout */
	--qs-container: 1200px;
	--qs-container-narrow: 720px;
	--qs-gutter: 1.5rem;
	--qs-gutter-mobile: 1rem;
	--qs-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

	/* Radius */
	--qs-radius-btn: 8px;
	--qs-radius-input: 8px;
	--qs-radius-card: 14px;
	--qs-radius-pill: 999px;

	/* Shadow */
	--qs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--qs-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--qs-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);

	/* Motion */
	--qs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--qs-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--qs-dur-fast: 150ms;
	--qs-dur-base: 200ms;
	--qs-dur-slow: 320ms;

	/* Focus */
	--qs-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4);

	/* Header */
	--qs-header-h: 72px;
	--qs-header-h-mobile: 64px;

	/* Smart Logo System — max heights (overridable from QS Settings → Branding).
	   Renders with object-fit:contain + width:auto: never stretch/squash/crop,
	   aspect ratio always preserved, hi-res assets downscale crisply (retina). */
	--qs-logo-h-d: 48px;   /* desktop max */
	--qs-logo-h-t: 44px;   /* tablet  max */
	--qs-logo-h-m: 36px;   /* mobile  max */
	--qs-logo-h: var(--qs-logo-h-d);
	--qs-z-header: 100;
	--qs-z-overlay: 200;
	--qs-z-float: 150;
}

/* Mobile typography — compact, readable hierarchy across every template.
   Desktop and tablet retain the established fluid scale. */
@media (max-width: 767px) {
	:root {
		--qs-display: calc(2.375rem * var(--qs-h-scale)); /* 38px */
		--qs-h1: calc(2.125rem * var(--qs-h-scale));      /* 34px */
		--qs-h2: calc(1.75rem * var(--qs-h-scale));       /* 28px */
		--qs-h3: calc(1.375rem * var(--qs-h-scale));      /* 22px */
		--qs-body-lg: 1.0625rem;                          /* 17px */
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--qs-dur-fast: 0ms;
		--qs-dur-base: 0ms;
		--qs-dur-slow: 0ms;
	}
}

/* Fix: hero Knowledge tampil saat load (bukan blank menunggu scroll) */
.qs-kb-support-hero .qs-reveal{opacity:1 !important;transform:none !important}

/* Fix: hero trust line disembunyikan khusus mobile (override components.css) */
@media (max-width: 767px){
	.qs-hero__trust{display:none !important}
	body.home .qs-hero{padding-bottom:32px !important}
}

/* Tablet & perangkat sentuh: mega menu bisa dibuka via tap (JS toggle .qs-tap-open) */
@media (hover: none){
	.qs-mega.qs-tap-open{display:block !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transform:none !important}
	.qs-mega.qs-tap-open .qs-mega__inner{display:grid !important}
}

/* Tablet: hilangkan bottom navbar (seperti mobile) + nol-kan padding kompensasinya agar tak ada ruang kosong */
@media (min-width: 768px) and (max-width: 1023px){
	.qs-bottomnav{display:none !important}
	body{padding-bottom:0 !important}
	.qs-wa-fab{bottom:calc(20px + env(safe-area-inset-bottom)) !important}
}

/* Tablet/sentuh: pastikan overlay blur tampil saat mega menu terbuka */
@media (hover: none){
	body.qs-mega-open .qs-mega-backdrop{opacity:1 !important;background:rgba(15,23,42,0.18) !important;-webkit-backdrop-filter:saturate(120%) blur(14px) !important;backdrop-filter:saturate(120%) blur(14px) !important;pointer-events:auto !important}
}

/* Halaman Service: tombol chevron scroller Related/Supporting (mobile only, kanan-bawah). Ukuran kartu tidak berubah. */
.qs-related__nav{display:none}
@media (max-width: 767px){
	.qs-related__nav{display:flex;justify-content:flex-end;gap:12px;margin-top:14px}
}

/* Halaman Service: animasi geser mulus untuk scroller Related/Supporting */
@media (max-width: 767px){
	.qs-related > .qs-grid{scroll-behavior:smooth}
}

/* Fix: cegah halaman ikut geser horizontal di mobile (kolom konten bisa menyusut agar scroller kartu ter-clip). Halaman Service. */
@media (max-width: 767px){
	.qs-detail__main{min-width:0}
}

/* Halaman Produk: mobile -> gambar > kartu harga > deskripsi; badge 'Construction Method' dihapus; kartu dibuat minimalis. Desktop tidak berubah. */
@media (min-width: 900px){
	.qs-detail--sidebar{grid-template-areas:"gallery aside" "main aside" !important}
	.qs-detail--sidebar > .qs-gallery--product{grid-area:gallery !important}
}
@media (max-width: 899px){
	.qs-detail--sidebar{grid-template-columns:1fr !important;grid-template-areas:"gallery" "aside" "main" !important}
	.qs-detail--sidebar > .qs-gallery--product{grid-area:gallery !important}
	.qs-detail--sidebar > .qs-detail__main{grid-area:main !important}
	.qs-detail--sidebar > .qs-buybox{grid-area:aside !important}
	.qs-detail--sidebar > .qs-detail__related{grid-area:related !important}
	.qs-buybox .qs-badge--product{display:none !important}
	.qs-buybox{padding:14px 16px !important;gap:10px !important}
	.qs-buybox .qs-price{font-size:26px !important}
	.qs-buybox .qs-btn{padding-top:11px !important;padding-bottom:11px !important;font-size:15px !important}
	.qs-buybox .qs-card__meta{font-size:12px !important;margin-top:2px !important}
}

/* Product page: "Deskripsi" section label */
.qs-detail__section-title{font-size:clamp(18px,2.4vw,22px);font-weight:700;line-height:1.25;color:var(--qs-text,#0f172a);margin:0 0 10px}
.qs-detail__section-title + .qs-prose{margin-top:0 !important}
@media (max-width:899px){.qs-detail__section-title{margin-top:2px;margin-bottom:8px}}

.qs-detail__related{margin-top:40px !important}

/* Product page mobile: tighten stacked gaps */
@media (max-width:899px){
  .qs-detail--sidebar{gap:22px !important}
  .qs-detail__related{margin-top:24px !important}
}

/* Testimonial cards clickable */
.qs-home-testimonial{cursor:pointer}

/* Service page: sticky card + related layout */
@media (max-width:899px){
  body.single-service .qs-sidebar-sticky{position:static !important}
  body.single-service .qs-detail--sidebar{gap:22px !important}
}
body.single-service .qs-detail--sidebar + .qs-related,
body.single-service .qs-related{margin-top:40px}

/* Service: card into right aside column (desktop/tablet) */
@media (min-width:900px){
  body.single-service .qs-detail--sidebar > .qs-sidebar-sticky{grid-area:aside !important}
}

/* Service: remove empty gallery row + tighten header gap (desktop/tablet) */
@media (min-width:900px){
  body.single-service .qs-detail--sidebar{grid-template-areas:"main aside" !important}
  body.single-service .qs-page-head{padding-bottom:12px !important}
}

/* Mobile: navbar line to hero-text gap = 12px (all page types) */
@media (max-width:767px){
  .qs-page-head{padding-top:12px !important}
  .qs-hero{padding-top:12px !important}
  .qs-about-v2__hero{padding-top:12px !important}
  .qs-career-hero{padding-top:12px !important;margin-top:0 !important}
  .qs-kb-support-hero__head{padding-top:12px !important}
  body.single-product .qs-main .qs-section{padding-top:12px !important}
  body.single-knowledge .qs-main .qs-section{padding-top:12px !important}
  body.single-project .qs-main .qs-section{padding-top:12px !important}
}

/* Service page: consistent section spacing (phone 12px, tablet/desktop 14px) */
@media (max-width:899px){
  body.single-service .qs-detail--sidebar{grid-template-areas:"aside" "main" !important}
}
@media (max-width:767px){
  body.single-service .qs-page-head{padding-bottom:12px !important}
  body.single-service .qs-detail--sidebar{gap:12px !important}
  body.single-service .qs-related{margin-top:12px !important}
}
@media (min-width:768px) and (max-width:899px){
  body.single-service .qs-page-head{padding-bottom:14px !important}
  body.single-service .qs-detail--sidebar{gap:14px !important}
  body.single-service .qs-related{margin-top:14px !important}
}
@media (min-width:900px){
  body.single-service .qs-page-head{padding-bottom:14px !important}
  body.single-service .qs-related{margin-top:14px !important}
}

/* Service: kill subtitle bottom margin so gap = padding */
body.single-service .qs-page-head > :last-child{margin-bottom:0 !important}

/* Service: content section blocks spacing = 12/14 */
@media (max-width:767px){
  body.single-service .qs-detail__main > .qs-block{margin-top:12px !important;margin-bottom:12px !important}
}
@media (min-width:768px){
  body.single-service .qs-detail__main > .qs-block{margin-top:14px !important;margin-bottom:14px !important}
}

/* Service: uniform content spacing 12/14 (paragraphs + section heading) */
@media (max-width:767px){
  body.single-service .qs-detail__main p{margin-bottom:12px !important}
  body.single-service .qs-detail__main .qs-block > :first-child{margin-top:0 !important}
}
@media (min-width:768px){
  body.single-service .qs-detail__main p{margin-bottom:14px !important}
  body.single-service .qs-detail__main .qs-block > :first-child{margin-top:0 !important}
}

/* Service: kill hero section wrapper top padding (mobile) so navbar->hero = 12px */
@media (max-width:767px){
  body.single-service .qs-main > .qs-container.qs-section{padding-top:0 !important}
}

/* Service: compensate eyebrow line-leading so navbar->hero = 12px exactly (mobile) */
@media (max-width:767px){
  body.single-service .qs-page-head{padding-top:7px !important}
}

/* ===== PROJECT (single-project) page tweaks ===== */
body.single-project .qs-page-head{padding-bottom:0 !important}
body.single-project .qs-page-head > :last-child{margin-bottom:0 !important}
body.single-project .qs-project__hero{margin-top:14px !important}
body.single-project .qs-pgallery{display:grid !important;gap:16px !important;grid-template-columns:repeat(3,1fr) !important}
body.single-project .qs-pgallery__item{margin:0 !important;border:1px solid var(--qs-border,#cbd5e1) !important;border-radius:14px !important;overflow:hidden !important;background:#fff !important;aspect-ratio:4/3}
body.single-project .qs-pgallery__link{display:block;width:100%;height:100%}
body.single-project .qs-pgallery__item img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;border-radius:0 !important}
body.single-project .qs-pgallery__item figcaption,body.single-project .qs-pgallery__cap{display:none !important}
@media (max-width:767px){
  body.single-project .qs-pgallery{grid-template-columns:none !important;grid-auto-flow:column !important;grid-auto-columns:78% !important;overflow-x:auto !important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  body.single-project .qs-pgallery__item{scroll-snap-align:start}
}
body.single-project .qs-reco{border:1px solid var(--qs-border,#cbd5e1) !important;border-radius:14px !important;overflow:hidden !important;background:#fff !important;padding:0 !important;max-width:380px}
body.single-project .qs-reco__eyebrow{display:none !important}
body.single-project .qs-reco__inner{display:block !important;padding:0 !important;gap:0 !important}
body.single-project .qs-reco__media{display:block !important;width:100% !important;max-width:none !important;flex:none !important;aspect-ratio:4/3;margin:0 !important;border-radius:0 !important}
body.single-project .qs-reco__media img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;border-radius:0 !important}
body.single-project .qs-reco__content{padding:16px !important}
body.single-project .qs-reco__content > *{max-width:none !important;width:auto !important}


/* ===== KNOWLEDGE: hide TOP ad (archive + single) ===== */
/* Top auto-ad Google yang muncul di antara header & konten (menutupi bagian atas) */
body[class*="knowledge"] .qs-header + .google-auto-placed{display:none !important}
/* Top slot / anchor ad (slot pertama di body, tampil di atas navbar terutama mobile) */
body[class*="knowledge"] > ins.adsbygoogle:first-of-type{display:none !important}

/* Anchor/overlay fixed ad pinned to TOP (mobile) - script-independent instant hide */
body[class*="knowledge"] ins.adsbygoogle[style*="fixed"][style*="top:0"],
body[class*="knowledge"] ins.adsbygoogle[style*="fixed"][style*="top: 0"],
body[class*="knowledge"] div[style*="position: fixed"][style*="top: 0"] > ins.adsbygoogle,
body[class*="knowledge"] div[style*="position:fixed"][style*="top:0"] > ins.adsbygoogle{display:none !important;visibility:hidden !important;height:0 !important}


/* ===== KNOWLEDGE: featured image sebagai hero + kartu (bukan cover biru) ===== */
body.single-knowledge .qs-kb-hero img.wp-post-image{display:block !important}
body.single-knowledge:has(.qs-kb-hero img.wp-post-image) .qs-kb-cover--hero{display:none !important}
.qs-kb-cover.qs-kb-cover--photo{background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important}