/*
Theme Name: NAFIYA
Theme URI: https://nafiya.example
Author: PT Nafiya Perkasa Distribusi
Author URI: https://nafiya.example
Description: Tema WordPress NAFIYA - tujuh halaman company profile, konversi 1:1 dari "Web Nafiya REV.pdf". Tata letak dirender langsung oleh template PHP sehingga keluarannya identik dengan versi HTML statis, dan pembaruan tema langsung terlihat di situs.
Version: 3.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nafiya
*/

/* ============================================================
   NAFIYA — responsive trial stylesheet (index-responsive.html)
   Design language dari Web Nafiya REV.pdf:
   - biru #235ba5/#235ba3, navy #09345b, footer #1b4d86
   - Space Grotesk (heading) / Figtree (body) / Quicksand (caption)
   - garis pembagi tipis 1.3px, segitiga sudut 44px, blok warna solid
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/Figtree-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/Figtree-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Quicksand';
  src: url('assets/fonts/Quicksand-Regular.ttf') format('truetype');
  font-weight: 400;
}

:root {
  --blue: #235ba5;
  --blue-2: #235ba3;
  --blue-3: #235ba4;
  --blue-dark: #1b4d86;
  --navy: #09345b;
  --blue-btn: #3f7ab8;
  --text-blue: #295b9e;
  --line-w: 1.3px;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Figtree', sans-serif;
  --caption: 'Quicksand', sans-serif;
  --maxw: 1280px;
  --pad: clamp(20px, 9vw, 115px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: #fff; color: var(--text-blue); }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; }
.h-section { font-size: clamp(30px, 3.6vw, 44px); }

p.lead {
  font-size: 16px; line-height: 1.9; color: var(--text-blue);
  text-align: justify;
}

/* --- tombol --- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; }
.btn-hero { background: var(--blue-btn); color: #fff; font-weight: 500; font-size: clamp(17px, 2.15vw, 21.8px); padding: 4px 22px; min-height: 34px; }
.btn-hero:hover { background: #4d88c6; }
.btn-link { color: #fff; font-size: 16px; font-weight: 600; }
.btn-link .arrow { display: inline-block; margin-left: 10px; transform: translateY(1px); }
.btn-link:hover { text-decoration: underline; }
.btn-solid { background: var(--blue-2); color: #fff; font-size: 18px; padding: 6px 19px; min-height: 32px; }
.btn-solid:hover { background: var(--blue-dark); }
.btn-ghost { background: #fff; color: var(--blue); font-size: 16px; padding: 5px 17px; min-height: 28px; }
.btn-ghost:hover { background: #e8eef7; }
.btn-white { background: #fff; color: var(--blue); font-size: 18px; padding: 6px 23px; min-height: 34px; }
.btn-white:hover { background: #e8eef7; }

/* --- segitiga sudut khas (44px) --- */
.tri { position: absolute; width: 44px; height: 44px; }
.tri-tr { clip-path: polygon(100% 100%, 0 0, 100% 0); }
.tri-bl { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.tri-br { clip-path: polygon(100% 0, 0 100%, 100% 100%); }

/* ============ NAV ============ */
.nav {
  background: var(--blue-2);
  border-bottom: var(--line-w) solid #fff;
  position: relative; z-index: 50;
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 58px);
  height: 81px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo img { width: clamp(105px, 10vw, 126px); }
.nav-menu { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 36px); }
.nav-menu a {
  color: #fff; font-family: var(--display); font-size: 15px; padding: 4px 0;
}
.nav-menu a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-menu a.active { border-bottom: 1px solid #fff; padding-bottom: 6px; }
.nav-lang { color: #fff; font-family: var(--display); font-size: 12px; margin-left: clamp(10px, 6vw, 96px);
  cursor: pointer; background: none; border: 0; padding: 4px 2px; letter-spacing: .04em; }
.nav-lang:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-lang::after { content: '⌄'; margin-left: 6px; font-size: 11px; }
#nav-toggle, .nav-burger { display: none; }

/* ============ HERO ============ */
.hero { background: var(--blue); color: #fff; position: relative; overflow: hidden; }

/* --- hero berlatar video (revisi klien 21/08) --- */
.hero.has-video { display: flex; align-items: center; min-height: min(78vh, 700px); }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.hero-veil { position: absolute; inset: 0; background: var(--blue); opacity: .58; z-index: 1; }
.hero.has-video .hero-inner { position: relative; z-index: 2; width: 100%; }
/* Di bawah ~1150px kotak hero lebih "tinggi" daripada rasio video (1280/780),
   sehingga object-fit: cover memotong sisi kiri-kanan (di 375px sampai 68%).
   Samakan rasio hero dengan rasio video supaya video tampil UTUH tanpa terpotong. */
@media (max-width: 1150px) {
  .hero.has-video { min-height: 0; aspect-ratio: 1280 / 780; }
  .hero-video { object-fit: contain; }
  .hero-inner { padding-top: 0; padding-bottom: 0; }
}

/* hemat gerak: video disembunyikan, poster tetap tampil sebagai latar */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero.has-video { background: var(--blue) url('assets/images/video/hero-poster.jpg') center/cover; }
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  padding-top: clamp(60px, 12vw, 150px); padding-bottom: clamp(52px, 10vw, 128px);
  display: flex; justify-content: center;            /* revisi klien: logo dibuat center */
}
.hero-logo { width: clamp(240px, 41vw, 525px); }
/* garis & segitiga dekoratif kanan-atas */
.hero-decor { position: absolute; inset: 0; pointer-events: none; }
.hero-decor .v1 { position: absolute; left: 77.3%; top: 0; width: var(--line-w); height: 63%; background: #fff; }
.hero-decor .h1 { position: absolute; left: 77.3%; top: 207px; right: 0; height: var(--line-w); background: #fff; }
.hero-decor .v2 { position: absolute; left: 83.4%; top: 207px; width: var(--line-w); height: 100%; background: #fff; }
.hero-decor .tri { left: 77.3%; top: 163px; background: #fff; clip-path: polygon(100% 100%, 0 0, 100% 0); transform: translateX(1px); }
.hero-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 77.3%; margin-top: clamp(48px, 8vw, 103px);
}
.hero-strip .ph { aspect-ratio: 330 / 185; overflow: hidden; }
.hero-strip .ph img { width: 100%; height: 100%; object-fit: cover; }
.hero-tail { height: clamp(60px, 12vw, 152px); }

/* pita putih bawah hero (jeda visual, meneruskan garis) */
.hero-gap { background: #fff; height: clamp(90px, 19vw, 250px); position: relative; }
.hero-gap .v { position: absolute; left: 34.5%; top: 0; bottom: 0; width: var(--line-w); background: var(--blue); }
.hero-gap .tri { left: calc(34.5% - 44px); bottom: 0; background: var(--blue); clip-path: polygon(100% 0, 0 100%, 100% 100%); }

/* ============ OUR STORY ============ */
.story { background: #fff; position: relative; }
.story-grid {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2.2fr;
  gap: clamp(28px, 4vw, 84px);
  padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(48px, 8vw, 110px);
  padding-left: clamp(20px, 32vw, 410px);
  padding-right: var(--pad);
}
.story h2 { color: var(--text-blue); }

/* ============ ABOUT ============ */
.about { border-top: var(--line-w) solid var(--blue); position: relative; }
.about-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.9fr 1.1fr;
  align-items: stretch;
}
.about-text {
  padding: clamp(28px, 5vw, 72px) clamp(24px, 5vw, 60px) clamp(36px, 6vw, 72px) var(--pad);
}
.about-text h2 { color: var(--text-blue); margin-bottom: clamp(16px, 2.5vw, 34px); }
.about-text .lead { max-width: 602px; margin-bottom: clamp(22px, 3vw, 38px); }
.about-photo { position: relative; border-left: var(--line-w) solid var(--blue); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }

/* ============ SERVICE LIST ============ */
.services { background: var(--blue-2); color: #fff; position: relative; padding-bottom: clamp(40px, 6vw, 84px); }
.services-head {
  display: flex; justify-content: flex-end;
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(24px, 3vw, 48px);
}
.svc-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 5vw, 76px);
  padding: 0 var(--pad) 0 0;
}
.svc-photo { aspect-ratio: 602 / 304; overflow: hidden; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-body { padding: clamp(20px, 3vw, 48px) clamp(20px, 3vw, 46px) 0; }
.svc-body h3 { font-size: 28px; margin-bottom: 14px; }
.svc-body p { font-size: 16px; line-height: 1.9; max-width: 420px; margin-bottom: 22px; }
.svc-production { margin-top: clamp(40px, 11vw, 166px); }
.svc-ideation .svc-body { border-left: var(--line-w) solid #fff; margin-left: var(--pad); padding-left: clamp(20px, 2vw, 26px); }

/* ============ PORTFOLIO ============ */
.portfolio { background: #fff; position: relative; padding-bottom: clamp(44px, 6vw, 90px); }
.portfolio-head {
  display: flex; justify-content: flex-end;
  padding: clamp(28px, 5vw, 94px) var(--pad) clamp(24px, 3vw, 60px);
}
.portfolio-head h2 { color: var(--blue); }
.pf-rows { max-width: 1050px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 0px); }
.pf-row { display: flex; }
.pf-card { position: relative; overflow: hidden; color: #fff; }
.pf-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pf-grad {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, rgba(11,49,96,0) 8%, rgba(11,49,96,.9) 100%);
}
.pf-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 26px; display: flex; align-items: flex-end; gap: 14px; }
.pf-year { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.5vw, 40px); line-height: 1; }
.pf-label p { font-family: var(--caption); font-size: 13px; line-height: 1.4; max-width: 200px; }
.pf-2020 { flex: 456; aspect-ratio: 456 / 346; }
.pf-2021 { flex: 297; aspect-ratio: 297 / 346; }
.pf-2022 { flex: 297; aspect-ratio: 297 / 346; }
.pf-2023 { flex: 268; aspect-ratio: 268 / 242; }
.pf-2024 { flex: 267; aspect-ratio: 267 / 242; }
.pf-2025 { flex: 515; aspect-ratio: 515 / 242; }
.pf-card:hover img { transform: scale(1.04); transition: transform .4s ease; }

/* ============ CTA ============ */
.cta { background: var(--blue-3); color: #fff; position: relative; }
.cta-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: center;
}
.cta-text { padding: clamp(36px, 6vw, 80px) clamp(24px, 4vw, 60px) clamp(36px, 6vw, 80px) var(--pad); }
.cta-text h2 { font-size: clamp(27px, 3.25vw, 39px); line-height: 1.28; max-width: 420px; margin-bottom: clamp(24px, 3vw, 40px); }
.cta-photo { position: relative; border-left: var(--line-w) solid #fff; }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }

/* ============ FIND US ON ============ */
/* ============ FOOTER ============ */
.footer { background: var(--blue-dark); color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1.45fr .8fr 1.15fr;
  gap: clamp(24px, 3vw, 48px); align-items: start;
  padding-top: clamp(40px, 5vw, 58px); padding-bottom: clamp(40px, 5vw, 58px);
}
.footer-logo { width: 100%; max-width: clamp(220px, 26vw, 333px); }
.footer h4 { font-family: var(--display); font-size: 25.4px; margin-bottom: 18px; }
.f-list { list-style: none; }
.f-list li { margin-bottom: 13px; }
.f-list a { font-family: var(--display); font-weight: 500; font-size: 16px; }
.f-list a::before { content: '›'; margin-right: 10px; }
.f-list a:hover { text-decoration: underline; }

/* kolom kiri: logo -> kolom email -> ikon sosmed (mockup 21/08) */
.f-brand { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(26px, 3.4vw, 46px); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* kolom grid boleh menyusut; email panjang dibuat bisa membungkus */
.footer-grid > * { min-width: 0; }
.f-loc a { overflow-wrap: anywhere; }
.f-loc p { font-size: 16px; line-height: 1.7; }
.f-loc p.f-ws { margin-top: 12px; }
.f-loc a { font-weight: 600; font-size: 16px; }
.f-loc a:hover { text-decoration: underline; }

/* --- ikon sosmed + kolom email di footer --- */
.soc-row { display: flex; gap: 18px; }
.soc {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .9; transition: opacity .2s ease, transform .2s ease;
}
.soc svg { width: 26px; height: 26px; }
.soc:hover { opacity: 1; transform: translateY(-2px); }
.f-sub { width: 100%; max-width: 420px; }
.f-sub input {
  width: 100%; background: none; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.75);
  color: #fff; font-family: var(--body); font-size: 17px; padding: 4px 0 12px;
}
.f-sub input::placeholder { color: rgba(255,255,255,.85); }
.f-sub input:focus { outline: none; border-bottom-color: #fff; }

/* label lokasi di atas peta */
.map-label { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--blue); margin-bottom: 12px; }

@media (max-width: 1024px) {
  /* footer 4 kolom terlalu sempit di tablet -> 2 kolom */
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 38px; align-items: start; }
  .f-brand { grid-column: 1 / -1; }
  .story-grid { padding-left: clamp(20px, 12vw, 150px); }
  .svc-grid { column-gap: 24px; }
  .svc-production { margin-top: 60px; }
}

/* ============ MOBILE ≤ 700px ============ */
@media (max-width: 700px) {
  /* nav -> hamburger */
  .nav-inner { height: 64px; }
  .nav-burger {
    display: block; cursor: pointer; width: 26px; height: 20px; position: relative;
  }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    content: ''; position: absolute; left: 0; width: 26px; height: 2.6px; background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-burger span { top: 9px; }
  .nav-burger span::before { top: -8px; }
  .nav-burger span::after { top: 8px; }
  .nav-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy); flex-direction: column; align-items: flex-start;
    padding: 18px clamp(16px, 4.5vw, 58px) 24px; gap: 16px;
    border-bottom: var(--line-w) solid #fff;
  }
  #nav-toggle:checked ~ .nav-menu { display: flex; }
  #nav-toggle:checked ~ .nav-burger span { transform: rotate(45deg); }
  #nav-toggle:checked ~ .nav-burger span::before { transform: rotate(-90deg) translateX(-8px); }
  #nav-toggle:checked ~ .nav-burger span::after { opacity: 0; }
  .nav-menu a { font-size: 16px; }
  .nav-lang { margin-left: 0; }

  /* hero */
  .hero-gap { height: 56px; }
  .hero-gap .v { left: 24px; }
  .hero-gap .tri { display: none; }

  /* sections -> tumpuk */
  .story-grid { grid-template-columns: 1fr; padding-left: var(--pad); gap: 16px; }
  .about-grid, .cta-grid { grid-template-columns: 1fr; }
  .about-photo { border-left: none; border-top: var(--line-w) solid var(--blue); }
  .about-photo img { max-height: 320px; }
  .cta-photo { border-left: none; border-top: var(--line-w) solid #fff; }
  .cta-photo img { max-height: 300px; }

  .services-head, .portfolio-head { justify-content: flex-start; }
  .svc-grid { grid-template-columns: 1fr; padding-right: 0; row-gap: 40px; }
  .svc-production { margin-top: 0; }
  .svc-ideation .svc-body { margin-left: 0; border-left: none; padding-left: var(--pad); }
  .svc-body { padding-left: var(--pad); padding-right: var(--pad); }

  .pf-row { flex-direction: column; }
  .pf-card { aspect-ratio: 375 / 260 !important; }
  .pf-rows { padding: 0 16px; }

  .footer-grid { grid-template-columns: 1fr; align-items: start; gap: 30px; }
}

/* ================================================================
   Komponen halaman lain (about / service / product / portfolio / contact)
   ================================================================ */

/* --- banner judul halaman (foto 30% di atas navy) --- */
.banner { position: relative; background: var(--navy); overflow: hidden; }
.banner-photos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); opacity: .3; }
/* Lebar tiap foto banner berbeda-beda per halaman di rancangan — bukan sepertiga
   sama rata. Angkanya dibaca dari render "Web Nafiya REV.pdf". Service memang
   hanya 2 foto; tanpa aturan ini kolom ketiganya kosong. */
.bp-about     { grid-template-columns: 349fr 472fr 459fr; }
.bp-service   { grid-template-columns: 741fr 539fr; }
.bp-product   { grid-template-columns: 396fr 500fr 384fr; }
.bp-portfolio { grid-template-columns: 441fr 522fr 317fr; }
.banner-photos img { width: 100%; height: 100%; object-fit: cover; }
/* Foto banner semuanya potret, dipaksa masuk kotak lebar-pendek. Dengan
   object-position bawaan (tengah) yang tampil adalah pita tengah gambar —
   sering justru bagian kosong. Nilai di bawah menyamakan potongannya dengan
   rancangan; dihitung dari kotak penempatan vs kotak potong di PDF. */
.bp-about   img:nth-child(1) { object-position: 50% 50%; }
.bp-about   img:nth-child(2) { object-position: 50% 61%; }
.bp-about   img:nth-child(3) { object-position: 50% 57%; }
.bp-service img:nth-child(1) { object-position: 50% 59%; }
.bp-service img:nth-child(2) { object-position: 50% 61%; }
.bp-product img:nth-child(1) { object-position: 50% 73%; }
.bp-product img:nth-child(2) { object-position: 50% 41%; }
.bp-product img:nth-child(3) { object-position: 50% 56%; }
.bp-portfolio img:nth-child(1) { object-position: 50% 45%; }
.bp-portfolio img:nth-child(2) { object-position: 50% 41%; }
.bp-portfolio img:nth-child(3) { object-position: 50% 38%; }
.banner h1 { position: relative; text-align: center; color: #fff; font-size: clamp(30px, 3.6vw, 44px); padding: clamp(44px, 7vw, 96px) 20px; font-weight: 600; }

/* --- ABOUT --- */
.ab-hero { background: var(--blue); color: #fff; }
.ab-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.645fr 1fr; align-items: end; }
.ab-left { display: flex; flex-direction: column; }
.ab-text { padding: clamp(32px, 6vw, 90px) clamp(24px, 5vw, 64px) clamp(32px, 5vw, 72px) var(--pad); }
.ab-text h2 { margin-bottom: 22px; font-size: clamp(24px, 2.45vw, 30px); }
.ab-text p { font-size: 16px; line-height: 2; text-align: justify; max-width: 520px; }
.ab-photo-wide { flex: none; width: 85.2%; margin-top: auto; }
.ab-photo-wide img, .ab-photo-tall img { width: 100%; height: 100%; object-fit: cover; }
.ab-photo-wide img { max-height: none; height: auto; aspect-ratio: 678 / 193; }
.ab-photo-tall { border-left: var(--line-w) solid #fff; border-bottom: var(--line-w) solid #fff;
  aspect-ratio: 484 / 523; }
.ab-photo-tall img { min-height: 0; }

/* Garis bertingkat khas rancangan di sekitar dua foto hero About: satu garis
   tegak menyusuri tepi kanan foto lebar dari atas seksi, lalu bertemu garis
   mendatar di tepi atas foto tinggi dan di tepi bawah foto lebar. Pertemuan
   kedua garis itu diisi segitiga 44px — motif sudut yang sama dipakai di
   pita bawah hero dan pemisah tahun Portofolio. */
.ab-hero, .ab-left, .ab-photo-wide { position: relative; }
.ab-hero::before, .ab-left::after,
.ab-photo-wide::after, .ab-photo-tall::before, .ab-photo-tall::after {
  content: ''; position: absolute; background: #fff; pointer-events: none;
}
.ab-hero::before      { left: 0; right: 0; top: 0; height: 1px; }
.ab-left::after       { right: 14.8%; top: 0; bottom: 0; width: 1px; }
.ab-photo-wide::after { left: 0; bottom: 0; width: 117.4%; height: 1px; }
.ab-photo-tall::before{ left: -24.4%; right: 0; top: 0; height: 1px; }
.ab-photo-tall::after { left: -24.4%; bottom: 100%; width: 44px; height: 44px;
  clip-path: polygon(100% 100%, 0 100%, 0 0); }

.vm-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; }
.vision { padding: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 56px) 0 var(--pad); }
.vision h2, .mission h2 { font-size: clamp(24px, 2.45vw, 30px); }
.vision p, .mission p { font-size: 16px; line-height: 2; text-align: justify; margin-top: 18px; }
.vision p { max-width: 470px; color: var(--text-blue); }
.vision h2 { color: var(--blue); }
.vision-photos { display: grid; grid-template-columns: 322fr 404fr; margin-top: clamp(24px, 4vw, 48px);
  margin-left: calc(-1 * var(--pad)); }
