/* Real Line · Gaya B (Lipatan). Phone first: logo on top, content, gray bottom bar. Desktop ≥ 960 px: bar moves to the top. */
:root {
	--ink: #2F2B2B;
	--ink-2: #4A4646;
	--muted: #6B6767;
	--line: #E2E2E0;
	--soft: #F4F4F3;
	--bar: #EDEDEB;
	--green: #2F7D57;
	--green-2: #4FB07F;
	--head: 86px;
	--nav: 78px;
	--radius: 20px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Static pages must not slide sideways on a phone: nothing may be wider than the screen. */
html, body { max-width: 100%; overflow-x: clip; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'Jost', system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
a { color: var(--ink); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; }
p { margin: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ic { flex: none; display: block; }

/* Header: stacked logo, centered */
.site-head { position: sticky; top: 0; z-index: 20; height: var(--head); background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--ink); }
.logo .wm { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .6em; padding-left: .6em; line-height: 1; }
.logo .tag { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 7.5px; letter-spacing: .62em; padding-left: .62em; line-height: 1; }

.site-main { padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom)); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.page { padding-top: 18px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 18px; }

/* Bottom bar */
.tab-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--nav) + env(safe-area-inset-bottom)); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: var(--bar); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; font-size: 11px; font-weight: 500; color: var(--muted); }
.tab-nav .ico { width: 44px; height: 32px; display: flex; align-items: center; justify-content: center; opacity: .6; }
.tab-nav a.on { color: var(--ink); font-weight: 700; }
.tab-nav a.on .ico { opacity: 1; }
.tab-nav a.go { color: var(--green); font-weight: 700; }
.tab-nav a.go .ico { opacity: 1; background: var(--green); border-radius: 10px; }
.tab-nav a.go.on .ico { box-shadow: 0 0 0 2px var(--ink); }

