/* TasKurir.id. Gallery / katalog, playful. Tema = token; sisanya kelas halaman ini. */
:root {
  --sc-canvas:     #F4F3EF;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #1A1613;
  --sc-ink-soft:   #5E5750;
  --sc-accent:     #D8351F;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 24 30% 12%;
  --sc-hairline: rgb(26 22 19 / 0.12);
  --sc-hairline-strong: rgb(26 22 19 / 0.26);
  --ink-red: #B42A16;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --r-frame: 26px;
  --r-card: 22px;
  --bar-h: 4.5rem;
}
html { scroll-padding-top: 4rem; }
body { background: var(--sc-canvas); color: var(--sc-ink); }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 700; }

/* ------------------------------------------------------------- label ---- */
/* Satu skema label untuk semua objek: kunci mono kecil, nilai fakta. */
.plate {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; align-items: baseline;
  margin: 0; padding: 12px 16px;
  background: var(--sc-surface); border-radius: 14px;
  box-shadow: var(--sc-e1), var(--sc-edge);
  font-size: var(--sc-t-sm); line-height: 1.35;
}
.plate__k { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.plate__v { font-weight: 500; color: var(--sc-ink); }
.plate--col { display: block; margin-top: var(--sc-3); padding: 10px 12px; }
.plate--col .plate__k { display: block; }
.plate--row { width: fit-content; max-width: 100%; }

/* ------------------------------------------------------------ tombol ----- */
.btn {
  --wa: #25D366; --wa-hover: #1FBE5B; --wa-ink: #0B2517;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.5em; border-radius: 999px; border: 0;
  background: var(--wa); color: var(--wa-ink);
  font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-base);
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 22px -12px hsl(145 70% 22% / 0.75), var(--sc-edge);
  transition: transform 160ms var(--bounce), box-shadow 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.btn--sm { padding: 0.6em 1.15em; font-size: var(--sc-t-sm); }
.btn--lg { padding: 1.05em 2em; font-size: var(--sc-t-lg); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px) scale(1.04); background: var(--wa-hover); }
}
.btn:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- bar ---- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: 0.9rem var(--sc-gutter); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark img { height: 1.9rem; width: auto; }
.bar__index {
  display: flex; gap: 2px; padding: 4px;
  background: var(--sc-surface); border-radius: 999px; box-shadow: var(--sc-e2);
}
.bar__index a {
  padding: 0.45em 1em; border-radius: 999px; text-decoration: none;
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .bar__index a:hover { color: var(--sc-ink); background: rgb(26 22 19 / 0.06); } }
.bar__index a.is-active { background: var(--sc-ink); color: #fff; }

/* --------------------------------------------------------------- hero ---- */
.hero { padding-top: calc(var(--bar-h) + var(--sc-6)); padding-bottom: var(--sc-8); min-height: 100svh; display: flex; align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__h1 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4rem); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
.hero__shot { margin: 0; }
.frame {
  position: relative; padding: 10px; background: var(--sc-surface);
  border-radius: var(--r-frame); box-shadow: var(--sc-e3), var(--sc-edge);
  rotate: -1.2deg;
}
.frame > img { width: 100%; height: auto; border-radius: calc(var(--r-frame) - 10px); }
.frame .plate { position: absolute; left: -14px; bottom: -22px; box-shadow: var(--sc-e3), var(--sc-edge); }

/* ----------------------------------------------------- rel (umum) -------- */
.rail { height: 100%; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); padding-inline: var(--sc-gutter) 24vw; }
.rail__lead { flex: 0 0 min(30rem, 80vw); }
.rail__lead .sc-body { margin-top: var(--sc-4); }
.rail__end { flex: 0 0 min(26rem, 72vw); }

/* ----------------------------------------------- 2 · semua sama ---------- */
.same__item { flex: 0 0 clamp(13rem, 19vw, 18rem); }
.same__item:nth-of-type(odd) { rotate: -1deg; }
.same__item:nth-of-type(even) { rotate: 1deg; translate: 0 0.8rem; }
.same__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); background: #d9d6cf; box-shadow: var(--sc-e2); }
.same__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.same__item .plate { margin-top: var(--sc-3); }

/* ------------------------------------------------------ 3 · cap logo ----- */
.cap__stage { background: var(--sc-canvas); }
.cap__ground { position: absolute; inset: 0; background: var(--ground, var(--sc-canvas)); overflow: hidden; }
.flood {
  position: absolute; left: 0; top: 0; width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border-radius: 50%; background: var(--flood); transform: scale(0); will-change: transform;
  animation: flood 760ms var(--sc-ease-out) forwards;
}
@keyframes flood { to { transform: scale(var(--flood-scale, 20)); } }

