/* 0.2.16 · Cerita proyek: the WhatsApp card's sheets in HTML (inc/cerita.php). --u = one unit of the 360 × 450 Ops canvas. */
.cr-sheet { --u: calc(100cqw / 360); --navy: #1F2B36; --gold: #D6A74E; --krem: #F7F3EA; --biru: #1C3550; container-type: inline-size; position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; font-family: Jost, Montserrat, system-ui, sans-serif; color: #fff; line-height: 1.2; text-align: left; }
.cr-sheet * { box-sizing: border-box; margin: 0; }
.cr-bg { position: absolute; inset: 0; }
.cr-bg.navy { background: var(--navy); }
.cr-bg.krem { background: var(--krem); }
.cr-bg.biru { background: var(--biru); }
.cr-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-full { position: absolute; inset: 0; }
.cr-top { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 130); background: linear-gradient(rgba(20, 28, 36, .82), rgba(20, 28, 36, .35) 55%, rgba(20, 28, 36, 0)); }
.cr-brand { position: absolute; left: 0; right: 0; top: calc(var(--u) * 12); display: flex; flex-direction: column; align-items: center; color: #fff; }
.cr-brand svg { width: calc(var(--u) * 16); height: auto; display: block; }
.cr-brand .wm { font-family: Montserrat, Jost, sans-serif; font-weight: 700; font-size: calc(var(--u) * 10); letter-spacing: calc(var(--u) * 6); padding-left: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); line-height: 1; }
.cr-brand .tg { font-family: Montserrat, Jost, sans-serif; font-size: calc(var(--u) * 6); letter-spacing: calc(var(--u) * 3.7); padding-left: calc(var(--u) * 3.7); margin-top: calc(var(--u) * 3); opacity: .85; line-height: 1; }
.cr-tag { position: absolute; right: calc(var(--u) * 14); top: calc(var(--u) * 13); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 7); display: flex; align-items: center; background: rgba(255, 255, 255, .9); color: var(--navy); font-size: calc(var(--u) * 10); font-weight: 600; }
.cr-no { position: absolute; right: calc(var(--u) * 16); bottom: calc(var(--u) * 12); font-size: calc(var(--u) * 10); color: rgba(255, 255, 255, .6); line-height: 1; }
.cr-no.dk { color: #8A8F93; }

/* 1 · Sampul */
.cr-bawah { position: absolute; left: 0; right: 0; top: calc(var(--u) * 180); bottom: 0; background: linear-gradient(rgba(20, 28, 36, 0), rgba(20, 28, 36, .84) 55%, rgba(20, 28, 36, .96)); }
.cr-s1 { position: absolute; left: calc(var(--u) * 29); width: calc(var(--u) * 300); bottom: calc(var(--u) * 14); display: flex; flex-direction: column; }
.cr-nm { position: relative; font-weight: 800; font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 24); }
.cr-nm-t { display: block; position: relative; }
.cr-nm-t::before { content: ""; position: absolute; left: calc(var(--u) * -13); top: calc(var(--u) * 2); bottom: calc(var(--u) * 1); width: calc(var(--u) * 3); background: var(--gold); }
.cr-meta { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); line-height: calc(var(--u) * 17); color: rgba(255, 255, 255, .84); }
.cr-lab { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin: calc(var(--u) * 9) 0 0 calc(var(--u) * -7); }
.cr-lab span { height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 7); display: flex; align-items: center; background: rgba(17, 24, 31, .75); font-size: calc(var(--u) * 10); font-weight: 700; letter-spacing: calc(var(--u) * .8); text-transform: uppercase; }
.cr-lab span.g { background: var(--gold); color: var(--navy); }
.cr-cap { position: absolute; left: calc(var(--u) * 257); bottom: calc(100% + var(--u) * 18); transform: translateX(-50%) rotate(-7deg); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); background: rgba(20, 28, 36, .6); border: calc(var(--u) * 2) solid var(--gold); outline: calc(var(--u) * 1) solid var(--gold); outline-offset: calc(var(--u) * 3); color: var(--gold); white-space: nowrap; line-height: 1; }
.cr-cap b { font-weight: 900; font-size: calc(var(--u) * 22); letter-spacing: calc(var(--u) * 1.3); }
.cr-cap small { font-weight: 700; font-size: calc(var(--u) * 8); letter-spacing: calc(var(--u) * 1.1); text-transform: uppercase; }
.cr-cap.besar { left: calc(var(--u) * 110); top: calc(var(--u) * 140); bottom: auto; transform: translate(-50%, -50%) rotate(-7deg) scale(1.45); }