/* Foto Vision dibatasi garis biru di tepi atas dan bawahnya. Garis bawah
   memanjang selebar wadah: lebar kolom .vision = 1.15fr dari 2.15fr, jadi
   lebar wadah = 2.15/1.15 kali lebar kolom. Ubah juga di sini bila rasio
   kolom .vm-grid diubah. */
.vision, .vision-photos { position: relative; }
.vision-photos::before, .vision::after {
  content: ''; position: absolute; left: 0; height: 1px;
  background: var(--blue); pointer-events: none;
}
.vision-photos::before { right: 0; top: 0; }
.vision::after         { bottom: 0; width: calc(100% * 2.15 / 1.15); }

/* Rasio tiap foto diambil dari artboard (322x245 dan 404x245). Karena
   lebar kolomnya juga 322fr:404fr, tinggi keduanya otomatis sama rata. */
.vision-photos img { width: 100%; height: auto; object-fit: cover; }
/* Ditulis lewat anak langsung, bukan "img:first-child": di editor blok tiap
   gambar terbungkus <figure> sendiri sehingga setiap <img> adalah anak pertama
   sekaligus terakhir wadahnya — selektor lama akan cocok ke semuanya. */
.vision-photos > :first-child, .vision-photos > :first-child img { aspect-ratio: 322 / 245; }
.vision-photos > :last-child,  .vision-photos > :last-child  img { aspect-ratio: 404 / 245; }
.mission { background: var(--blue); color: #fff; margin-top: clamp(40px, 8vw, 130px); padding: clamp(32px, 5vw, 64px) var(--pad) clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px); }

.clients { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--pad) clamp(48px, 7vw, 90px); }
.clients-head { display: flex; align-items: center; gap: 24px; margin-bottom: clamp(28px, 5vw, 56px); }
.clients-head h2 { color: var(--blue); white-space: nowrap; }
.clients-head::after { content: ''; flex: 1; height: var(--line-w); background: var(--blue); }
.clients-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(18px, 2.8vw, 36px); row-gap: clamp(22px, 3.5vw, 44px); }
/* `body` di depan: wp-block-library memasang `.wp-block-image img { max-width: 100% }`
   berkekuatan sama, sehingga logo ikut membesar sampai batas tingginya. */