.cap__layout {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: calc(var(--bar-h) + 0.5rem) var(--sc-gutter) var(--sc-6);
}
.cap__frame { position: relative; padding: 10px; background: var(--sc-surface); border-radius: var(--r-frame); box-shadow: var(--sc-e3), var(--sc-edge); }
.cap__shot { position: relative; overflow: hidden; border-radius: calc(var(--r-frame) - 10px); aspect-ratio: 4 / 3; }
.cap__inner { position: absolute; inset: 0; }
.cap__inner > img { width: 100%; height: 100%; object-fit: cover; }
.cap__shot.is-bump { animation: bump 380ms var(--bounce); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(0.992) translateY(2px); } 100% { transform: scale(1); } }

.patch {
  position: absolute; display: block;
  background: #fff; border-radius: 7px; overflow: hidden;
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.42), inset 0 0 0 1px rgb(0 0 0 / 0.08);
  opacity: 0; transform-origin: 50% 50%;
}
/* Logo diletakkan absolut di dalam patch. Dengan grid + height:100% baris auto
   mengikuti tinggi asli gambar, jadi logo tinggi meluber keluar patch. */
.patch img { position: absolute; left: 5%; top: 8%; width: 90%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.patch.is-on { opacity: 1; animation: drop 560ms var(--bounce) both; }
.patch--top   { left: 47.2%; top: 29.4%; width: 17%;   height: 8.2%; --rot: -4deg; }
.patch--left  { left: 25.4%; top: 55.6%; width: 18.2%; height: 9.4%; --rot: 5deg; }
.patch--right { left: 62.6%; top: 55.6%; width: 19%;   height: 9.4%; --rot: -5deg; animation-delay: 60ms; }
.patch--left.is-on { animation-delay: 30ms; }
@keyframes drop {
  0%   { opacity: 0; transform: translate3d(0, -30%, 0) scale(1.5) rotate(var(--rot, -4deg)); }
  50%  { opacity: 1; transform: translate3d(0, 0, 0) scale(0.93) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}

.cap__side { display: flex; flex-direction: column; gap: var(--sc-5); min-width: 0; }
.cap__says { position: relative; min-height: clamp(9rem, 21vw, 15rem); }
.cap__says > * { position: absolute; inset: 0 0 auto 0; font-size: clamp(1.9rem, 1rem + 2.7vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.cap.is-forced .cap__says > :first-child { visibility: hidden; }
.cap.is-forced .cap__says > :last-child { opacity: 1 !important; transform: none !important; }
.cap__name { box-shadow: var(--sc-e2), var(--sc-edge); }
.cap__dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cap__dots button {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 3; padding: 0; overflow: hidden;
  background: #fff; border: 0; border-radius: 10px; box-shadow: var(--sc-e1);
  transition: transform 160ms var(--bounce), box-shadow 160ms var(--sc-ease-out);
}
.cap__dots img { position: absolute; inset: 5px 7px; width: calc(100% - 14px); height: calc(100% - 10px); object-fit: contain; mix-blend-mode: multiply; }
.cap__dots button[aria-pressed="true"] { transform: translateY(-3px) scale(1.06); box-shadow: 0 0 0 2px var(--sc-ink), var(--sc-e2); }
@media (hover: hover) and (pointer: fine) { .cap__dots button:hover { transform: translateY(-2px); } }
.cap__dots button:active { transform: scale(0.95); }
.cap__hint { margin: 0; font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft); max-width: 46ch; }
@media (hover: hover) and (pointer: fine) { .hint-touch { display: none; } }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } }

/* ---------------------------------------------------------- 4 · hasil ---- */
.proof__stage { display: flex; align-items: center; padding-top: var(--bar-h); background: var(--sc-canvas); }
.proof__stage > .sc-wrap { width: 100%; }
.swap__tag { position: absolute; left: 14px; bottom: 14px; z-index: 3; box-shadow: var(--sc-e3), var(--sc-edge); }
.swap__tag { grid-template-columns: auto auto; }
.swap__tag .plate__v { white-space: nowrap; }
.proof__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "lead swap" "details swap"; gap: var(--sc-6) clamp(2rem, 5vw, 5rem); align-items: start; }
.proof__lead { grid-area: lead; }
.proof__swap { grid-area: swap; position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-frame); overflow: hidden; box-shadow: var(--sc-e3), var(--sc-edge); background: #fff; }
.swap__base, .swap__top { position: absolute; inset: 0; }
.swap__base img, .swap__top img { width: 100%; height: 100%; object-fit: cover; }
.proof__details { grid-area: details; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4); align-items: start; }
.detail:nth-child(2) { margin-top: var(--sc-5); }
.detail:nth-child(3) { margin-top: var(--sc-7); }
.detail__img { aspect-ratio: 1 / 1.15; overflow: hidden; border-radius: 16px; box-shadow: var(--sc-e2); }
.detail__img img { width: 100%; height: 100%; object-fit: cover; }


