/* =========================================================================
   GSA — system.css  (loaded LAST on every page, v1.8)

   One design system on top of the page styles, following the Apple review:
   1. Tokens: one type scale (9 styles), one container, three corner sizes
   2. Type roles: every heading / text / label mapped to one of the 9 styles
   3. Labels above headings ("eyebrows"): one style everywhere, no capitals
   4. Weights: no light text below display size; section titles in one weight
   5. Containers line up across every page
   6. Corners
   7. Components fixed in the review (segments, article list, search, 404, footer …)

   To change the look of a role, change it here once.
   ========================================================================= */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	/* Type scale (rem; phones use a 17px base so everything scales up together) */
	--gsa-t-display: clamp(2.4rem, 1.5rem + 3.4vw, 3.6rem);  /* hero / page title            */
	--gsa-t-title1:  clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem);  /* section title                */
	--gsa-t-title2:  clamp(1.35rem, 1.1rem + .8vw, 1.65rem); /* big card / panel title       */
	--gsa-t-title3:  1.2rem;                                 /* card title                   */
	--gsa-t-headline: 1.0625rem;                             /* bold list / row label (600)  */
	--gsa-t-body:    1rem;                                   /* reading text                 */
	--gsa-t-callout: .9375rem;                               /* secondary text in cards      */
	--gsa-t-footnote: .8125rem;                              /* meta, dates, breadcrumbs     */
	--gsa-t-caption: .75rem;                                 /* tags and small labels        */

	/* Three corner sizes */
	--gsa-r-sm: 12px;   /* inputs, small tiles, list rows */
	--gsa-r-md: 20px;   /* cards                         */
	--gsa-r-lg: 32px;   /* large panels, footer          */
	--gsa-radius-md: var(--gsa-r-sm);
	--gsa-radius-lg: var(--gsa-r-md);
	--gsa-radius-xl: var(--gsa-r-lg);

	/* One container: the content is 1320px wide on every page, the gutter sits outside it */
	--gsa-container: calc(var(--gsa-max) + 2 * var(--gsa-gutter));
}

/* 2. Type roles ---------------------------------------------------------------- */
h1, h2, h3, .gsa-hero__title { text-wrap: balance; }
.gsa-services__name { font-size: var(--gsa-t-callout); }
/* Display */
.gsa-hero__title, .gsa-ab-hero h1, .sa-title {
	font-size: var(--gsa-t-display); line-height: 1.08; letter-spacing: -.025em;
}
/* Title 1 — section titles: one weight (700) */
.gsa-h2, .gsa-h2--sm, .gsa-ab-h2, .lp-tc-heading, .gsa-globe__title, .gsa-iso h2, .gsa-banner h2,
.gsa-blog-band h1, .gsa-page-head h1, .gsa-lw__title, .gsa-ab-values__head h2 {
	font-size: var(--gsa-t-title1); line-height: 1.15; letter-spacing: -.02em; font-weight: 700;
}
/* Title 2 */
.gsa-fpc h3, .gsa-fpc--indigo h3, .gsa-feature h3, .gsa-fcta h2, .gsa-quote-done h2, .gsa-empty h2,
.gsa-lw__panel-heading, .gsa-ab-story__right h3, .gsa-sheet__head h2 {
	font-size: var(--gsa-t-title2); line-height: 1.25; letter-spacing: -.015em; font-weight: 700;
}
/* Title 3 */
.gsa-card h3, .gsa-story h3, .gsa-video__text h3, .gsa-ab-step__body h3, .gsa-post-card h2,
.sa-postnav__title, .gsa-quote__intro h3, .gsa-ring__title, .gsa-ab-value__top h3, .gsa-lw__subheading {
	font-size: var(--gsa-t-title3); line-height: 1.3; letter-spacing: -.01em; font-weight: 700;
}
/* Headline */
.gsa-lw__feature-title, .gsa-perk__h, .gsa-footer__nl-title, .gsa-pick__title, .gsa-article p,
.gsa-widget__title, .sa .sa-related__title {
	font-size: var(--gsa-t-headline); line-height: 1.35; font-weight: 600; letter-spacing: 0;
}
/* Body */
.gsa-lead, .gsa-hero__desc, .gsa-about__body, .gsa-iso__desc, .gsa-services__desc, .gsa-ab-hero__lead,
.gsa-lw__intro, .gsa-fcta p, .gsa-ab-story__right p, .gsa-page-head p, .gsa-ab-history__head p,
.gsa-ab-stats__lead, .gsa-globe__desc, .gsa-ab-vision__mission, .gsa-prose, .sa-content {
	font-size: var(--gsa-t-body); line-height: 1.65;
}
.gsa-hero__desc, .gsa-ab-hero__lead { font-size: var(--gsa-t-headline); font-weight: 400; }
/* Callout */
.gsa-card p, .gsa-story p, .gsa-fpc p, .gsa-fpc--indigo p, .gsa-feature p, .gsa-ab-step__body p, .gsa-ab-value__card,
.gsa-post-card__excerpt, .gsa-lw__feature-text, .gsa-perk__p, .gsa-footer__tagline, .gsa-contact a,
.gsa-contact__row, .gsa-footer__links a, .gsa-quote__intro p, .gsa-ab-values__head p, .gsa-ring__sub,
.gsa-ab-fact > span, .gsa-video__text p {
	font-size: var(--gsa-t-callout); line-height: 1.55;
}
/* Footnote */
.gsa-crumbs, .gsa-blog-crumbs, .gsa-lw__breadcrumb, .sa-crumbs, .gsa-card__foot time, .gsa-feature__foot time,
.gsa-footer__fine, .gsa-footer__copy, .gsa-footer__legal a, .gsa-stat__label, .gsa-ab-stat__label, .gsa-cl-stat__label,
.gsa-field label, .gsa-field__label, .gsa-form__note, .gsa-drop__hint, .gsa-fpc__facts li, .gsa-pick__meta,
.gsa-post-card__meta, .sa-caps, .sa .sa-related__label, .sa-postnav__label, .gsa-ab-step__tag, .gsa-steps__label,
.gsa-cl-card__city, .gsa-card__read, .gsa-hq-label {
	font-size: var(--gsa-t-footnote); line-height: 1.45;
}