/* 2 and 5 · photo on top, text on cream */
.cr-atas { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 203); background: var(--navy); overflow: hidden; }
.cr-teks { position: absolute; left: calc(var(--u) * 18); right: calc(var(--u) * 18); top: calc(var(--u) * 227); display: flex; flex-direction: column; color: var(--navy); }
.cr-teks.s5 { top: calc(var(--u) * 223); }
.cr-sec { font-size: calc(var(--u) * 10); font-weight: 700; letter-spacing: calc(var(--u) * 1.4); text-transform: uppercase; color: #A87A26; }
.cr-jdl { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 20); font-weight: 800; line-height: calc(var(--u) * 24); color: var(--navy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr-jdl.besar { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 22); line-height: calc(var(--u) * 27); }
.cr-crt { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 20); color: #3B4650; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.cr-bintang { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 16); letter-spacing: calc(var(--u) * 2); color: var(--gold); line-height: 1; }
.cr-kutip { margin: calc(var(--u) * 10) 0 0; padding: 0; border: 0; font-size: calc(var(--u) * 18); font-weight: 500; line-height: calc(var(--u) * 24); color: var(--navy); font-style: normal; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cr-rn { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); color: #5B6670; }
.cr-lok { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 13.5); color: #3B4650; }
.cr-cta { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 18); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 3); background: var(--navy); color: #fff; text-decoration: none; }
.cr-cta b { font-size: calc(var(--u) * 14); font-weight: 800; }
.cr-cta small { font-size: calc(var(--u) * 11.5); color: rgba(255, 255, 255, .75); }
.cr-cta .cr-no { bottom: auto; top: 50%; transform: translateY(-50%); }
.cr-cta:hover b, .cr-cta:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.cr-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* 3 · Hasil */
.cr-gal { position: absolute; left: calc(var(--u) * 14); width: calc(var(--u) * 332); top: calc(var(--u) * 78); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: calc(var(--u) * 180) calc(var(--u) * 144); gap: calc(var(--u) * 6); }
.cr-gal span { overflow: hidden; background: #2A3744; }
.cr-gal span:first-child { grid-column: 1 / 3; }
.cr-bp { position: absolute; left: calc(var(--u) * 10); width: calc(var(--u) * 340); top: calc(var(--u) * 76); height: calc(var(--u) * 250); display: flex; align-items: center; justify-content: center; }
/* The canvas turns the drawing into light lines on blue: inverted grey, screened over blue is the same sum. */
.cr-bp img { max-width: 100%; max-height: 100%; display: block; filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.cr-bp-t { position: absolute; left: calc(var(--u) * 16); width: calc(var(--u) * 320); top: calc(var(--u) * 348); font-size: calc(var(--u) * 12.5); line-height: calc(var(--u) * 18); color: #fff; }

/* 4 · Perjalanan izin */
.cr-redup { position: absolute; inset: 0; opacity: .3; }
.cr-tl { position: absolute; left: calc(var(--u) * 19.5); right: calc(var(--u) * 16); top: calc(var(--u) * 209); list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.cr-tl li { position: relative; height: calc(var(--u) * 18); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); padding-left: calc(var(--u) * 18.5); font-size: calc(var(--u) * 12.5); color: rgba(255, 255, 255, .92); }
.cr-tl li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 230); }
.cr-tl li::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin-top: calc(var(--u) * -4.5); border-radius: 50%; background: rgba(255, 255, 255, .55); }
.cr-tl li.on::before { background: var(--gold); }
.cr-tl li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--u) * 4); top: calc(50% + var(--u) * 6); height: calc(var(--u) * 26); width: calc(var(--u) * 1); background: rgba(255, 255, 255, .3); }
.cr-tl time { flex: none; font-size: calc(var(--u) * 10.5); color: rgba(255, 255, 255, .62); }

/* The track: native swipe with snap, arrows on the sides, dots below. */
.cr-stage { position: relative; width: 100%; }
.cr-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 14px; }
.cr-track::-webkit-scrollbar { display: none; }
.cr-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #1F2B36; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); z-index: 2; }
.cr-nav.prev { left: -56px; }
.cr-nav.next { right: -56px; }
.cr-nav:disabled { opacity: .3; cursor: default; }
.cr-dots { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.cr-dots button { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cr-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(127, 127, 127, .45); }
.cr-dots button[aria-current="true"]::before { background: #D6A74E; }
.cr-nav:focus-visible, .cr-dots button:focus-visible { outline: 2px solid #D6A74E; outline-offset: 2px; }
@media (max-width: 640px) {
	.cr-nav { width: 34px; height: 34px; background: rgba(255, 255, 255, .78); }
	.cr-nav.prev { left: 6px; }
	.cr-nav.next { right: 6px; }
}

/* The overlay on Proyek kami and the Beranda */
html.cr-buka { overflow: hidden; }
.cr-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(14, 18, 22, .94); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.cr-ov[hidden] { display: none; }
.cr-ov .cr-ov-top, .cr-ov .cr-ov-bawah, .cr-ov .cr-stage { width: min(440px, 100%, calc((100dvh - 170px) * .8)); }
.cr-ov .cr-ov-top { display: flex; align-items: center; gap: 8px; }
.cr-ov .cr-ov-top b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-ov .cr-ov-top button { flex: none; height: 40px; min-width: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cr-ov .cr-ov-top button[data-cr-tutup] { padding: 0; width: 40px; }
.cr-ov .cr-ov-top button:focus-visible { outline: 2px solid #D6A74E; outline-offset: 2px; }
.cr-ov .cr-dots button::before { background: rgba(255, 255, 255, .35); }
.cr-ov .cr-dots button[aria-current="true"]::before { background: #D6A74E; }
.cr-ov .cr-dots { margin-top: 0; }
.cr-ov .cr-ov-bawah { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.cr-ov .cr-ov-bawah a { color: #fff; }
.cr-ov .cr-ov-st { min-height: 1em; }

/* The project page (/project/slug/) */
.cr-hal { width: min(460px, 100%); margin: 0 auto; }
.cr-hal .cr-bagi { display: flex; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.cr-hal .cr-bagi small { color: var(--muted, #6B6662); }
@media (max-width: 560px) { .cr-hal { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cr-track { scroll-behavior: auto; } }