/* ------------------------------------------------ 4b · portofolio ------- */
.wall-sec { padding-top: var(--sc-5); overflow-x: clip; }
.wall__lead { margin-bottom: var(--sc-7); }
.wall__lead .sc-body { margin-top: var(--sc-3); }
.wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-5); align-items: start; }
.wall__col { display: flex; flex-direction: column; gap: var(--sc-5); }
.wall__col:nth-child(2) { margin-top: var(--sc-8); }
.wall__col:nth-child(3) { margin-top: var(--sc-4); }
.wall__col:nth-child(4) { margin-top: var(--sc-9); }
.wall__col:nth-child(5) { margin-top: var(--sc-6); }
.tile { margin: 0; }
.tile__img { aspect-ratio: 270 / 204; overflow: hidden; border-radius: 16px; box-shadow: var(--sc-e2); background: #d9d6cf; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; }
.tile .plate { margin-top: var(--sc-2); }
@media (max-width: 860px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
  .wall__col { display: contents; }
}

/* ----------------------------------------------------- 5 · jenis usaha --- */
.kind {
  position: relative; flex: 0 0 clamp(14rem, 16.5vw, 16.5rem);
  display: flex; flex-direction: column; gap: var(--sc-3);
  padding: 10px 10px var(--sc-4); background: var(--sc-surface); border-radius: var(--r-card);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.kind:nth-of-type(odd)  { translate: 0 -1.2rem; }
.kind:nth-of-type(even) { translate: 0 1.2rem; }
.kind__img { aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--r-card) - 10px); background: #e9e6df; }
.kind__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .kind:hover .kind__img img { transform: scale(1.05); } }
.kind__name, .kind__text, .kind__link { margin-inline: 12px; }
.kind__name { margin-block: var(--sc-2) 0; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 0.95; letter-spacing: -0.04em; }
.kind__text { margin-block: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 30ch; text-wrap: pretty; }
.kind__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.kind__link { font-weight: 600; font-size: var(--sc-t-sm); color: var(--ink-red); text-underline-offset: 0.25em; }

/* ------------------------------------------------------------ 6 · pesan -- */
.close__stage { background: var(--sc-canvas); }
.close__inner {
  height: 100%; max-width: 64rem; margin-inline: auto; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 5.5rem;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sc-5);
}
.close__inner h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; max-width: 18ch; }
.order { display: block; padding: 0; overflow: hidden; }
.order__row { display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr; gap: 14px; align-items: baseline; margin: 0; padding: 0.8rem 1.25rem; }
.order__row + .order__row { border-top: 1px solid var(--sc-hairline); }
.order a { color: var(--ink-red); font-weight: 600; text-underline-offset: 0.25em; }
.foot {
  position: absolute; inset: auto 0 0 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sc-4);
  padding: var(--sc-5) var(--sc-gutter); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot__copy { grid-column: 2; margin: 0; text-align: center; }