body .clients-grid img { max-height: clamp(32px, 4.4vw, 56px); max-width: clamp(72px, 10vw, 130px); object-fit: contain; }
.g { filter: grayscale(1); }

/* --- SERVICE --- */
.svcp { background: var(--blue-2); color: #fff; padding-bottom: clamp(40px, 6vw, 80px); }
.svcp.alt { background: #fff; color: var(--text-blue); }
.svcp-head { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 2.1fr; align-items: center; padding: clamp(32px, 5vw, 72px) var(--pad) clamp(28px, 4vw, 56px); gap: clamp(24px, 4vw, 64px); }
.svcp-head h2 { font-size: clamp(29px, 3.6vw, 44px); }
.svcp-head .panel { border: var(--line-w) solid #fff; padding: clamp(20px, 3vw, 44px) clamp(20px, 3.5vw, 52px); font-size: 16px; line-height: 2; text-align: justify; }
.svcp.alt .panel { border-color: var(--blue); }
.svcp-head.rev { grid-template-columns: 2.1fr 1fr; }
.svcp-head.rev h2 { order: 2; text-align: right; }
.svcp-head.rev .panel { order: 1; }
/* Kolase foto Service — geometri diambil dari artboard 1280px rancangan
   awal: foto bertingkat dengan ruang kosong (negative space) biru di
   antaranya, bukan grid rapat. Persentase = posisi/ukuran asli : 1280. */
.mosaic { position: relative; max-width: var(--maxw); margin: 0 auto; }
.mosaic > div { position: absolute; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ideation — bidang asli 1280 x 554 */
.mosaic-i { aspect-ratio: 1280 / 554; }
.mosaic-i .m-w { left: 26.72%; top:  0;     width: 73.28%; height: 41.52%; }
.mosaic-i .m-1 { left:  0;     top: 20.76%; width: 26.64%; height: 79.24%; }
.mosaic-i .m-2 { left: 26.72%; top: 41.34%; width: 26.64%; height: 58.66%; }
.mosaic-i .m-3 { left: 61.72%; top: 57.76%; width: 38.28%; height: 42.24%; }

/* Production — bidang asli 1280 x 555, cerminan dari Ideation */
.mosaic-p { aspect-ratio: 1280 / 555; }
.mosaic-p .m-w { left:  0;     top:  0;     width: 73.28%; height: 41.26%; }
.mosaic-p .m-1 { left: 73.36%; top: 20.54%; width: 26.64%; height: 79.46%; }
.mosaic-p .m-2 { left:  0;     top: 57.30%; width: 38.36%; height: 42.70%; }
.mosaic-p .m-3 { left: 46.56%; top: 41.26%; width: 26.80%; height: 58.74%; }

/* --- Ornamen garis rancangan awal ---
   Di artboard, sela kosong di antara foto dibingkai garis rambut: PUTIH di
   atas blok biru (Ideation) dan BIRU di atas blok putih (Production). Kedua
   himpunan garisnya memang tidak simetris — pada blok biru, tepi atas foto
   kiri & kanan tidak bergaris (sudah diperiksa langsung ke PDF rancangan).
   Digambar lewat pseudo-element sel kolase supaya tidak perlu menambah
   markup — penting karena isi halaman kini berupa blok editor. */
.mosaic > div::before, .mosaic > div::after, .mosaic::after {
  content: ''; position: absolute; background: currentColor; pointer-events: none;
}
.mosaic-i { color: #fff; }
.mosaic-p { color: var(--blue); }

/* Ideation */
.mosaic-i .m-w::before { left: 0; right: 0; top: 0; height: 1px; }
.mosaic-i .m-w::after  { left: 0; right: 0; bottom: 0; height: 1px; }
.mosaic-i .m-2::after  { right: -1px; top: 0; width: 1px; height: 100%; }
.mosaic-i .m-3::before { left: -1px; top: -38.87%; width: 1px; height: 138.87%; }
.mosaic-i::after       { left: 0; right: 0; bottom: 0; height: 1px; }

/* Production — susunan cerminannya */
.mosaic-p .m-w::before { left: 0; right: 0; top: 0; height: 1px; }
.mosaic-p .m-w::after  { left: 0; right: 0; bottom: 0; height: 1px; }
.mosaic-p .m-1::before { left: 0; right: 0; top: 0; height: 1px; }
.mosaic-p .m-2::before { right: -1px; top: -37.56%; width: 1px; height: 137.56%; }
.mosaic-p .m-2::after  { left: 0; right: 0; top: 0; height: 1px; }
.mosaic-p .m-3::before { left: -1px; top: 0; width: 1px; height: 100%; }
.mosaic-p::after       { left: 0; right: 0; bottom: 0; height: 1px; }

/* --- PRODUCT --- */
.prod { padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 6vw, 76px);
  position: relative; overflow: hidden; }
.prod.blue { background: var(--blue); color: #fff; }
.prod.white { background: #fff; color: var(--blue); }
.prod-head { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: flex-end;
  padding: 0 var(--pad) clamp(24px, 4vw, 44px); position: relative; }

/* --- Ornamen kepala seksi Product ---
   Garis melintang selebar halaman, garis tegak yang menurun memotongnya, dan
   segitiga 44px di pertemuannya. Pada seksi biru garis melintang itu berada
   tepat di tepi atas kolase; pada seksi putih di tepi atas seksinya sendiri.
   Garis melintang dibuat -100vw/-100vw lalu dipotong oleh .prod (overflow
   hidden), sehingga selalu selebar halaman tanpa memicu geser mendatar. */
.prod.blue .prod-head::before, .prod.blue .prod-grid::before,
.prod.blue .prod-grid::after, .prod.white::before, .prod.white::after {
  content: ''; position: absolute; pointer-events: none;
}
/* seksi biru */
.prod.blue .prod-head::before { left: -100vw; right: -100vw; bottom: 0; height: var(--line-w); background: #fff; }
.prod.blue .prod-grid::before { left: 32.381%; top: -13.674%; width: var(--line-w); height: 34.432%; background: #fff; }
.prod.blue .prod-grid::after  { left: 32.381%; top: 0; width: 44px; height: 44px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 0 100%); }
/* seksi putih */
.prod.white { border-top: var(--line-w) solid var(--blue); }
.prod.white::before { left: 15.94%; top: 0; width: var(--line-w); height: 192px; background: var(--blue); }
.prod.white::after  { left: 15.94%; top: 0; width: 44px; height: 44px; background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 0 100%); }
.prod-head h2 { font-size: clamp(25px, 2.75vw, 32px); }
/* Kolase foto Product — mozaik rapat, foto bersinggungan tanpa tumpang
   tindih maupun sela. Persentase diambil dari KOTAK POTONG (clip path) di
   Web Nafiya REV.pdf halaman 4, bukan dari kotak penempatan gambarnya:
   artboard menaruh foto berukuran besar lalu memangkasnya ke sel. Blok
   kolase 1050px (x115-1165 pada artboard 1280). */
.prod-grid { position: relative; max-width: 1050px; margin: 0 auto; padding: 0; }
.prod-grid img { width: 100%; height: 100%; object-fit: cover; }
.coll-1 > .prod-item, .coll-2 > .prod-item,
.coll-3 > .prod-item, .coll-4 > .prod-item {
  position: absolute; overflow: hidden; aspect-ratio: auto;
}

/* 1 & 3 — foto kiri-atas menjulang lebih tinggi dari yang lain (1050 x 607) */
.coll-1, .coll-3 { aspect-ratio: 1050 / 607; }
.coll-1 .p-a,   .coll-3 .p-a   { left:  0;       top:  0;      width: 25.143%; height: 54.531%; }
.coll-1 .p-b,   .coll-3 .p-b   { left: 25.143%;  top: 20.758%; width: 25.048%; height: 33.773%; }
.coll-1 .p-big, .coll-3 .p-big { left: 50.190%;  top: 20.758%; width: 49.810%; height: 79.242%; }
.coll-1 .p-c,   .coll-3 .p-c   { left:  0;       top: 54.531%; width: 25.143%; height: 45.469%; }
.coll-1 .p-d,   .coll-3 .p-d   { left: 25.143%;  top: 54.531%; width: 25.048%; height: 45.469%; }

/* 2 — foto besar di kiri, empat foto menyusun sisi kanan (1050 x 481) */
.coll-2 { aspect-ratio: 1050 / 481; }
.coll-2 .p-big { left:  0;      top:  0;      width: 49.810%; height: 100%;    }
.coll-2 .p-a   { left: 49.810%; top:  0;      width: 19.524%; height: 42.827%; }
.coll-2 .p-b   { left: 69.429%; top:  0;      width: 30.571%; height: 42.827%; }
.coll-2 .p-c   { left: 49.810%; top: 42.827%; width: 25.048%; height: 57.173%; }
.coll-2 .p-d   { left: 74.857%; top: 42.827%; width: 25.143%; height: 38.669%; }

/* 4 — sama seperti 2, tapi baris atas kanan satu foto memanjang */
.coll-4 { aspect-ratio: 1050 / 481; }
.coll-4 .p-big { left:  0;      top:  0;      width: 49.810%; height: 100%;    }
.coll-4 .p-w   { left: 49.810%; top:  0;      width: 50.190%; height: 42.620%; }
.coll-4 .p-c   { left: 49.810%; top: 42.620%; width: 25.048%; height: 57.380%; }
.coll-4 .p-d   { left: 74.857%; top: 42.620%; width: 25.143%; height: 38.669%; }
.prod-cap { max-width: 1050px; margin: clamp(20px, 3vw, 34px) auto 0; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 0 16px; }
.prod-cap h3 { font-family: var(--display); font-weight: 600; font-size: 18px; }
.btn-dl { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 12px; padding: 7px 16px; }
.prod.blue .btn-dl { background: #fff; color: var(--blue); }
.prod.white .btn-dl { background: var(--blue); color: #fff; }
.btn-dl svg { width: 15px; height: 15px; }
.btn-dl:hover { opacity: .85; }

/* --- PORTFOLIO --- */
.year-row { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(36px, 5vw, 76px) var(--pad); }
.year-row.rev .yr-text { order: 2; }
.year-row.rev .yr-collage { order: 1; }
.year-row.rev { grid-template-columns: 1.6fr 1fr; }
.yr-text h2 { font-size: clamp(36px, 4.9vw, 54px); color: var(--blue); margin-bottom: 16px; }
.yr-text p { font-size: 16px; line-height: 2; text-align: justify; color: var(--text-blue); max-width: 380px; }
.yr-collage { display: grid; grid-template-columns: 1fr 1fr; }
.yr-collage > div { overflow: hidden; }
.yr-collage img { width: 100%; height: 100%; object-fit: cover; }
.yr-collage .cl { grid-row: span 2; aspect-ratio: 313/390; }
.yr-collage .cr { aspect-ratio: 311/195; }
.yr-sep { position: relative; height: var(--line-w); background: var(--blue); }
.yr-sep .tri { background: var(--blue); top: calc(-44px + var(--line-w)); }
.yr-sep.tl .tri { left: 26%; clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.yr-sep.tr .tri { right: 26%; clip-path: polygon(0 0, 0 100%, 100% 100%); }

/* --- CONTACT --- */
.contact-hero { border-bottom: var(--line-w) solid var(--blue); position: relative; }
.contact-hero h1 { max-width: var(--maxw); margin: 0 auto; color: var(--text-blue); font-weight: 600; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.25; padding: clamp(48px, 8vw, 108px) var(--pad) clamp(48px, 9vw, 128px); }
.contact-hero .v { position: absolute; right: 22.4%; top: 0; bottom: 0; width: var(--line-w); background: var(--blue); }
.contact-hero .tri { right: 22.4%; bottom: 0; background: var(--blue); clip-path: polygon(100% 0, 0 100%, 100% 100%); transform: translateX(1px); }
.contact-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.18fr; }
.c-info { padding: clamp(32px, 6vw, 86px) clamp(24px, 4vw, 56px) clamp(40px, 6vw, 86px) var(--pad); border-right: var(--line-w) solid var(--blue); }
.c-info h3 { color: var(--blue); font-size: clamp(22px, 2.45vw, 28px); line-height: 1.35; }
.c-info .grp { margin-top: clamp(28px, 4vw, 46px); }
.c-info p { font-size: 16px; line-height: 2; color: var(--blue); margin-top: 14px; max-width: 400px; text-align: justify; }
.c-info a { color: var(--blue-2); font-size: 16px; }
.c-info a:hover { text-decoration: underline; }
.c-form { padding: clamp(32px, 6vw, 86px) var(--pad) clamp(40px, 6vw, 86px) clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; }
.c-form label { font-size: 16px; color: var(--blue); display: block; margin-bottom: 9px; font-family: var(--body); }
.c-form input, .c-form textarea { width: 100%; background: #f2f2f2; border: none; height: 40px; padding: 0 22px; font-family: var(--body); font-size: 16px; color: #333; box-sizing: border-box; }
.c-form input::placeholder, .c-form textarea::placeholder { color: #b0b0b0; }
.c-form input:focus, .c-form textarea:focus { outline: 2px solid var(--blue); }
.c-form textarea { height: 154px; padding-top: 12px; resize: vertical; }
.c-send { align-self: flex-start; background: var(--blue-2); color: #fff; border: none; cursor: pointer; font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 17px; padding: 9px 24px; }
.c-send:hover { background: var(--blue-dark); }
.map { max-width: var(--maxw); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--pad) clamp(40px, 6vw, 72px); }
.map img { width: 100%; border-radius: 4px; }
.map iframe { display: block; width: 100%; height: clamp(300px, 38vw, 460px); border: 0; border-radius: 4px; }

/* --- mobile untuk komponen halaman lain --- */
@media (max-width: 700px) {
  .ab-grid, .vm-grid, .contact-grid { grid-template-columns: 1fr; }
  .ab-left::after, .ab-photo-wide::after,
  .ab-photo-tall::before, .ab-photo-tall::after { display: none; }
  .vision::after { width: 100%; }
  .ab-photo-tall { border-left: none; border-top: var(--line-w) solid #fff; }
  .ab-photo-tall img { min-height: 0; max-height: 340px; }
  .mission { margin-top: 32px; }
  .vision { padding-right: var(--pad); }
  .clients-grid { column-gap: 16px; row-gap: 20px; }
  body .clients-grid img { max-height: 34px; max-width: 80px; }
  .svcp-head, .svcp-head.rev { grid-template-columns: 1fr; }
  .svcp-head.rev h2 { order: 1; text-align: left; }
  .svcp-head.rev .panel { order: 2; }
  .ab-photo-wide { width: 100%; }
  .ab-photo-wide img { aspect-ratio: 16 / 7; }
  .prod-grid .p-big, .prod-grid .p-w { grid-column: span 2; }
  .prod-head { justify-content: flex-start; }
  .year-row, .year-row.rev { grid-template-columns: 1fr; gap: 20px; padding-top: 40px; padding-bottom: 40px; }
  .year-row.rev .yr-text { order: 1; }
  .year-row.rev .yr-collage { order: 2; }
  .yr-text p { max-width: none; }
  .yr-sep .tri { display: none; }
  .c-info { border-right: none; border-bottom: var(--line-w) solid var(--blue); }
  .contact-hero .v, .contact-hero .tri { display: none; }

  /* keterbacaan mobile */
  p.lead, .svc-body p, .ab-text p, .vision p, .mission p, .svcp-head .panel,
  .yr-text p, .c-info p, .c-info a { font-size: 15px; }
  .pf-label p { font-size: 12px; }
  .c-form input, .c-form textarea { font-size: 16px; }
}

/* --- CTA ke halaman Bag Order Form (dipakai halaman Product) --- */
.order-cta { background: var(--blue); color: #fff; text-align: center; padding: clamp(44px, 6.5vw, 80px) var(--pad); }
.order-cta h2 { font-size: clamp(27px, 3.25vw, 39px); margin-bottom: 14px; }
.order-cta p { font-size: 16px; line-height: 1.9; max-width: 520px; margin: 0 auto clamp(22px, 3vw, 32px); }

/* --- tombol WhatsApp floating, semua halaman (MOM 15/07) --- */
.wa-float {
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px);
  z-index: 90; width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }

/* --- hover + pop-up info produk (MOM 15/07) --- */
.prod-item { position: relative; display: block; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.prod-item img { transition: transform .35s ease; }
.prod-item::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  background: rgba(35, 91, 165, .84); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  opacity: 0; transition: opacity .25s ease;
}
.prod-item:hover img, .prod-item:focus-visible img { transform: scale(1.06); }
.prod-item:hover::after, .prod-item:focus-visible::after { opacity: 1; }
.prod-item:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.pinfo { display: none; }
body.pmodal-open { overflow: hidden; }
body.pmodal-open .wa-float { display: none; }  /* jangan menumpuk pop-up */
.pmodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); }
.pmodal[hidden] { display: none; }
.pmodal-backdrop { position: absolute; inset: 0; background: rgba(9, 52, 91, .62); }
.pmodal-panel {
  position: relative; background: #fff; color: var(--text-blue);
  width: min(640px, 100%); max-height: min(82vh, 760px); overflow-y: auto;
  padding: clamp(28px, 4vw, 44px); box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.pmodal-x {
  position: absolute; top: 10px; right: 14px; border: 0; background: none; cursor: pointer;
  font-size: 32px; line-height: 1; color: var(--blue); padding: 4px 8px;
}
.pmodal-x:hover { color: var(--navy); }
.pmodal-body h2 { font-size: clamp(24px, 2.6vw, 31px); color: var(--blue); margin-bottom: 14px; }
.pmodal-body h3 { font-size: 17px; color: var(--blue); margin: 24px 0 10px; }
.pmodal-body p { font-size: 16px; line-height: 1.9; }
.pinfo-list { list-style: none; }
.pinfo-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 1.6; padding: 7px 0; border-bottom: 1px solid #e6ebf2; }
.pinfo-list li span:last-child { color: #6f8bb0; white-space: nowrap; }
.pmodal-body .pinfo-more { font-size: 15px; color: #6f8bb0; margin-top: 18px; }
.pmodal-body .btn { margin-top: 26px; }


/* ============================================================
   Toleransi editor blok WordPress
   Blok Gambar membungkus setiap <img> dengan <figure class="wp-block-image">.
   Aturan di bawah membuat figure "transparan" terhadap tata letak sehingga
   bingkai foto tetap presisi, baik pada HTML statis (tanpa figure) maupun
   pada halaman yang dirender editor blok.
   ============================================================ */
/* Ditulis dengan `body` di depan supaya menang atas
   `.wp-block-image { margin: 0 0 1em }` milik wp-block-library, yang urutan
   muatnya tidak bisa kita pastikan. Tanpa ini, deretan logo klien di halaman
   About merenggang ~200px. */
body .wp-block-image { margin: 0; }
.wp-block-image img { display: block; }

/* --- Peredam gaya bawaan WordPress ---
   Di WordPress sungguhan (bukan pada HTML statis) ada dua lapis CSS tambahan
   yang tidak terlihat saat menguji berkas statis:

   1. CSS tata letak blok. Blok Group dirender dengan kelas is-layout-flow /
      is-layout-constrained, lalu WordPress menyuntikkan aturan yang memberi
      JARAK antar-anak dan membatasi lebar isinya. Tanpa peredam ini seluruh
      halaman merenggang dan blok penuh-lebar menyusut ke lebar konten.
   2. Stylesheet wp-block-library, mis. `.wp-block-image img { height: auto }`
      yang kekuatannya sama dengan aturan kita sehingga hasilnya bergantung
      urutan muat — rapuh.

   Selektor WordPress memakai :where() (berkekuatan nol), jadi selektor
   berkelas biasa sudah cukup menimpanya. Untuk lapis kedua, kekuatan
   selektor dinaikkan satu tingkat. */
.wp-block-group > *,
.wp-block-group > :first-child,
.wp-block-group > :last-child { margin-block-start: 0; margin-block-end: 0; }
.wp-block-group.alignfull, .wp-block-group.alignwide { margin-left: 0; margin-right: 0; }
/* CATATAN: JANGAN menambahkan `max-width: none` untuk anak .wp-block-group.
   Aturan pembatas lebar milik WordPress memakai :where() sehingga kekuatannya
   nol dan sudah kalah oleh selektor berkelas biasa. Aturan seperti itu justru
   ikut membatalkan max-width kita sendiri — .prod-grid melar dari 1050px ke
   lebar penuh dan seluruh kolase Product ikut membesar. */

/* Foto yang harus mengisi penuh selnya — dinaikkan agar menang atas
   `.wp-block-image img { height: auto }` bawaan WordPress. */
.mosaic .wp-block-image img, .yr-collage .wp-block-image img,
.prod-grid .wp-block-image img, .ab-photo-tall .wp-block-image img,
.banner-photos .wp-block-image img, .pf-card .wp-block-image img,
.about-photo .wp-block-image img, .cta-photo .wp-block-image img,
.svc-photo .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
/* Dua yang tingginya justru mengikuti rasio gambar, bukan tinggi sel. */
.ab-photo-wide .wp-block-image img { height: auto; }
.vision-photos .wp-block-image img { height: auto; }

/* Sel yang tingginya sudah pasti: figure diisi penuh lewat posisi absolut,
   bukan height:100% — persen tinggi akan melingkar bila tinggi sel berasal
   dari aspect-ratio. */
.yr-collage > div, .ab-photo-tall { position: relative; }
.mosaic .wp-block-image, .yr-collage .wp-block-image,
.prod-grid .wp-block-image, .ab-photo-tall .wp-block-image { position: absolute; inset: 0; }
.banner-photos > .wp-block-image { height: 100%; }

/* Sel yang tingginya ditentukan baris grid: figure cukup diisi 100%. */
.about-photo .wp-block-image, .cta-photo .wp-block-image,
.svc-photo .wp-block-image { height: 100%; }
.about-photo .wp-block-image img, .cta-photo .wp-block-image img,
.svc-photo .wp-block-image img { height: 100%; }

/* Logo hero dibungkus figure — lebarnya diteruskan ke gambar di dalamnya. */
.hero-logo img { width: 100%; }


/* ============================================================
   Layar sempit — kolase bertingkat/bertumpuk dikembalikan menjadi
   grid sederhana supaya tiap foto tetap terbaca.
   ============================================================ */
@media (max-width: 900px) {
  .mosaic-i, .mosaic-p { aspect-ratio: auto; display: grid; gap: 0;
    grid-template-columns: 1fr 1fr; grid-template-areas: "w w" "p1 p3" "p2 p3"; }
  .mosaic > div { min-height: 0; }
  /* susunan bertingkat hilang di sini, jadi garis pembingkai sela ikut dilepas */
  .mosaic > div::before, .mosaic > div::after, .mosaic::after { display: none; }
  /* di mode grid tinggi sel justru berasal dari gambarnya, jadi figure harus
     kembali mengalir normal supaya ikut menentukan tinggi sel */
  .mosaic .wp-block-image { position: static; }
  /* Rasio dipasang pada <img>, bukan wadahnya: lebar sel sudah pasti, jadi
     height:auto + aspect-ratio menghasilkan tinggi yang pasti pula. Kalau
     rasio dipasang di wadah sementara <img> memakai height:100%, rujukan
     tingginya melingkar dan browser jatuh ke tinggi asli file gambar. */
  .mosaic > div img { height: auto; }
  .mosaic-i .m-w img, .mosaic-p .m-w img { aspect-ratio: 5 / 2; }
  .mosaic-i .m-1 img, .mosaic-p .m-1 img,
  .mosaic-i .m-2 img, .mosaic-p .m-2 img { aspect-ratio: 341 / 300; }
  .mosaic-i .m-3 img, .mosaic-p .m-3 img { aspect-ratio: 341 / 600; }
  /* spesifisitas harus menyamai aturan kolase (0,2,0) agar posisi & ukuran
     persen di atas benar-benar dibatalkan pada layar sempit. */
  .mosaic-i .m-w, .mosaic-i .m-1, .mosaic-i .m-2, .mosaic-i .m-3,
  .mosaic-p .m-w, .mosaic-p .m-1, .mosaic-p .m-2, .mosaic-p .m-3 {
    position: static; left: auto; top: auto; width: auto; height: auto; }
  .mosaic-i .m-w, .mosaic-p .m-w { grid-area: w; }
  .mosaic-i .m-1, .mosaic-p .m-1 { grid-area: p1; }
  .mosaic-i .m-2, .mosaic-p .m-2 { grid-area: p2; }
  .mosaic-i .m-3, .mosaic-p .m-3 { grid-area: p3; }

  .prod-grid { max-width: 1050px; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 0 clamp(16px, 2vw, 24px); }
  .coll-1, .coll-2, .coll-3, .coll-4 { aspect-ratio: auto; }
  /* .prod-grid jadi container grid di sini, jadi pseudo-element-nya akan
     terhitung sebagai sel — ornamennya dilepas. */
  .prod.blue .prod-head::before, .prod.blue .prod-grid::before,
  .prod.blue .prod-grid::after, .prod.white::before, .prod.white::after { display: none; }
  .coll-1 > .prod-item, .coll-2 > .prod-item,
  .coll-3 > .prod-item, .coll-4 > .prod-item {
    position: relative; left: auto; top: auto;
    width: auto; height: auto; aspect-ratio: 264/206; z-index: auto; }
  .coll-1, .coll-3 { grid-template-areas: "a b big big" "c d big big"; }
  .coll-2 { grid-template-areas: "big big a b" "big big c d"; }
  .coll-4 { grid-template-areas: "big big w w" "big big c d"; }
  .prod-grid .p-big { grid-area: big; aspect-ratio: auto; }
  .prod-grid .p-a { grid-area: a; } .prod-grid .p-b { grid-area: b; }
  .prod-grid .p-c { grid-area: c; } .prod-grid .p-d { grid-area: d; }
  .prod-grid .p-w { grid-area: w; aspect-ratio: auto; }
}

@media (max-width: 700px) {
  .prod-grid { grid-template-columns: 1fr 1fr; grid-template-areas: none !important; }
  .coll-1 > .prod-item, .coll-2 > .prod-item,
  .coll-3 > .prod-item, .coll-4 > .prod-item { grid-area: auto !important; }
}