/* ==========================================================================
   Home v2 — Pixelzenic website v3 (Figma node 185:3)

   File `site/index.html` (dulu index2.html, dibangun terpisah dari index.html
   versi lama yang sudah dihapus Sep 2026 — index2.html jadi standar layout
   baru dan di-rename jadi index.html). Body class .page-home2, semua aturan
   di file ini di-scope ke class itu — layout.css TIDAK disentuh.

   Beda utama dari home.css (sudah dihapus — cuma dipakai index.html lama):
   - Hero tanpa animated background. Sistem posisi header/hero "page--shell"
     (negative margin buat nutupin canvas) tidak dipakai — diganti padding
     dokumen biasa. Ini yang sekarang jadi standar di semua halaman (hero-bg /
     ASCII canvas / js/ascii-bg.js sudah dihapus total dari seluruh project).
   - Icon Services/Why turun ke 60px (dari 100px), dipakai lewat pola
     .list-row yang sama juga buat Work Projects.
   - CTA (partial contact.html, dipakai apa adanya) di-override polos putih,
     tanpa dua glow blur.
   - Strip glyph 200px di bawah footer (.glyph-strip, CSS murni, nol JS) —
     sekarang komponen global di css/sections.css, dipakai semua halaman.
   ========================================================================== */

.page-home2 {
  /* Sama persis dengan token layout.css .page--shell, biar lebar container
     index2 identik dengan index.html. */
  --shell-max: 1360px;
  --col: 780px;
  --sec-pad-top: 160px;
  --col-gutter: 0px;

  position: relative;
  background: var(--c-surface);
}

/* --- 1. Shell + kolom ----------------------------------------------------- */
.page-home2 .shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  background: transparent;
}

.page-home2 .sec__col {
  width: min(var(--col), 100% - var(--col-gutter) * 2);
  margin-inline: auto;
}

.page-home2 .sec {
  padding-top: var(--sec-pad-top);
}

.page-home2 .sec__head {
  margin-bottom: 40px;
}

.page-home2 .sec__head--tight {
  margin-bottom: 0;
}

/* --- 2. Header -------------------------------------------------------------
   Sticky standar (behavior warna dari sections.css + js/main.js, tidak
   disentuh). Bar full-bleed, isinya center di kolom 780px — tanpa margin-top
   raksasa punya .page--shell karena tidak ada animated glyph yang perlu
   ditutupi. */
.page-home2 .site-header {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
  padding-top: 100px;
}

.page-home2 .site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--col), 100% - var(--col-gutter) * 2);
  margin-inline: auto;
}

/* Padding header saat sudah di-scroll (state .site-header--scrolled), samain sama index.html.
   Physical longhand (bukan padding-block) — dicampur sama padding-top di rule atas bikin
   transition CSS-nya macet di nilai lama. */
.page-home2 .site-header--scrolled {
  padding-top: var(--header-pad-y-sm);
  padding-bottom: var(--header-pad-y-sm);
}

/* --- 3. Hero — tanpa animated background ----------------------------------- */
.page-home2 .hero {
  padding-top: 100px;
}

.page-home2 .hero__title {
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.12;
  max-width: var(--col);
}

.page-home2 .hero__lead {
  margin-top: 32px;
  max-width: var(--col);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
}

.page-home2 .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 60px;
}

.page-home2 .btn { font-size: 14px; gap: 16px; }
.page-home2 .btn--lg { height: 56px; padding-inline: 33px; }
.page-home2 .btn--sm { height: 46px; padding-inline: 25px; font-size: 13px; gap: 12px; }
.page-home2 .btn--block { height: 58px; }

/* Tombol gradient (Primary) — tanpa border kiri. */
.page-home2 .btn--primary { border-left: none; }

/* --- 4. List-row — dipakai bareng Work Projects, Services, Why ------------
   Struktur: <a/article class="list-row panel"><div class="panel__content
   list-row__inner"> icon + body (+ arrow) </div></a>
   Border-bottom nempel di .list-row (elemen panel), bukan di isinya, supaya
   tidak ikut ke-clip aneh waktu animasi panel-expand jalan. */