.foot__copy a { color: inherit; text-underline-offset: 0.25em; }
.foot__social { grid-column: 3; justify-self: end; display: flex; gap: var(--sc-2); }
.social__a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e1), var(--sc-edge);
  transition: transform 160ms var(--bounce), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.social__a svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .social__a:hover { transform: translateY(-2px) scale(1.08); background: var(--sc-ink); color: #fff; } }
.social__a:active { transform: scale(0.94); }
html.has-cursor .social__a { cursor: pointer; }

/* -------------------------------------------------------------- kursor --- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: none; }
html.has-cursor .cursor { display: block; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor] { cursor: none; }
.cursor__dot, .cursor__ring, .cursor__chip, .cursor__label { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--sc-ink); transition: opacity 120ms; }
.cursor__ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 2px solid var(--sc-ink); opacity: 0.85;
  transition: transform 220ms var(--bounce), background-color 160ms var(--sc-ease-out), border-color 160ms, opacity 120ms;
}
.cursor__chip {
  width: 132px; height: 62px; margin: -31px 0 0 -66px; overflow: hidden;
  background: #fff; border-radius: 10px;
  box-shadow: 0 14px 26px -10px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(0 0 0 / 0.08);
  opacity: 0; scale: 0.5; rotate: -8deg;
  transition: opacity 120ms var(--sc-ease-out), scale 220ms var(--bounce), rotate 220ms var(--bounce);
}
.cursor__chip img { position: absolute; left: 8%; top: 10%; width: 84%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.cursor__label {
  margin: -9px 0 0 -22px; width: 44px; text-align: center;
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  opacity: 0; transition: opacity 120ms;
}
.cursor[data-state="link"] .cursor__ring { transform: scale(1.5); background: rgb(216 53 31 / 0.18); border-color: var(--sc-accent); }
.cursor[data-state="look"] .cursor__ring { transform: scale(1.9); background: var(--sc-ink); border-color: var(--sc-ink); opacity: 1; }
.cursor[data-state="look"] .cursor__label { opacity: 1; }
.cursor[data-state="look"] .cursor__dot { opacity: 0; }
.cursor[data-state="stamp"] .cursor__ring, .cursor[data-state="stamp"] .cursor__dot { opacity: 0; }
.cursor[data-state="stamp"] .cursor__chip { opacity: 1; scale: 1; rotate: -4deg; }
.cursor[data-state="stamp"].is-down .cursor__chip { scale: 0.84; rotate: 0deg; }
.cursor.is-down .cursor__ring { transform: scale(0.8); }

/* Tombol CTA: kursor tangan bawaan, kursor kustom (titik + cincin) disembunyikan. */
html.has-cursor .btn, html.has-cursor .social__a { cursor: pointer; }
.cursor[data-state="hand"] .cursor__ring, .cursor[data-state="hand"] .cursor__dot { opacity: 0; }

/* ----------------------------------------------------------- responsif --- */
@media (max-width: 860px) {
  :root { --bar-h: 3.6rem; }
  .bar { padding-block: 0.6rem; }
  .bar__mark img { height: 1.5rem; }
  .bar__index { display: none; }
  .hero { min-height: 0; align-items: flex-start; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__h1 { font-size: clamp(2rem, 1.2rem + 5vw, 2.8rem); }
  .frame .plate { left: -6px; bottom: -18px; }
  .rail { padding-inline: var(--sc-gutter) 12vw; }
  .same__item { flex-basis: 62vw; }
  .same__img { aspect-ratio: 1 / 1; }
  .kind { flex-basis: 68vw; }
  /* Akhir geser: blok penutup pas selebar layar, teks di tengah kiri-kanan. */
  .kinds .rail__end { flex-basis: 100vw; box-sizing: border-box; padding-inline: var(--sc-gutter); text-align: center; text-wrap: balance; }

  .cap__layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--sc-4); align-items: start; padding-top: calc(var(--bar-h) + 0.25rem); padding-bottom: var(--sc-4); }
  .cap__shot { aspect-ratio: 1 / 0.82; }
  .cap__inner { inset: 0 auto auto -27%; width: 154%; height: auto; aspect-ratio: 4 / 3; top: -2%; }
  .cap__says { min-height: 5.6rem; }
  .cap__says > * { font-size: clamp(1.5rem, 1rem + 2.5vw, 2rem); }
  .cap__side { gap: var(--sc-3); }
  .cap__dots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .cap__dots img { inset: 3px 5px; width: calc(100% - 10px); height: calc(100% - 6px); }

  .proof__grid { grid-template-columns: 1fr; grid-template-areas: "lead" "swap" "details"; }
  .proof__details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-3); }
  .detail:nth-child(2), .detail:nth-child(3) { margin-top: 0; }
  .order__row { grid-template-columns: 1fr; gap: 2px; }
  .close__inner h2 { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }
  .btn--lg { font-size: var(--sc-t-base); }
  .foot { grid-template-columns: 1fr auto; padding-block: var(--sc-4); }
  .foot__side { display: none; }
  .foot__copy { grid-column: 1; text-align: left; }
  .foot__social { grid-column: 2; }
}
@media (max-width: 860px) {
  .proof__stage { align-items: flex-start; padding-top: calc(var(--bar-h) + 0.75rem); }
}
@media (max-width: 860px) and (max-height: 760px) {
  .proof__details { display: none; }
  .proof__grid { gap: var(--sc-4); }
}
@media (max-width: 860px) and (max-height: 700px) { .cap__says { min-height: 4.4rem; } .cap__hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .patch.is-on, .cap__shot.is-bump { animation: none; }
  .flood { animation-duration: 1ms; }
}