/* Controls — every button, link pill, tab and menu row uses one size */
.gsa-btn, .gsa-btn--md, .gsa-btn--lg, .gsa-btn--outline, .gsa-btn--form, .gsa-link, .gsa-cta, .gsa-pill, .gsa-filter__btn,
.lp-tc-viewall, .gsa-fpc__more, .gsa-feature__btn, .gsa-video__link, .gsa-nl button, .gsa-ab-btn, .gsa-ab-link,
.gsa-picker__btn, .gsa-pagination .page-numbers, .gsa-blog-pages .page-numbers, .gsa-lw__tab, .gsa-lw__nav-item,
.gsa-blog-cats a, .gsa-sheet__close, .gsa-theme__menu button, .gsa-lang__menu button, .sa-meta__cta, .gsa-card__read,
.gsa-drop__name {
	font-size: var(--gsa-t-callout);
}
.gsa-link, .gsa-lw__nav-item, .gsa-blog-cats a, .gsa-pill { font-weight: 500; }
.gsa-lw__stat, .gsa-fpc__facts li, .gsa-steps__num { font-size: var(--gsa-t-footnote); }
.gsa-lw__panel li, .gsa-lw__reqs li { font-size: var(--gsa-t-callout); }
.gsa-stat__num { font-size: var(--gsa-t-title1); }
.gsa-ab-fact > b { font-size: var(--gsa-t-title3); }

/* 3. Labels above headings: one style, no capitals ------------------------------ */
.gsa-eyebrow, .gsa-ab-eyebrow, .gsa-cl-eyebrow, .gsa-lw__eyebrow, .gsa-fpc__count {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0; height: auto;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	font-family: var(--gsa-font); font-size: var(--gsa-t-footnote); font-weight: 600; line-height: 1.3;
	letter-spacing: .01em; text-transform: none; color: var(--gsa-muted);
}
.gsa-eyebrow::before, .gsa-ab-eyebrow::before, .gsa-cl-eyebrow::before, .gsa-lw__eyebrow::before, .gsa-fpc__count::before {
	content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gsa-accent); box-shadow: none;
}
.gsa-fpc__count:empty { display: none; }
.gsa-ab-eyebrow--light, .gsa-fpc--indigo .gsa-fpc__count { color: rgba(255, 255, 255, .78); }
.gsa-ab-eyebrow--light::before, .gsa-fpc--indigo .gsa-fpc__count::before { background: var(--gsa-accent-glow); }

