/* =========================================================
   HIKMAT PRINTING — ABOUT, SERVICES, PROJECTS, CONTACT
   Navbar global ada di styles.css. Jangan mendeklarasikan
   .navbar lagi di file ini agar tidak bertabrakan.
   ========================================================= */

/* HERO HALAMAN DALAM — sama tinggi dengan hero pada Home. */
.inner-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
}

.inner-hero__image,
.inner-hero__overlay { position: absolute; inset: 0; }
.inner-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.inner-hero__overlay {
  background:
    linear-gradient(90deg, rgba(8, 32, 30, .82), rgba(8, 32, 30, .48) 50%, rgba(8, 32, 30, .20)),
    linear-gradient(180deg, rgba(8, 32, 30, .28), rgba(8, 32, 30, .22));
}

.inner-hero__copy {
  position: relative;
  z-index: 2;
  width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  padding: clamp(150px, 20vh, 220px) 0 90px;
}

.inner-hero h1 {
  width: min(850px, 100%);
  margin: 0;
  font-size: clamp(46px, 4.8vw, 76px);
  line-height: 1.08;
  letter-spacing: -1.5px;
}

.inner-hero p { max-width: 600px; margin: 18px 0 0; font-weight: 700; }

.page-section { width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2))); margin: 0 auto; padding: clamp(64px, 7vw, 92px) 0; }
.page-intro { max-width: 700px; margin-bottom: 55px; }
.page-intro h2,
.split-copy h2,
.contact-card h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.12; }
.page-intro p,
.split-copy p,
.contact-card p,
.service-page-card p { color: var(--muted); }

/* Foto di sebelah teks About dibuat proporsional agar tidak makan tempat. */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-media img { width: 100%; height: clamp(280px, 28vw, 420px); border-radius: 18px; background: var(--green-100); box-shadow: var(--shadow); object-fit: contain; }
.check-list { padding: 0; list-style: none; font-weight: 800; }
.check-list li { margin: 11px 0; }
.check-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--yellow); color: var(--green-900); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; padding: 45px; border-radius: 18px; background: var(--green-900); color: var(--white); }
.stats strong { display: block; font-size: 45px; line-height: 1; color: var(--yellow); }
.stats span { font-weight: 700; }

.service-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-page-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.service-page-card img { width: 100%; height: 190px; background: var(--green-100); object-fit: contain; }
.service-page-card div { padding: 24px; }
.service-page-card h3 { margin: 0; font-size: 23px; }

.project-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project-page-grid figure { position: relative; height: 270px; margin: 0; overflow: hidden; border-radius: 16px; }
.project-page-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.project-page-grid figure:hover img { transform: scale(1.05); }
.project-page-grid figcaption { position: absolute; inset: auto 0 0; padding: 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: var(--white); font-size: 19px; font-weight: 900; }

.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; }
.contact-card { padding: 38px; border-radius: 18px; background: var(--green-100); }
.contact-links { display: grid; gap: 14px; margin-top: 28px; }
.contact-links a { padding: 16px 18px; border-radius: 12px; background: var(--white); color: var(--ink); font-weight: 800; }
.map-placeholder { min-height: 420px; overflow: hidden; border-radius: 18px; background: #f3faf6; color: var(--muted); text-align: center; }
.map-placeholder iframe { display: block; width: 100%; height: 365px; border: 0; }
.map-link { display: inline-block; margin: 13px; color: var(--green-900); font-weight: 900; }

.page-cta { padding: 64px 20px; background: var(--green-900); color: var(--white); text-align: center; }
.page-cta h2 { max-width: 720px; margin: 0 auto 18px; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; }
.page-cta p { max-width: 600px; margin: 0 auto 30px; }
.site-footer { padding: 18px 20px 28px; border-top: 1px solid var(--line); background: var(--green-100); color: var(--muted); text-align: center; }
.site-footer p { margin: 0; }

@media (max-width: 1020px) {
  .service-page-grid,
  .project-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .inner-hero__copy { padding-top: 125px; padding-bottom: 80px; }
  .inner-hero h1 { font-size: clamp(39px, 11vw, 52px); }
  .page-section { padding-top: 60px; padding-bottom: 60px; }
  .split,
  .contact-layout,
  .service-page-grid,
  .project-page-grid,
  .stats { grid-template-columns: 1fr; }
  .split-media img { height: 280px; }
  .stats { padding: 30px; }
  .project-page-grid figure { height: 235px; }
  .site-footer { padding-bottom: 94px; }
}