/* Arka Sync Prototype. Motif
 *
 * Satu keluarga bentuk, diambil dari logonya sendiri: LINGKARAN dan
 * KAPSUL BERSUDUT 63,1 derajat. Sudut itu terbaca langsung dari
 * transform rotate(-63.10282) di dalam logo.svg, jadi ia bukan angka
 * yang saya karang supaya terlihat dinamis.
 *
 * Aturannya satu: kalau sebuah hiasan bukan lingkaran dan bukan kapsul
 * 63,1 derajat, ia tidak masuk. Itu yang membuat halaman ini terbaca
 * sebagai satu merek, bukan kumpulan efek.
 */

/* Ladang motif. Latar bertekstur untuk seksi besar */
.mot-field {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23003366' stroke-width='2.5' opacity='.13'%3E%3Ccircle cx='18' cy='18' r='7.5'/%3E%3Crect x='53' y='6' width='15' height='40' rx='7.5' transform='rotate(-63.1 60.5 26)'/%3E%3Ccircle cx='74' cy='72' r='7.5'/%3E%3Crect x='8' y='54' width='15' height='34' rx='7.5' transform='rotate(-63.1 15.5 71)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
}
.mot-field--warm {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23e05a33' stroke-width='2.5' opacity='.16'%3E%3Ccircle cx='18' cy='18' r='7.5'/%3E%3Crect x='53' y='6' width='15' height='40' rx='7.5' transform='rotate(-63.1 60.5 26)'/%3E%3Ccircle cx='74' cy='72' r='7.5'/%3E%3Crect x='8' y='54' width='15' height='34' rx='7.5' transform='rotate(-63.1 15.5 71)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
}
.mot-field--light {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.5' opacity='.13'%3E%3Ccircle cx='18' cy='18' r='7.5'/%3E%3Crect x='53' y='6' width='15' height='40' rx='7.5' transform='rotate(-63.1 60.5 26)'/%3E%3Ccircle cx='74' cy='72' r='7.5'/%3E%3Crect x='8' y='54' width='15' height='34' rx='7.5' transform='rotate(-63.1 15.5 71)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
}

/* Titik rapat, untuk area yang butuh tekstur tanpa bersuara */
.mot-dots {
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .12;
}

/* Kapsul. Bentuk kedua dari logo, dipakai sebagai hiasan besar */
.mot-caps {
  position: absolute;
  border-radius: var(--r-pill);
  transform: rotate(calc(-1 * var(--motif-angle)));
  pointer-events: none;
}

/* Pembatas seksi berbentuk rantai kapsul */
.mot-zip {
  height: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='14' viewBox='0 0 34 14'%3E%3Crect x='2' y='-6' width='9' height='26' rx='4.5' transform='rotate(-26.9 6.5 7)' fill='%23e05a33'/%3E%3Crect x='19' y='-6' width='9' height='26' rx='4.5' transform='rotate(-26.9 23.5 7)' fill='%23003366'/%3E%3C/svg%3E");
  background-size: 34px 14px;
  background-repeat: repeat-x;
}

/*  Stiker. Permukaan gemuk berbayang keras
 * Ini yang membedakan tampilan produk konsumen dari tampilan SaaS generik.
 * Bayangannya padat dan tidak buram, jadi kartunya terbaca seperti benda
 * yang ditempel, bukan seperti kotak yang mengambang. */
.sticker {
  position: relative;
  background: var(--bg-raised);
  border: 2px solid var(--n-800);
  border-radius: var(--r-xl);
  box-shadow: 6px 6px 0 0 var(--n-800);
  transition: transform var(--dur) var(--ease-back), box-shadow var(--dur) var(--ease);
}
.sticker--sm { border-radius: var(--r-lg); box-shadow: 4px 4px 0 0 var(--n-800); }
.sticker--pop { box-shadow: 6px 6px 0 0 var(--t-500); }
.sticker--yellow { background: var(--y-400); }
.sticker--cream { background: var(--cream); }
.sticker--deep { background: var(--n-600); border-color: var(--n-900); color: #fff; }

a.sticker:hover, button.sticker:hover, .sticker--hover:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 0 var(--n-800);
}
a.sticker:active, button.sticker:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 0 var(--n-800);
}

/*  Sorotan kuning di belakang teks
 * Kuning 1,13:1 di atas terang, jadi ia tidak pernah jadi warna huruf.
 * Sebagai bidang di belakang huruf navy ia 10,64:1 dan justru paling
 * terbaca di seluruh halaman. */
.hl {
  background: var(--y-400);
  color: var(--n-800);
  padding: 0 .28em;
  border-radius: var(--r-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Coretan kuning di bawah kata, mengikuti sudut motif */
.hl-under {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.hl-under::after {
  content: "";
  position: absolute;
  left: -.12em; right: -.12em; bottom: .04em;
  height: .36em;
  background: var(--y-400);
  border-radius: var(--r-pill);
  z-index: -1;
}

/* Cincin busur. Matahari pagi, dipakai sebagai latar besar */
.mot-ring { position: absolute; pointer-events: none; }

/*  Bingkai gambar berbentuk kapsul
 * Sudut membulat asimetris, meniru ujung kapsul logo. */
.mot-frame {
  border-radius: var(--r-2xl) var(--r-md) var(--r-2xl) var(--r-md);
  overflow: hidden;
}
.mot-frame--alt {
  border-radius: var(--r-md) var(--r-2xl) var(--r-md) var(--r-2xl);
}

/* Nomor besar bergaya stiker, untuk langkah */
.mot-num {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-pill);
  background: var(--y-400);
  border: 2px solid var(--n-800);
  color: var(--n-800);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  flex: none;
}

/*  Pita berjalan
 * Gojek, Shopee, dan Tokopedia semuanya memakai pita berjalan di dekat
 * atas halaman. Ia menaikkan kepadatan tanpa memakan tinggi. */
.ticker {
  overflow: hidden;
  background: var(--n-600);
  color: #fff;
  border-block: 2px solid var(--n-900);
}
.ticker__track {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  padding-block: .625rem;
  animation: ticker-run 32s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.ticker__track span { display: inline-flex; align-items: center; gap: var(--sp-3); }
.ticker__track b { color: var(--y-400); }
.ticker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-500); flex: none; }
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }