@charset "utf-8";
/* ===========================================================================
   tenangjayasejahtera.com — replacement stylesheet
   PT. Tenang Jaya Sejahtera, Karawang. Written 2026-09-11.

   WHY THIS FILE EXISTS
   The site is an Astro export from the Hostinger/Zyro builder. Its real
   stylesheet lives at /_astro-<build>/_slug_.<hash>.css and every copy of it
   returns 404 — on the server and on Zyro's CDNs — so the site has been
   serving with no CSS at all.

   WHAT THIS IS NOT
   It is not a redesign. The builder wrote the entire design into the HTML as
   inline custom properties: grid placement, column and row templates, block
   padding, font sizes for mobile and desktop, line heights, colours, border
   radii, header spacing, button states. All of that is still in the markup.
   This file is the engine that reads it back.

   Anything the markup does not specify — focus rings, hover feedback, print,
   reduced motion — is chosen here, conservatively.

   NOTHING HERE HIDES CONTENT. The site's JavaScript 404s too, so any rule that
   waited on JS would leave the page blank. Every element is visible by default
   and the entrance animation is additive only.
   =========================================================================== */

:root{
  --font-primary:   "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-secondary: "Libre Baskerville", Georgia, "Times New Roman", serif;

  /* taken from the markup's own values */
  --brand-ink:      rgb(13, 20, 26);
  --brand-accent:   rgb(145, 140, 203);
  --brand-accent-d: rgb(141, 121, 162);
  --brand-grey:     rgb(241, 241, 241);

  --page-max:       1224px;
  --header-max:     1240px;
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-primary);
  color:var(--brand-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--brand-accent); outline-offset:3px; }

/* ------------------------------------------------------------- typography
   Every heading and paragraph in the markup carries its own size and leading
   as --fontSizeDesktop / --lineHeightDesktop (and the -Mobile pair). Reading
   them here is what restores the type scale the builder designed. */
h1,h2,h3,h4,h5,h6,p{
  margin:0;
  font-family:var(--font-primary);
  font-size:var(--fontSizeDesktop, 16px);
  line-height:var(--lineHeightDesktop, 1.5);
  font-weight:400;
  overflow-wrap:break-word;
}
h1,h2{ font-weight:600; }
h3{ font-weight:500; }
strong,b{ font-weight:600; }

.text-box{
  white-space:var(--54285089, normal);
  width:100%;
}
.text-box ul,.text-box ol{ padding-left:1.25em; }
.text-box li{ margin:.25em 0; }
.text-box a{ color:var(--brand-accent-d); text-underline-offset:2px; }
.text-box a:hover{ color:var(--brand-ink); }

/* --------------------------------------------------------------- sections */
.block{
  position:relative;
  padding:var(--block-padding, 0);
  overflow:hidden;
}

/* the tinted / image layer behind a section */
.block-background{
  position:absolute; inset:0; z-index:0;
  background-color:var(--f9f3716a, transparent);
  background-position:var(--b98e7ee4, center);
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:none;
}
.block-background img,
.block-background video,
.block-background picture{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* The section backdrop is a real element in the markup: an <img> or a <video>
   with class block-background__image, and a sibling block-background__overlay
   that darkens it. Several sections put WHITE text over this, so if the media
   is not made to cover and the overlay is not darkened, that text lands on
   white and disappears. That is exactly what happened before these rules. */
.block-background__image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--b98e7ee4, center);
}
.block-background__overlay{
  position:absolute; inset:0;
  background:#000;
  opacity:var(--8481c29a, 0);
  pointer-events:none;
}

/* ------------------------------------------------------------- the grid
   This is the heart of it. Each section is a CSS grid whose track lists the
   builder wrote into --grid-template-columns / --grid-template-rows, and each
   element places itself with --grid-column / --grid-row. */
.block-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:var(--grid-template-columns, 1fr);
  grid-template-rows:var(--grid-template-rows, auto);
  min-height:var(--block-min-height, auto);
  max-width:var(--cf684206, var(--page-max));
  padding:var(--b11075fe, 0);
  margin-inline:auto;
  width:100%;
}

.layout-element{
  position:relative;
  grid-row:var(--grid-row, auto);
  grid-column:var(--grid-column, auto);
  z-index:var(--z-index, 1);
  display:flex;
  flex-direction:column;
  align-items:var(--justify, flex-start);
  justify-content:var(--align, flex-start);
  text-align:var(--text, left);
  min-width:0;
}
.layout-element__component{ width:100%; }