/* Shared bits */
.kick { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.lead { color: var(--muted); font-size: 15px; }
.intro { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.intro h1 { font-size: 30px; }
.btn { min-height: 48px; border-radius: 14px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; background: var(--ink); color: #fff; }
.btn.light { background: #fff; color: var(--ink); border: 1px solid #D9D9D7; }
.btn.green { background: var(--green); color: #fff; }
.btn.full { width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--soft); }
.chip.green { background: var(--green); color: #fff; }
.card { border-radius: var(--radius); background: var(--soft); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.check::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7D57' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.ph { color: #8C8C8C; }

/* ---------- Beranda: kanvas → nyata ---------- */
.kanvas { position: relative; overflow: hidden; height: calc(100svh - var(--head) - var(--nav)); min-height: 520px; border-bottom: 1px solid var(--line); background: #fff radial-gradient(circle, #D0D2D1 1.3px, transparent 1.4px) 0 0/24px 24px; }
/* Logged-in team members also get the WP admin bar (46px on phones, 32px from 783px). */
.admin-bar .kanvas { height: calc(100svh - var(--head) - var(--nav) - 46px); }
@media (min-width: 783px) { .admin-bar .kanvas { height: calc(100svh - var(--head) - var(--nav) - 32px); } }
.kanvas .layer { position: absolute; inset: 0; }
.kanvas .wire { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .9s ease, transform .9s cubic-bezier(.65,0,.35,1); }
.kanvas .wire text { font-size: 10px; }
/* An uploaded working drawing fills the canvas like the photo (same crop), white paper letting the dot grid through. */
.kanvas img.wire { object-fit: cover; object-position: center; mix-blend-mode: multiply; }
.kanvas .nyata { position: absolute; inset: 0; clip-path: circle(0% at 50% 88%); transition: clip-path 1s cubic-bezier(.65,0,.35,1); }
.kanvas .nyata img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.08); transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.kanvas .nyata::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, rgba(47,43,43,.7)); }
.kanvas.is-real .nyata { clip-path: circle(150% at 50% 88%); }
.kanvas.is-real .nyata img { transform: scale(1); }
.kanvas.is-real .wire { opacity: .25; transform: scale(1.04); }
.stempel { position: absolute; z-index: 3; right: 14px; top: 18px; width: 244px; border: 3px solid var(--green); border-radius: 10px; padding: 3px; color: var(--green); background: rgba(255,255,255,.88); transform: rotate(-6deg); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.stempel > div { border: 1px solid var(--green); border-radius: 6px; padding: 9px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.stempel .s1 { font-size: 8px; font-weight: 800; letter-spacing: .22em; }
.stempel .s2 { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.stempel .s3 { font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.stempel .s4 { font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.stempel hr { width: 100%; border: 0; border-top: 1px dashed var(--green); margin: 0; }
.kanvas.is-real .stempel { opacity: 0; transform: rotate(-6deg) scale(1.25); }
.kaki { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--muted); transition: color .9s ease; }
.kanvas.is-real .kaki { color: #fff; }
.jadi { position: absolute; z-index: 4; left: 50%; bottom: 62px; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 8px 22px rgba(47,43,43,.28); transition: background .6s ease, color .6s ease; }
.kanvas.is-real .jadi { background: #fff; color: var(--ink); }
.hero-copy { padding-top: 22px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 12px; }
.hero-copy h1 { font-size: 30px; }

/* ---------- Layanan ---------- */
.svc { border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--soft); }
.svc.dark { background: var(--ink); color: #fff; }
.svc.dark .muted, .svc.dark .no { color: #B5B7B6; }
.svc .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svc .tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: #fff; }
.svc.dark .tag { background: var(--green); color: #fff; }
.svc .no { font-size: 11px; font-weight: 700; color: var(--muted); }
.svc h2 { font-size: 22px; }
.svc .muted { font-size: 12px; font-weight: 600; color: var(--muted); }
.svc .desc { font-size: 14px; color: var(--ink-2); }
.svc.dark .desc { color: #DDDFDE; }
.svc .label { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.svc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.svc.dark .check::before { filter: brightness(1.6); }
.svc .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.svc.dark .foot { border-color: #4A4646; }
.svc.dark .btn { background: #fff; color: var(--ink); }

/* ---------- Proyek Selesai ---------- */
.slider { display: flex; flex-direction: column; gap: 14px; }
.slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.pj { flex: none; width: min(318px, 82vw); scroll-snap-align: start; border-radius: 22px; border: 1px solid var(--line); background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pj header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pj .ttl { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 3px solid var(--green); }
.pj h2 { font-size: 17px; font-weight: 800; }
.pj .loc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pj .year { flex: none; min-width: 48px; height: 30px; border-radius: 10px; padding: 0 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 1px solid #D9D9D7; color: #A1A1A1; }
.pj .year.set { background: var(--green); border-color: var(--green); color: #fff; }
.pj .photo { position: relative; height: 196px; border-radius: 16px; overflow: hidden; background: #F0F0EE; display: flex; align-items: center; justify-content: center; color: #A1A1A1; font-size: 11px; }
.pj .photo img { width: 100%; height: 100%; object-fit: cover; }
.pj .count { position: absolute; right: 10px; top: 10px; border-radius: 10px; padding: 4px 9px; background: rgba(47,43,43,.78); color: #fff; font-size: 12px; }
.pj .count b { color: var(--green-2); }
.pj .izin { position: absolute; left: 10px; bottom: 10px; }
.pj .izin.chip { background: #fff; color: var(--green); }
.pj dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pj dl div { padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.pj dl div:nth-child(odd) { border-right: 1px solid var(--line); }
.pj dl div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.pj dt { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pj dd { margin: 0; font-size: 14px; font-weight: 800; }
.pj dd.empty { color: #A1A1A1; }
.pj figure { margin: 0; border-radius: 14px; background: var(--soft); padding: 12px; min-height: 74px; display: flex; flex-direction: column; gap: 6px; }
.pj figcaption { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.pj .stars { color: #D0D2D1; letter-spacing: 1px; }
.pj .stars b { color: #E2A33A; font-weight: 400; }
.pj blockquote { margin: 0; font-size: 13px; color: var(--muted); }
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.slider-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D9D9D7; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slider-nav button:disabled { opacity: .35; cursor: default; }
.dots { display: flex; gap: 6px; }
.dots span { height: 7px; width: 7px; border-radius: 999px; background: #D0D2D1; transition: width .3s ease; }
.dots span.on { width: 22px; background: var(--green); }
.klien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.klien div { border-radius: 16px; background: var(--soft); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 11px; font-weight: 700; }
.klien .lg { width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 14px; color: #8C8C8C; overflow: hidden; }
.klien .lg img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Office ---------- */
.map { height: 170px; border-radius: var(--radius); background: var(--soft); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.info { border-radius: var(--radius); background: var(--soft); padding: 4px 16px; }
.info > div { display: flex; gap: 12px; padding: 12px 0; }
.info > div + div { border-top: 1px solid var(--line); }
.info .k { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.info .v { font-size: 14px; font-weight: 600; white-space: pre-line; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.person { border-radius: var(--radius); border: 1px solid var(--line); padding: 16px; display: flex; gap: 14px; align-items: center; }
.person .av { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #F0F0EE; }
.wil { display: flex; flex-wrap: wrap; gap: 8px; }
.wil span { border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: var(--soft); }
.wil span:first-child { background: var(--ink); color: #fff; font-weight: 800; }

/* ---------- Mulai ---------- */
.kondisi { display: flex; flex-direction: column; gap: 10px; }
.kondisi a { min-height: 64px; border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--soft); }
.kondisi a:first-child { background: var(--ink); color: #fff; }
.kondisi .n { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.kondisi a:first-child .n { background: var(--green); color: #fff; }
.kondisi .t { flex: 1; display: flex; flex-direction: column; gap: 2px; font-weight: 800; font-size: 14px; }
.kondisi .t small { font-weight: 400; font-size: 12px; color: var(--muted); }
.kondisi a:first-child .t small { color: #B5B7B6; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 12px; padding-bottom: 12px; position: relative; }
.steps li::before { content: ''; flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; z-index: 1; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: #D9D9D7; }
.steps li.hl::before { border-color: var(--green); background: var(--green); }
.steps li.hl b { color: var(--green); }
.steps span { display: flex; flex-direction: column; font-size: 13px; }
.steps small { font-size: 12px; color: var(--muted); }

/* Generic page / single */
.prose { max-width: 720px; }
.prose p + p { margin-top: 1em; }

@media (min-width: 960px) {
	/* The bottom bar is fundamental to the app feel: it stays at the bottom on desktop too, items kept to a phone-width row. */
	.tab-nav { padding-left: max(4px, calc(50% - 280px)); padding-right: max(4px, calc(50% - 280px)); }
	.admin-bar .site-head { top: 32px; }
	.svc-list, .kondisi { display: grid; grid-template-columns: 1fr 1fr; }
	.klien { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.intro h1, .hero-copy h1 { font-size: 40px; }
}

/* ---------- Mulai: cek gratis form + persyaratan ---------- */
.cekform { display: flex; flex-direction: column; gap: 12px; }
.cekform label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.cekform input:not([type=radio]) { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--ink); border: 1px solid #D9D9D7; border-radius: 12px; padding: 11px 12px; background: #fff; }
.cekform .hp { position: absolute; left: -9999px; }
.cekform fieldset.kondisi { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cekform fieldset.kondisi legend { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 6px; padding: 0; }
.cekform .kondisi label { flex-direction: row; align-items: center; gap: 12px; min-height: 60px; border-radius: 16px; padding: 10px 14px; background: #fff; border: 2px solid transparent; cursor: pointer; color: var(--ink); }
.cekform .kondisi input { position: absolute; opacity: 0; }
.cekform .kondisi label:has(input:checked) { border-color: var(--ink); }
.cekform .kondisi label:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.cekform .kondisi .n { background: var(--soft); }
.cekform .kondisi label:has(input:checked) .n { background: var(--green); color: #fff; }
.cekform .kondisi .t small { color: var(--muted); }
.syarat-pub { border-top: 1px solid var(--line); padding: 10px 0 0; }
.syarat-pub summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.syarat-pub ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Layanan: unggah persyaratan ---------- */
.unggah { border: 1px solid var(--line); background: #fff; }
.warn-pub { margin: 0; padding: 10px 12px; border-radius: 10px; background: #F6ECD4; color: #7A5410; font-size: 13px; }