.page-home2 .list {
  width: 100%;
}

.page-home2 .list-row {
  display: block;
  border-bottom: 1px solid var(--c-accent-orange);
  color: inherit;
  text-decoration: none;
}

.page-home2 .list > .list-row:last-child { border-bottom: none; }

.page-home2 .list-row__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 20px;
}

.page-home2 a.list-row:hover .list-row__title,
.page-home2 a.list-row:hover .list-row__arrow { color: var(--c-accent-orange); }

.page-home2 .list-row__icon {
  flex: none;
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Placeholder Work Projects (icon asli belum ada) — pola sama dengan
   .work-card__media di index.html. */
.page-home2 .list-row__icon--tile {
  border: 1px solid var(--c-border);
  background: var(--c-surface-tint);
}

.page-home2 .list-row__body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-home2 .list-row__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--fw-light);
  letter-spacing: -0.01em;
  color: var(--c-text);
  transition: color 180ms ease;
}

.page-home2 .list-row__desc {
  font-size: var(--fs-body-2);
  line-height: var(--lh-lead);
  color: var(--c-text);
}

.page-home2 .list-row__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--c-text);
}

/* --- 5. Work Projects ------------------------------------------------------- */
.page-home2 .work-projects {
  padding-bottom: 100px;
}

.page-home2 .work-projects .list {
  padding-top: 0;
}

/* --- 6. Problem / Positioning ------------------------------------------------ */
.page-home2 .problem {
  /* Garis pemisah orange 1px antara section Work Projects dan Problem/Positioning.
     width: 100vw + margin offset biar full-bleed edge-to-edge, jaga-jaga ada parent
     yang constrain lebar section ini. */
  border-top: 1px solid var(--c-accent-orange);
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.page-home2 .problem__text {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-light);
  letter-spacing: -0.005em;
}

/* --- 7. Services / Why — pakai .list-row juga ------------------------------- */
.page-home2 .services .list,
.page-home2 .why .list {
  padding-top: 0;
}

/* --- 8. How We Work ----------------------------------------------------------- */
.page-home2 ol.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home2 ol.steps .step {
  display: flex;
  align-items: flex-start;
  gap: 0;
  height: auto;
  min-height: 75px;
  padding-block: 20px;
  background: none;
  border-bottom: 1px solid var(--c-accent-orange);
}
.page-home2 ol.steps .step:last-child { border-bottom: none; }

.page-home2 .step__num {
  flex: none;
  width: 60px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--fw-light);
  color: var(--c-accent-orange);
}

.page-home2 .step__text {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: var(--fw-regular);
  color: var(--c-text);
}

/* --- 9. CTA — sekarang jadi tampilan default global di css/sections.css
   (polos putih, tanpa glow, sama seperti index.html). Override khusus
   halaman ini sudah tidak dibutuhkan lagi. */

/* --- 10. Glyph strip — dipindah ke css/sections.css (komponen global, dipakai
   semua halaman sejak restructure Sep 2026), bukan cuma di sini lagi. ------- */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
  .page-home2 { --sec-pad-top: 120px; }
}

@media (max-width: 1024px) {
  .page-home2 { --col-gutter: 40px; }
}

@media (max-width: 768px) {
  .page-home2 { --sec-pad-top: 80px; }
  .page-home2 .hero { padding-top: 60px; }
  .page-home2 .hero__lead { font-size: var(--fs-body-1); }
  .page-home2 .hero__actions .btn { width: 100%; }
  .page-home2 .problem__text { font-size: 32px; }
  .page-home2 .list-row__inner { flex-wrap: wrap; }
  .page-home2 .list-row__icon { width: 48px; height: 48px; }
  .page-home2 ol.steps .step { align-items: flex-start; }
  .page-home2 .step__num { width: 44px; }
  .page-home2 .step__text { font-size: 20px; }
}

@media (max-width: 520px) {
  .page-home2 { --col-gutter: 20px; }
}