/* --------------------------------------------------------------- images */
.image,.image-wrapper{ width:100%; }
.image__image{
  width:var(--9c00fd5c, 100%);
  height:var(--09ad0563, auto);
  object-fit:cover;
  border-radius:var(--f177488a, 0);
}
.image__image--svg{ object-fit:contain; }
.image-wrapper--mobile{ display:none; }

/* --------------------------------------------------------------- buttons */
.grid-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  font-family:var(--font-primary);
  font-weight:500;
  font-size:var(--font-size-desktop, 16px);
  line-height:1.2;
  padding:.7em 1.6em;
  border-radius:var(--border-radius, 4px);
  border:var(--border-width, 0) solid var(--border-color, transparent);
  background:var(--background-color, var(--brand-accent));
  color:var(--font-color, #fff);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
  max-width:100%;
}
.grid-button:hover,
.grid-button:focus-visible{
  background:var(--background-color-hover, var(--brand-accent-d));
  color:var(--font-color-hover, #fff);
  border-color:var(--border-color-hover, transparent);
}

/* ---------------------------------------------------------------- shapes */
.grid-shape{ width:100%; }
.grid-shape svg{ width:100%; height:auto; display:block; }

/* ==========================================================================
   HEADER
   All of these values are the header's own named custom properties.
   ========================================================================== */
.block-header{
  position:relative;
  z-index:50;
  background:var(--background-color, #fff);
  border-bottom:1px solid rgba(13,20,26,.08);
}
.block-header .background{
  position:absolute; inset:0;
  background:var(--background-color, #fff);
  z-index:-1;
}
.block-header-layout-desktop{
  display:flex;
  align-items:center;
  gap:var(--element-spacing, 32px);
  max-width:var(--width, var(--header-max));
  margin-inline:auto;
  padding:var(--padding, 10px 16px);
  width:100%;
}
.block-header__logo{ flex:0 0 auto; display:block; }
.block-header-logo__image{
  width:var(--0c1b1e60, var(--logo-width, 180px));
  height:auto;
  object-fit:contain;
}

.block-header__nav{ margin-left:auto; }
.block-header__nav-links{
  display:flex;
  align-items:center;
  gap:var(--link-spacing, 32px);
  list-style:none;
  flex-wrap:wrap;
}
.block-header-item{ position:relative; }
.block-header-item__link,
.block-header-item__label,
.block-header-item a{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  text-decoration:none;
  color:var(--nav-link-text-color, var(--brand-ink));
  font-weight:var(--nav-link-font-weight, 400);
  font-size:15px;
  line-height:1.4;
  padding:6px 0;
  transition:color .16s ease;
  white-space:nowrap;
}
.block-header-item a:hover,
.block-header-item a:focus-visible{
  color:var(--nav-link-text-color-hover, var(--brand-accent));
}

/* dropdowns: shown on hover and on keyboard focus, never hidden by default in
   a way that would make them unreachable without JavaScript */
.block-header-item__dropdown-area{
  position:absolute; top:100%; left:0;
  min-width:230px;
  padding-top:8px;
  opacity:0; visibility:hidden;
  transition:opacity .16s ease, visibility .16s ease;
}
.block-header-item:hover > .block-header-item__dropdown-area,
.block-header-item:focus-within > .block-header-item__dropdown-area{
  opacity:1; visibility:visible;
}
.block-header-item__dropdown{
  background:#fff;
  border:1px solid rgba(13,20,26,.1);
  border-radius:8px;
  box-shadow:0 10px 30px rgba(13,20,26,.12);
  padding:8px;
  list-style:none;
  display:flex; flex-direction:column;
}
.block-header-item__dropdown a{ padding:9px 12px; border-radius:6px; }
.block-header-item__dropdown a:hover{ background:var(--brand-grey); }

.item-content{ display:inline-flex; align-items:center; gap:.35em; }
.item-content__icon{ width:1em; height:1em; }

.language-switcher{ position:relative; }
.language-switcher__button{
  display:inline-flex; align-items:center; gap:.4em;
  background:none; border:0; cursor:pointer;
  color:var(--nav-link-text-color, var(--brand-ink));
  padding:6px 0;
}
.language-switcher__dropdown-area{
  position:absolute; top:100%; right:0; padding-top:8px;
  opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease;
}
.language-switcher:hover .language-switcher__dropdown-area,
.language-switcher:focus-within .language-switcher__dropdown-area{
  opacity:1; visibility:visible;
}
.language-switcher__dropdown{
  background:#fff; border:1px solid rgba(13,20,26,.1);
  border-radius:8px; box-shadow:0 10px 30px rgba(13,20,26,.12);
  padding:6px; list-style:none; min-width:170px;
}
.language-switcher__dropdown-link{ display:block; padding:8px 10px; border-radius:6px; text-decoration:none; }
.language-switcher__dropdown-link:hover{ background:var(--brand-grey); }

/* burger, shown only on small screens */
.block-header__burger,.burger{
  display:none;
  background:none; border:0; cursor:pointer;
  width:40px; height:40px; padding:8px;
  flex-direction:column; justify-content:space-between;
}
.burger__bun{
  display:block; height:2px; width:100%;
  background:var(--nav-link-text-color, var(--brand-ink));
  border-radius:2px;
}

/* ---------------------------------------------------------------- social */
.social-icons{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.social-icons__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(13,20,26,.06);
  transition:background-color .16s ease, transform .16s ease;
}
.social-icons__link:hover{ background:var(--brand-accent); transform:translateY(-2px); }
.social-icons__link svg,.social-icons__link img{ width:20px; height:20px; }

/* ------------------------------------------------------------ animation
   Additive only. Elements are fully visible with no JavaScript; this just
   softens their arrival when the runtime is present. */
@media (prefers-reduced-motion:no-preference){
  .transition--slide[data-animation-state="active"]{
    animation:tjs-rise .5s ease-out both;
  }
}
@keyframes tjs-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
/* never let a transition class hide content outright */
.transition--root-hidden{ opacity:1 !important; visibility:visible !important; }

/* ====================================================================
   MOBILE — the builder ships a complete second layout in --m-* values
   ==================================================================== */
@media (max-width:920px){
  h1,h2,h3,h4,h5,h6,p{
    font-size:var(--fontSizeMobile, var(--fontSizeDesktop, 16px));
    line-height:var(--lineHeightMobile, var(--lineHeightDesktop, 1.5));
  }
  .text-box{ white-space:var(--6191828b, normal); }

  .block{ padding:var(--m-block-padding, 16px); }

  .block-layout{
    grid-template-columns:var(--m-grid-template-columns, 1fr);
    grid-template-rows:var(--m-grid-template-rows, auto);
    min-height:var(--m-block-min-height, auto);
    max-width:var(--1b0ec2ff, 100%);
    padding:var(--5a2609c5, 0 16px);
  }

  .layout-element{
    grid-row:var(--m-grid-row, auto);
    grid-column:var(--m-grid-column, auto);
    margin:var(--m-element-margin, 0);
  }

  .image__image{
    width:var(--5de16d65, 100%);
    height:var(--4beec8a0, auto);
  }
  .image-wrapper--desktop{ display:none; }
  .image-wrapper--mobile{ display:block; }

  .grid-button{ font-size:var(--font-size-mobile, 14px); padding:.65em 1.3em; }

  .block-header-layout-desktop{ padding:var(--m-padding, 24px 16px); }
  .block-header-logo__image{ width:var(--653c9bff, var(--m-logo-width, 120px)); }
  .block-header__nav-links{ gap:var(--m-link-spacing, 20px); }
}

/* very small screens: let the menu wrap rather than overflow */
@media (max-width:560px){
  .block-header-layout-desktop{ flex-wrap:wrap; row-gap:12px; }
  .block-header__nav{ margin-left:0; width:100%; }
  .block-header__nav-links{ gap:14px; row-gap:8px; }
  .block-header-item a{ font-size:14px; }
}

/* ------------------------------------------------------------------ print */
@media print{
  .block-header,.social-icons,.grid-button{ display:none !important; }
  .block-background{ display:none !important; }
  body{ color:#000; }
  .block{ padding:12px 0 !important; }
}


/* ==========================================================================
   FALLBACK TYPE SCALE
   Most headings carry their own --fontSizeDesktop. A handful do not: four h1s,
   two h2s and twenty paragraphs. Without a fallback those collapse to 16px —
   a hero headline rendering at body size. These defaults sit in the same scale
   the rest of the site uses (its own h1s are 48-64px, h2s 32-48px, h3s 14-32px)
   and are overridden the moment an element declares its own value.
   ========================================================================== */
h1{ font-size:var(--fontSizeDesktop, 48px); }
h2{ font-size:var(--fontSizeDesktop, 36px); }
h3{ font-size:var(--fontSizeDesktop, 24px); }
h4{ font-size:var(--fontSizeDesktop, 20px); }
h5{ font-size:var(--fontSizeDesktop, 18px); }
h6{ font-size:var(--fontSizeDesktop, 16px); }
p { font-size:var(--fontSizeDesktop, 16px); line-height:var(--lineHeightDesktop, 1.7); }

/* the two font utility classes the markup uses */
.font-primary{ font-family:var(--font-primary); }
.font-secondary{ font-family:var(--font-secondary); }

/* ------------------------------------------------------- blog header block
   Used by the two article pages. The section declares --content-width. */
.block-blog-header{
  max-width:var(--content-width, 954px);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--1fd7f410, 32px);
  width:100%;
}
.block-blog-header__content{ display:flex; flex-direction:column; gap:16px; }
.block-blog-header__title{
  font-family:var(--font-primary);
  font-size:clamp(30px, 4vw, 48px);
  line-height:1.2;
  font-weight:600;
  margin:0;
}
.block-blog-header__description{ font-size:18px; line-height:1.7; color:rgba(13,20,26,.75); }

.blog-list-item-meta{
  display:flex; align-items:center; gap:12px;
  padding-top:4px;
  border-top:1px solid rgba(13,20,26,.1);
}
.blog-list-item-meta__author-name{
  font-family:var(--font-secondary);
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(13,20,26,.6); margin:0;
}
.blog-list-item-meta__subtitle{
  font-family:var(--font-secondary);
  font-size:13px; color:rgba(13,20,26,.55); margin:0;
}
.blog-list-item-meta__author-name + .blog-list-item-meta__subtitle::before{
  content:"·"; margin-right:10px;
}
.blog-list-item-meta > .font-secondary{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }

.block-blog-list{ max-width:var(--content-width, 954px); margin-inline:auto; width:100%; }
.block-blog-list__empty-block{ padding:36px 0; color:rgba(13,20,26,.6); }
.block-blog-list__pagination{ display:flex; gap:10px; justify-content:center; padding:22px 0; }

/* sections that declare a reading width rather than a grid */
.block > .block-blog-header,
.block > .block-blog-list{ position:relative; z-index:1; }

@media (max-width:920px){
  h1{ font-size:var(--fontSizeMobile, var(--fontSizeDesktop, 32px)); }
  h2{ font-size:var(--fontSizeMobile, var(--fontSizeDesktop, 26px)); }
  h3{ font-size:var(--fontSizeMobile, var(--fontSizeDesktop, 20px)); }
  h4,h5,h6{ font-size:var(--fontSizeMobile, var(--fontSizeDesktop, 16px)); }
  p { font-size:var(--fontSizeMobile, var(--fontSizeDesktop, 16px));
      line-height:var(--lineHeightMobile, var(--lineHeightDesktop, 1.7)); }
  .block-blog-header__title{ font-size:clamp(26px, 7vw, 34px); }
}


/* ==========================================================================
   HEADER: desktop / mobile layout swap
   The builder ships BOTH header layouts in the markup and expects CSS to show
   one at a time. Without this rule both render and the header is ~265px tall
   instead of the 94px the markup declares.
   ========================================================================== */
.block-header-layout-mobile{ display:none; }

@media (max-width:920px){
  .block-header-layout-desktop{ display:none; }

  .block-header-layout-mobile{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    max-width:var(--width, var(--header-max));
    margin-inline:auto;
    padding:var(--m-padding, 16px);
    min-height:var(--header-height-mobile, 69px);
  }

  .block-header__burger,.burger{
    display:flex;
    margin-left:auto;
  }

  /* the mobile dropdown panel */
  .block-header-layout-mobile__dropdown{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--background-color, #fff);
    border-top:1px solid rgba(13,20,26,.1);
    box-shadow:0 12px 28px rgba(13,20,26,.12);
    padding:10px 16px 18px;
    display:flex;
    flex-direction:column;
    gap:2px;
    max-height:70vh;
    overflow-y:auto;
  }
  .block-header-layout-mobile__dropdown--link-align-right{ text-align:right; }
  .block-header-layout-mobile__dropdown .block-header-item{ width:100%; }
  .block-header-layout-mobile__dropdown a{
    display:block; width:100%;
    padding:12px 4px;
    border-bottom:1px solid rgba(13,20,26,.06);
    font-size:16px;
  }

  /* nested items inside the mobile menu sit in the flow, not absolutely */
  .block-header-layout-mobile .block-header-item__dropdown-area{
    position:static;
    opacity:1; visibility:visible;
    padding-top:0;
  }
  .block-header-layout-mobile .block-header-item__dropdown{
    border:0; box-shadow:none; padding:0 0 0 14px; border-radius:0;
  }
  .block-header-layout-mobile .block-header-item__dropdown a{ font-size:15px; }
}

/* the header needs to be a positioning context for the mobile panel */
.block-header{ position:relative; }