/* Tags (category / status): small pills, sentence case */
.gsa-chip, .gsa-card__tag, .gsa-feature__tag, .gsa-fpc__badge, .gsa-iso__badge, .gsa-badge, .gsa-ab-step__tag {
	text-transform: none; letter-spacing: 0; font-size: var(--gsa-t-caption); font-weight: 600;
}
/* Small group titles (menus, footer, sheet, sidebars): sentence case */
.gsa-col h3, .gsa-footer__col-title, .gsa-group__title, .gsa-lw__group-label, .gsa-widget__title,
.gsa-blog-crumbs, .gsa-pick__meta, .gsa-post-card__meta, .sa-caps, .sa .sa-related__label, .sa-postnav__label,
.gsa-cl-stat__label, .gsa-cl-card__country, .gsa-ab-values__head h2 {
	text-transform: none; letter-spacing: 0;
}
.gsa-col h3, .gsa-footer__col-title, .gsa-group__title, .gsa-lw__group-label, .gsa-widget__title {
	font-size: var(--gsa-t-footnote); font-weight: 600; color: var(--gsa-muted);
}

/* 4. Weights ------------------------------------------------------------------- */
/* Reading text never uses a light weight (Apple: "avoid light font weights"). */
.w-light, .w-muted, .gsa-lw__intro, .gsa-hero__desc, .gsa-banner .q-light, .gsa-iso h2 .q-light { font-weight: 400; }
.gsa-about__body .w-muted { color: var(--gsa-muted); }
/* Section titles: one weight. The hero keeps its bold/light mix as the signature. */
.gsa-h2 .w-light, .gsa-h2 .w-bold, .gsa-h2 .w-xbold { font-weight: inherit; color: inherit; }
.gsa-iso h2 .q-bold, .gsa-iso h2 .q-light { font-weight: 700; }
.gsa-iso h2 .q-light { color: rgba(255, 255, 255, .72); }
/* All statistics: same style everywhere */
.gsa-stat__num, .gsa-ab-stat__num, .gsa-cl-stat__num {
	font-family: var(--gsa-font-display); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.gsa-ab-stat__num { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); }
.gsa-ab-stat__num sup { font-weight: 600; }

/* 5. Containers line up ------------------------------------------------------------ */
.gsa-footer { max-width: var(--gsa-container); }
.gsa-ab { --max: var(--gsa-container); }
.gsa-blog-band, .gsa-blog-shell { --blog-max: var(--gsa-container); }
.gsa-blog-wrap { padding: 0 var(--gsa-gutter); }
/* Content pages (FAQ, terms): the title lines up with the centred card under it */
.gsa-page-head:has(+ .gsa-page-body .gsa-page-body__card) .gsa-page-head__inner { max-width: 900px; }

