/* ==========================================================================
   Halaman depan SSGErp — tironan tata letak suryasaputragemilang.com
   Dibuat 18 Sep 2026. Sumber acuan: situs PT Surya Saputra Gemilang (WordPress),
   diambil lewat computed-style + konten per section.

   Token yang disalin dari situs acuan:
     font body   : DM Sans 16px/500
     font judul  : Lexend  (h1 50px/500, h2 34px/500, h3 24px/500)
     warna teks  : #131739 (body)  #05060F (judul)
     biru tombol : #2235DD, radius 8px, padding 12px 26px 12px 28px, 15px/700
     latar terang: #F0F1FD
     gelap       : #05060F
   ========================================================================== */

.ssgwrap *, .ssgwrap *::before, .ssgwrap *::after { box-sizing: border-box; }

.ssgwrap {
  /* overflow-x:clip (bukan hidden) supaya section full-bleed tidak bikin scroll samping,
     tapi sticky/fixed dari panel Filament tetap jalan */
  overflow-x: clip;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  color: #131739;
}

/* section yang menembus keluar container fi-main (fi-width-7xl) */
.ssg-full {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
}

.ssgwrap :is(h1,h2,h3) { font-family: "Lexend", "DM Sans", sans-serif; font-weight: 500; color: #05060F; margin: 0; }
.ssgwrap p { margin: 0; }
.ssgwrap img { display: block; max-width: 100%; height: auto; }

.ssg-eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2235DD;
  margin-bottom: 14px;
}
.ssg-eyebrow--terang { color: #9FB0FF; }

.ssg-btn {
  display: inline-block;
  background: #2235DD;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 26px 12px 28px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .2s ease, transform .2s ease;
}
.ssg-btn:hover { background: #1a2ab5; transform: translateY(-1px); }
.ssg-btn--putih { background: #fff; color: #131739 !important; }
.ssg-btn--putih:hover { background: #eef0ff; }

.ssg-dalam { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ---------------------------------------------------------------- 1. HERO */
.ssg-hero {
  background-image: url(bg-hero.jpg);
  background-size: cover;
  background-position: 0% 0%;
  min-height: 830px;
  display: flex;
  align-items: flex-start;
  padding: 90px 0 70px;
}
.ssg-hero__kotak {
  background: rgba(5, 6, 15, .69);
  padding: 70px 60px;
  max-width: 860px;
  border-radius: 4px;
}
.ssg-hero__kotak h1 {
  font-size: 50px;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 22px;
  max-width: 15em;
}
.ssg-hero__kotak p { color: rgba(255, 255, 255, .88); font-size: 17px; margin-bottom: 32px; max-width: 46em; }

/* ---------------------------------------------- 2. TENTANG KAMI (2 gambar) */
.ssg-tentang { padding: 100px 0; background: #fff; }
.ssg-tentang__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.ssg-tentang__gambar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ssg-tentang__gambar img { width: 100%; height: 440px; object-fit: cover; border-radius: 10px; }
.ssg-tentang__gambar img:last-child { margin-top: 46px; }
.ssg-tentang h2 { font-size: 34px; line-height: 1.25; margin-bottom: 20px; }
.ssg-tentang p { color: #475569; margin-bottom: 26px; }
.ssg-link { color: #2235DD; font-weight: 700; text-decoration: none; }
.ssg-link:hover { text-decoration: underline; }

/* --------------------------------------------------- 3. LAYANAN (3 kartu) */
.ssg-layanan { padding: 100px 0; background: #F0F1FD; }
.ssg-kepala { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.ssg-kepala h2 { font-size: 34px; line-height: 1.25; }
.ssg-kartu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ssg-kartu {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(19, 23, 57, .07);
  display: flex;
  flex-direction: column;
}
.ssg-kartu img { width: 100%; height: 240px; object-fit: cover; }
.ssg-kartu__isi { padding: 30px 28px 34px; display: flex; flex-direction: column; flex: 1; }
.ssg-kartu h3 { font-size: 24px; line-height: 1.3; margin-bottom: 12px; }
.ssg-kartu p { color: #475569; margin-bottom: 20px; flex: 1; }

/* -------------------------------------------- 4. CARA KAMI BEKERJA (3 langkah) */
.ssg-proses {
  background-image: url(bg-proses.jpg);
  background-size: cover;
  background-position: 50% 50%;
  padding: 100px 0 120px;
}
.ssg-proses .ssg-kepala h2 { color: #fff; }
.ssg-proses .ssg-kepala p { color: rgba(255, 255, 255, .85); }
.ssg-langkah-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ssg-langkah { background: #05060F; padding: 48px 40px; border-radius: 12px; }
.ssg-langkah__no {
  font-family: "Lexend", sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: #2235DD;
  line-height: 1;
  margin-bottom: 18px;
}
.ssg-langkah h3 { color: #fff; font-size: 24px; margin-bottom: 14px; }
.ssg-langkah p { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------- 5. CTA + KEUNGGULAN (3 kartu) */
.ssg-keunggulan { background: #F0F1FD; padding: 0 0 100px; }
.ssg-cta-kotak {
  background: #05060F;
  padding: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: -60px;
  position: relative;
  z-index: 2;
}
.ssg-cta-kotak h2 { color: #fff; font-size: 30px; line-height: 1.3; max-width: 22em; }
.ssg-nilai { padding-top: 80px; }
.ssg-nilai .ssg-kartu { box-shadow: 0 10px 30px rgba(19, 23, 57, .06); }

/* ---------------------------------------------------- 6. TESTIMONI KLIEN */
.ssg-testi { background: #fff; padding: 100px 0; }
.ssg-bintang { color: #F59E0B; font-size: 20px; letter-spacing: 3px; margin: 4px 0 8px; }
.ssg-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ssg-testi-kartu {
  background: #F7F8FE;
  border: 1px solid #E6E8F7;
  border-radius: 12px;
  padding: 34px 30px;
}
.ssg-testi-kartu p { color: #334155; font-style: italic; margin-bottom: 24px; }
.ssg-klien { display: flex; align-items: center; gap: 14px; }
.ssg-klien img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.ssg-klien b { display: block; font-size: 15px; color: #05060F; }
.ssg-klien span { font-size: 13px; color: #64748B; }

/* ------------------------------------------------------------ 7. CTA AKHIR */
.ssg-akhir {
  background-image: url(bg-hero.jpg);
  background-size: cover;
  background-position: 50% 50%;
  padding: 110px 0 130px;
  text-align: center;
}
.ssg-akhir h2 { color: #fff; font-size: 34px; margin-bottom: 18px; }
.ssg-akhir p { color: rgba(255, 255, 255, .88); margin-bottom: 30px; }
.ssg-akhir .ssg-eyebrow { color: #9FB0FF; }

/* ------------------------------------------------------------- RESPONSIF */
@media (max-width: 1024px) {
  .ssg-hero__kotak h1 { font-size: 38px; }
  .ssg-kartu-grid, .ssg-langkah-grid, .ssg-testi-grid { grid-template-columns: 1fr 1fr; }
  .ssg-tentang__grid { gap: 44px; }
}
@media (max-width: 800px) {
  .ssg-dalam { padding: 0 22px; }
  .ssg-hero { min-height: auto; padding: 60px 0; }
  .ssg-hero__kotak { padding: 40px 26px; }
  .ssg-hero__kotak h1 { font-size: 30px; }
  .ssg-tentang, .ssg-layanan, .ssg-testi { padding: 64px 0; }
  .ssg-proses { padding: 64px 0 80px; }
  .ssg-tentang__grid, .ssg-kartu-grid, .ssg-langkah-grid, .ssg-testi-grid { grid-template-columns: 1fr; }
  .ssg-tentang__gambar img { height: 300px; }
  .ssg-tentang__gambar img:last-child { margin-top: 0; }
  .ssg-kepala h2, .ssg-tentang h2, .ssg-akhir h2 { font-size: 26px; }
  .ssg-cta-kotak { padding: 38px 26px; margin-top: -40px; }
  .ssg-cta-kotak h2 { font-size: 22px; }
}


/* ==========================================================================
   TAMBAHAN 18 Sep 2026 — halaman TENTANG (About Us) & BLOG
   Struktur disalin dari computed style suryasaputragemilang.com/about/ & /blog/
   ========================================================================== */

/* ------------------------------------------------------- HERO halaman dalam */
.ssg-hero2 {
  background-image: url(bg-proses.jpg);
  background-size: cover;
  background-position: 50% 50%;
  padding: 90px 0 70px;
  min-height: 560px;
}
.ssg-kotak-gelap {
  background: #05060F;
  padding: 64px 58px 58px;
  max-width: 780px;
  border-radius: 4px;
}
.ssg-hero2 h1 { font-size: 50px; line-height: 1.15; color: #fff; }
.ssg-hero2 .ssg-eyebrow { color: #9FB0FF; }
.ssg-hero2__gif { width: 150px; height: auto; margin-top: 28px; }

/* -------------------------------------------------------- Profil / Sejarah */
.ssg-dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.ssg-dua-kolom h2 { font-size: 34px; line-height: 1.25; margin-bottom: 20px; }
.ssg-dua-kolom p { color: #475569; margin-bottom: 18px; }
.ssg-dua-kolom img { width: 100%; border-radius: 12px; object-fit: cover; }
.ssg-profil { padding: 100px 0; background: #fff; }
.ssg-sejarah { padding: 0 0 100px; background: #fff; }

/* ---------------------------------------------------------- Misi & Nilai -- */
.ssg-misi {
  background-image: url(who-we-are.jpg);
  background-size: cover;
  background-position: 50% 50%;
  padding: 100px 0;
}
.ssg-misi .ssg-kepala h2 { color: #fff; }
.ssg-misi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.ssg-misi-kartu { background: #05060F; padding: 46px 42px; border-radius: 12px; }
.ssg-misi-kartu h3 { color: #fff; font-size: 24px; margin-bottom: 14px; }
.ssg-misi-kartu p { color: rgba(255, 255, 255, .8); }

/* =================================================================== BLOG == */
.ssg-blog { background: #F0F1FD; padding: 70px 0 110px; }
.ssg-blog__judul { font-size: 42px; line-height: 1.2; text-align: center; max-width: 20em; margin: 0 auto 56px; }
.ssg-blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.ssg-blog-kartu {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(19, 23, 57, .06);
  display: flex;
  flex-direction: column;
}
.ssg-blog-kartu__gambar { width: 100%; height: 240px; object-fit: cover; }
.ssg-blog-kartu__isi { padding: 30px 30px 34px; display: flex; flex-direction: column; flex: 1; }
.ssg-blog-kartu h2 { font-size: 23px; line-height: 1.3; margin-bottom: 10px; }
.ssg-blog-kartu h2 a { color: #05060F; text-decoration: none; }
.ssg-blog-kartu h2 a:hover { color: #2235DD; }
.ssg-blog-tgl { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748B; margin-bottom: 12px; }
.ssg-blog-kartu p { color: #475569; margin-bottom: 20px; flex: 1; }

/* -------------------------------------------------------- Detail artikel -- */
.ssg-artikel { background: #fff; padding: 60px 0 100px; }
.ssg-artikel__dalam { max-width: 840px; margin: 0 auto; }
.ssg-artikel h1 { font-size: 38px; line-height: 1.25; color: #05060F; margin-bottom: 14px; }
.ssg-artikel__isi { font-size: 17px; }
.ssg-artikel__isi p { color: #334155; margin-bottom: 18px; }
.ssg-artikel__gambar { width: 100%; border-radius: 12px; margin-bottom: 30px; }
.ssg-artikel__kembali { display: inline-block; margin-bottom: 26px; color: #2235DD; font-weight: 700; text-decoration: none; }

@media (max-width: 800px) {
  .ssg-hero2 { min-height: auto; padding: 56px 0; }
  .ssg-hero2 h1 { font-size: 30px; }
  .ssg-kotak-gelap { padding: 36px 24px; }
  .ssg-dua-kolom, .ssg-misi-grid, .ssg-blog-grid { grid-template-columns: 1fr; gap: 34px; }
  .ssg-dua-kolom h2 { font-size: 26px; }
  .ssg-blog__judul { font-size: 28px; }
  .ssg-blog-kartu h2 { font-size: 20px; }
  .ssg-artikel h1 { font-size: 27px; }
  .ssg-profil { padding: 64px 0; }
}