/* 6. Corners ------------------------------------------------------------------------ */
.gsa-card, .gsa-story, .gsa-video, .gsa-feature, .gsa-fpc, .gsa-form, .gsa-quote__intro, .gsa-quote__perks,
.gsa-empty, .gsa-page-body__card, .gsa-quote-done__card, .gsa-ab-value, .gsa-ab-values__grid, .gsa-ab-story__photo,
.gsa-post-card__thumb, .sa-cover img, .sa .sa-related__media, .gsa-lw__header, .gsa-lw__panels, .gsa-lw__sidebar-inner,
.lp-tc-item, .gsa-ab-stat, .gsa-cl-card, .gsa-picker { border-radius: var(--gsa-r-md); }
.gsa-ab-fact, .gsa-lw__feature, .gsa-lw__doc, .gsa-group, .gsa-field input, .gsa-field textarea, .gsa-drop,
.gsa-lw__nav-item, .gsa-lw__search input, .gsa-prose details, .gsa-prose img, .gsa-blog-photos a, .gsa-article img,
.gsa-ab-step__tag { border-radius: var(--gsa-r-sm); }
.gsa-fcta, .gsa-footer__card, .gsa-banner__card, .gsa-iso, .gsa-about--overlap { border-radius: var(--gsa-r-lg); }
.gsa-about--overlap { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gsa-iso, .gsa-banner__card { border-radius: var(--gsa-r-lg); }
.gsa-picker { border-radius: 999px; }
@media (max-width: 720px) {
	.gsa-fcta, .gsa-footer__card, .gsa-banner__card, .gsa-iso { border-radius: var(--gsa-r-md); }
	.gsa-about--overlap { border-radius: var(--gsa-r-md) var(--gsa-r-md) 0 0; }
}

/* 7. Components ----------------------------------------------------------------------- */

/* Home · services: on phones the action comes after the cards */
.gsa-services__cta--end { display: none; }
@media (max-width: 1023px) {
	.gsa-services__side .gsa-services__cta { display: none; }
	.gsa-services__cta--end { display: inline-flex; justify-self: start; margin-top: 8px; }
}
/* Home · services list: no 01/02 numbers — the dot shows the active card */
.gsa-services__tab { gap: 12px; }

/* About · the ISO banner's stats repeat the "Dalam angka" block below: show them once */
.gsa-ab .gsa-iso .gsa-stats { display: none; }
.gsa-ab-values__head h2 { color: var(--gsa-ink); }

/* Service pages · segmented control: selected segment is a raised neutral tile, blue stays for actions */
.gsa-lw__tabs { background: var(--gsa-fill); border-color: transparent; padding: 4px; }
.gsa-lw__tab { color: var(--gsa-muted); font-weight: 600; }
.gsa-lw__tab.is-active {
	background: var(--gsa-surface); color: var(--gsa-ink); font-weight: 700;
	box-shadow: 0 1px 3px rgba(10, 20, 40, .12), 0 0 0 .5px rgba(10, 20, 40, .06);
}
/* Service pages · phones: the "Layanan" tab already opens the full list, so no second list on top */
@media (max-width: 900px) {
	.gsa-lw__sidebar, .gsa-lw__mobile-toggle { display: none !important; }
}

/* Article list · sidebar in the site's rounded, grouped style (not newspaper rules) */
.gsa-widget__title { border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; }
.gsa-widget__title::after, .gsa-widget__title::before { display: none !important; }
.gsa-blog-cats { overflow: hidden; border-radius: var(--gsa-r-sm); background: var(--gsa-surface-2); }
.gsa-blog-cats li { border: 0 !important; position: relative; }
.gsa-blog-cats li + li::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--gsa-line); }
.gsa-blog-cats a { padding: 12px 14px !important; }
.gsa-blog-search { border-radius: 999px !important; border: 1px solid var(--gsa-line) !important; background: var(--gsa-surface-2) !important; overflow: hidden; }
.gsa-blog-search input { background: transparent !important; padding-left: 18px !important; }
.gsa-blog-search button { border-radius: 999px !important; margin: 4px; width: 40px; height: 40px; background: var(--gsa-inverse) !important; color: var(--gsa-on-inverse) !important; }
.gsa-pick { border-bottom-color: var(--gsa-line) !important; }
.gsa-blog-pages .prev, .gsa-blog-pages .next { width: auto !important; padding: 0 16px !important; gap: 6px; display: inline-flex; align-items: center; }

/* Article page · no decorative rule; one next step after the article; single post-nav centred */
.sa-hero::before { display: none !important; }
.sa-next {
	display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
	margin-top: 48px; padding: 24px 28px; border-radius: var(--gsa-r-md); background: var(--gsa-surface-2);
}
.sa-next p { margin: 0 !important; max-width: 46ch; font-size: var(--gsa-t-headline); font-weight: 600; color: var(--gsa-ink); line-height: 1.4; }
.sa-postnav__inner--single { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
.sa-postnav__inner--single .sa-postnav__item { border: 0 !important; }

/* Search page · one search field (the page's), results all equal */
body.search .gsa-topbar .gsa-search { display: none; }
.gsa-page-head .gsa-empty__search { margin: 22px 0 0; max-width: 520px; }

/* Search fields everywhere: the button is a plain style (one blue action per view) */
.gsa-empty__search .gsa-btn--soft { background: var(--gsa-fill); color: var(--gsa-ink); }

/* Footer: newsletter button label is now a verb ("Berlangganan") — give it room */
.gsa-nl button { white-space: nowrap; }

/* Dark Mode */
/* dark:auto+manual */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gsa-lw__tab.is-active { background: #2A2E38; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
}
	:root[data-theme="dark"] .gsa-lw__tab.is-active { background: #2A2E38; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* Article page · the next-step button keeps button colours inside article text */
.sa-content .sa-next .gsa-btn { color: #fff; text-decoration: none; }
/* "Baca juga" card: no decorative blue rule on top */
.sa .sa-related { border-top: 0 !important; padding-top: 0 !important; }
.sa .sa-related::before { display: none !important; }

/* Home · video cards on phones: the play mark sits above the title, not on top of it */
@media (max-width: 720px) {
	.gsa-video { min-height: 300px; }
	.gsa-video__play { top: 36%; }
}

/* About · value cards: the text panel is dense enough to read over any photo */
.gsa-ab-value__card { background: rgba(7, 11, 22, .72); }

/* Content pages on phones: no card inside a card — the questions sit on the page */
@media (max-width: 720px) {
	.gsa-page-body__card { padding: 0; background: transparent; border: 0; box-shadow: none; }
}