/*
  Tampilan bersama seluruh halaman situs Kora.

  Dipisah dari index.html supaya halaman /tier, /format, /klub,
  /penyelenggara, dan /unduh memakai token dan komponen yang SAMA, bukan
  salinan yang lama-lama menyimpang. Nilai warna dan huruf di sini datang
  dari batch 1; jangan menambah warna, bayangan lembut, gradien, atau glow
  di luar itu.
*/
/* ==========================================================
   TOKEN — sembilan warna dari batch 1, tidak ada tambahan.
   ========================================================== */
:root {
  --ink: #101010;
  --screen: #f6f5f0;
  --surface: #ffffff;
  --lime: #d9fb6c;
  --violet: #cdbbff;
  --pink: #ffc7e4;
  --yellow: #ffe066;
  --magenta: #e5007a;
  --display: 'Archivo Black', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--screen);
  color: var(--ink);
  font-family: var(--body);
}
a {
  color: inherit;
  text-decoration: none;
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ----- tipografi -----
   Archivo Black punya descender dalam; tanpa line-height longgar plus
   padding bawah, huruf-hurufnya terpotong rata di bagian bawah dan
   terbaca seperti garis potong. Aturan ini berlaku di SETIAP baris
   display, bukan hanya judul besar. */
h1 {
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 78px);
  letter-spacing: -1.8px;
  line-height: 1.14;
  padding-bottom: 6px;
  margin: 26px 0 0;
  max-width: 17ch;
}
h2 {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -1.2px;
  line-height: 1.2;
  padding-bottom: 4px;
  margin: 12px 0 0;
  max-width: 22ch;
}
.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.55;
}
.cardhead {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.5;
  text-transform: uppercase;
  padding-bottom: 2px;
}
p {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  opacity: 0.8;
  margin: 16px 0 0;
  max-width: 62ch;
}
.mark {
  box-shadow: inset 0 -0.2em 0 var(--lime);
}
.mark-white {
  box-shadow: inset 0 -0.2em 0 #fff;
}
.mark-violet {
  box-shadow: inset 0 -0.2em 0 var(--violet);
}
.mark-yellow {
  box-shadow: inset 0 -0.2em 0 var(--yellow);
}

/* ----- nav ----- */
nav {
  background: var(--surface);
  border-bottom: 3px solid var(--ink);
}
.navrow {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 16px 32px;
  max-width: 1240px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.logo {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--lime);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}
.wordmark {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1.2px;
  margin-right: auto;
}
.navlink {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* Tombol bahasa memakai bentuk pil yang sama dengan kontrol lain,
   tapi tanpa isian aksen — ia pelengkap, bukan ajakan utama. */
.navlang {
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 9px 14px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--ink);
  cursor: pointer;
}
.navlang:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.navcta {
  background: var(--ink);
  color: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--lime);
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* ----- lencana toko aplikasi -----
   Barisnya SENDIRI, di bawah dua tombol utama. Sebelumnya lencana ini
   berbagi baris dengan tombol besar: empat kotak dengan tinggi dan
   bentuk berbeda berdesakan dalam satu baris, dan tidak ada satu pun
   yang terbaca sebagai tindakan utama.

   Berkas resmi Apple dan Google dipakai kalau ada (appstore.svg dan
   googleplay.png di folder yang sama). Selama belum ada, tampil versi
   gambar sendiri dengan bentuk yang sama supaya halamannya tetap utuh.
*/
.storesrow {
  margin-top: 26px;
}
.soonlabel {
  display: inline-block;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.stores img {
  height: 52px;
  width: auto;
  display: block;
}
/* Lencana Google datang dengan margin transparan bawaan yang lebar.
   Disamakan tingginya begitu saja, lambangnya jadi terlihat lebih
   kecil dari punya Apple — jadi tingginya dinaikkan dan margin itu
   diimbangi dengan geseran negatif. */
.stores img[src*="googleplay"] {
  /* Angka ini DIUKUR dari berkasnya, bukan dikira-kira.

     googleplay.png berukuran 646x250, tapi kotak hitamnya cuma
     564x168 — sisanya ruang transparan yang memang diwajibkan
     panduan Google. Kotaknya jadi hanya 0,672 dari tinggi berkas.
     Lencana Apple sebaliknya: kotaknya mengisi penuh viewBox-nya.

     Supaya KOTAK kedua lencana sama-sama 52px, gambar Google harus
     52 / 0,672 = 77px, lalu ruang transparannya ditarik masuk
     (77 - 52) / 2 = 12,5px di tiap sisi. */
  height: 77px;
  margin: -12.5px;
}
/* Cadangan kalau berkas resminya belum ditaruh — bentuk dan tinggi
   dijaga sama persis dengan lencana aslinya supaya barisnya tidak
   berubah begitu berkasnya masuk. */
.store {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  background: var(--ink);
  color: #fff;
  border-radius: 9px;
  padding: 0 18px 0 14px;
}
.store .lines {
  line-height: 1.2;
}
.store .small {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.75;
  letter-spacing: 0.4px;
}
.store .big {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Di panel pendaftaran semuanya rata tengah, jadi barisan lencana
   harus ikut ke tengah. Tanpa ini labelnya di tengah sedangkan
   lencananya menempel ke kiri — dua perataan berbeda dalam satu
   kotak, dan itu yang terbaca sebagai berantakan. */
.signup .stores {
  justify-content: center;
}
.signup .storesrow {
  margin-top: 22px;
}

/* ----- hero ----- */
.hero {
  background: var(--lime);
  border-bottom: 3px solid var(--ink);
}
.hero .wrap {
  padding-top: 72px;
  padding-bottom: 80px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--magenta);
}
.heroactions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.bigbtn {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.4;
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 16px 32px 18px;
  display: inline-block;
}
.bigbtn.dark {
  background: var(--ink);
  color: var(--lime);
  box-shadow: 6px 6px 0 #fff;
}
.bigbtn.light {
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--ink);
}
.bigbtn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ----- kartu ----- */
.section {
  padding-top: 66px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-top: 52px;
}
.stat {
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 20px;
}
.stat .k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  opacity: 0.55;
}
.stat .v {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.15;
  padding-bottom: 4px;
  margin-top: 6px;
}
.stat .c {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.65;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.feature {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 26px;
}
.fhead {
  display: flex;
  align-items: center;
  gap: 13px;
}
.chip {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 3px solid var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}
.num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  opacity: 0.5;
}
.caps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cap {
  background: var(--screen);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.ramp {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.sw {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 2.5px solid var(--ink);
  flex: none;
}
.rampcap {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.55;
  margin-left: 4px;
}

/* ----- di lapangan ----- */
.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: 34px;
}
.checks {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}
.check {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 700;
}
.tick {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}
/* Permukaan ink tidak memakai border ink dan tidak memakai bayangan
   keras — batas dan kedalamannya datang dari isian di dalamnya. */
.panel {
  background: var(--ink);
  border-radius: 30px;
  padding: 22px;
  position: relative;
}
.livepill {
  position: absolute;
  top: -14px;
  left: 22px;
  background: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}
/* Panggung "Round Live" — meniru layar aslinya di aplikasi. Di dalam
   panel ink, batasnya lime; itu aturan permukaan gelap dari batch 1. */
.stage {
  border: 3px solid var(--lime);
  border-radius: 20px;
  padding: 14px;
  margin-top: 10px;
}
.stagehead {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}
.stagetag {
  margin-left: auto;
  border: 2px solid var(--lime);
  border-radius: 999px;
  padding: 3px 9px;
  opacity: 0.85;
}
.court {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: var(--surface);
  border-radius: 14px;
  padding: 11px 12px;
}
.courtno {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.45;
  width: 20px;
  flex: none;
}
.side {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.75;
}
.side.right {
  text-align: right;
}
.score {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.2;
  padding-bottom: 2px;
  flex: none;
}
.bench {
  margin-top: 12px;
  color: var(--lime);
  opacity: 0.75;
  font-size: 11px;
  font-weight: 700;
}
.results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.rtile {
  border-radius: 16px;
  padding: 14px;
}
.rtile.lime {
  background: var(--lime);
}
.rtile.dark {
  background: var(--ink);
  border: 2.5px solid var(--lime);
  color: var(--lime);
}
.rtile .k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0.65;
}
.rtile .v {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.2;
  padding-bottom: 3px;
  margin-top: 4px;
}

/* ----- tabel peran ----- */
.table {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
  margin-top: 34px;
}
.trow {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
}
.trow + .trow {
  border-top: 2.5px solid var(--ink);
}
.thead {
  background: var(--ink);
  color: #fff;
}
.thead div {
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tcell {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.82;
  line-height: 1.55;
}
.tlabel {
  background: var(--screen);
  font-weight: 800;
  opacity: 1;
}

/* ----- ajakan mendaftar ----- */
.signup {
  background: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 40px 32px;
  text-align: center;
  margin-top: 34px;
}
.signup h2 {
  margin-left: auto;
  margin-right: auto;
}
.signup p {
  margin-left: auto;
  margin-right: auto;
}
.form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.form input {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  min-width: 280px;
}
.form input:focus {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.form button {
  background: var(--ink);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 #fff;
  padding: 14px 26px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
}
.form button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ----- footer ----- */
footer {
  background: var(--ink);
  border-top: 3px solid var(--ink);
  margin-top: 70px;
  padding: 30px 0;
}
.frow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flogo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--ink);
  border: 2.5px solid var(--lime);
  display: grid;
  place-items: center;
  flex: none;
}
.fword {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--lime);
}
.fnote {
  color: #fff;
  opacity: 0.6;
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
}

/* ----- responsif -----
   Bayangan turun satu ukuran di layar sempit supaya tidak berdesakan
   dengan tepi layar; garis tidak pernah menipis di bawah 2,5px. */
@media (max-width: 1080px) {
  .stats,
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .play {
    grid-template-columns: minmax(0, 1fr);
  }
  .play .panel {
    order: -1;
  }
}
@media (max-width: 720px) {
  .wrap {
    padding: 0 20px;
  }
  .navrow {
    padding: 14px 20px;
    gap: 14px;
  }
  .navlink {
    display: none;
  }
  .stats,
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature,
  .table {
    box-shadow: 4px 4px 0 var(--ink);
  }
  .signup {
    box-shadow: 5px 5px 0 var(--ink);
    padding: 30px 20px;
  }
  .trow {
    grid-template-columns: minmax(0, 1fr);
  }
  .trow.thead {
    display: none;
  }
  .tcell::before {
    content: attr(data-role) ' — ';
    font-weight: 800;
    opacity: 0.55;
  }
  .form input {
    min-width: 0;
    width: 100%;
  }
}

/* ==================================================================
   HALAMAN DALAM — /tier, /format, /klub, /penyelenggara, /unduh
   ==================================================================

   Semuanya memakai kerangka yang sama dengan halaman utama: satu pita
   lime di atas, paling banyak satu pita gelap di badan halaman, dan
   kartu beroutline 3px dengan bayangan keras. Tidak ada warna, bayangan
   lembut, gradien, atau glow baru di sini. */

/* Halaman yang sedang dibuka ditandai warna aksen, bukan garis bawah —
   garis bawah bertabrakan dengan huruf tebal kapital di nav. */
.navlink.active {
  color: var(--magenta);
}

/* Pita atas halaman dalam lebih pendek daripada halaman utama: isinya
   satu judul dan satu kalimat, bukan ajakan mendaftar. */
.pagehero .wrap {
  padding-top: 54px;
  padding-bottom: 58px;
}
.pagehero h1 {
  max-width: 20ch;
}
.pagehero p {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  margin: 16px 0 0;
}

/* ---------- tangga tier ---------- */
.ladder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
.lrow {
  display: grid;
  grid-template-columns: 62px minmax(0, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 16px 22px 18px;
}
.lmedal {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 3px solid var(--ink);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--surface);
}
.lname {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  padding-bottom: 3px;
}
.lchar {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.78;
}
.lrp {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Tier gelap: teksnya dibalik jadi terang, dan medali memakai warna
   aksen tier itu supaya tidak lenyap di atas isian yang sama gelapnya. */
.lrow.dark .lchar {
  opacity: 0.72;
}

/* ---------- kartu gelap "bagaimana RP dihitung" ---------- */
.inkcard {
  background: var(--ink);
  color: var(--screen);
  border-radius: 30px;
  padding: 30px 30px 34px;
  margin-top: 34px;
}
.inkcard h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.6px;
  padding-bottom: 4px;
  margin: 10px 0 0;
}
.inkgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.inkitem {
  border: 3px solid var(--screen);
  border-radius: 20px;
  padding: 18px 18px 20px;
}
.inkitem p {
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 0;
  opacity: 0.82;
}
.formula {
  font-family: var(--body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.4px;
  background: var(--lime);
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 22px;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---------- kartu format ---------- */
.fmtgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.fmtrow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-top: 2px solid rgba(16, 16, 16, 0.12);
  font-size: 14px;
  line-height: 1.55;
}
.fmtkey {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.5;
  padding-top: 2px;
}
/* Bagan kecil: kotak beroutline, bukan ilustrasi. */
.mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
  flex-wrap: wrap;
}
.mbox {
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.marrow {
  font-weight: 800;
  opacity: 0.45;
}

/* ---------- stepper bernomor ---------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 32px;
}
.step {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 24px 26px 26px;
}
.stepnum {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  padding-bottom: 4px;
  width: 52px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  display: grid;
  place-items: center;
}
.step p {
  font-size: 15px;
  line-height: 1.65;
  margin: 8px 0 0;
  max-width: 68ch;
}

@media (max-width: 900px) {
  .lrow {
    grid-template-columns: 52px minmax(0, 1fr);
    row-gap: 10px;
  }
  .lrp {
    grid-column: 2;
  }
  .inkgrid,
  .fmtgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tautan "unduh aplikasi" di kaki halaman. Kaki halaman berlatar gelap,
   jadi tautannya harus memakai warna terang — tanpa aturan ini ia mewarisi
   warna tinta dan hilang sama sekali di atas latarnya sendiri. */
footer .frow a {
  color: var(--lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Lencana "segera hadir" juga dipakai di dalam kartu gelap, yang mewarnai
   teks anaknya jadi terang — di atas lencana putih itu tidak terbaca. */
.inkcard .soonlabel {
  color: var(--ink);
}

/* Tombol besar di dalam kartu gelap. Isiannya lime, tapi warna teksnya
   diwarisi dari kartu itu (terang) — jadi tulisannya nyaris hilang di atas
   lime. Dikembalikan ke warna tinta. */
.inkcard .bigbtn {
  color: var(--ink);
}

/* ==================================================================
   TANGKAPAN LAYAR APLIKASI
   ==================================================================

   Layarnya dirender pada ukuran asli 390x844 lalu diperkecil dengan
   `transform: scale()`. Bukan diperkecil nilai demi nilai, supaya tebal
   garis, radius, dan jarak antar-elemennya tetap persis seperti di
   aplikasi. Tinggi dan lebar bingkainya yang disesuaikan dengan tangan,
   karena elemen yang diskalakan tetap memakan ruang ukuran aslinya. */
.shot {
  margin: 0;
  flex: none;
  position: relative;
}
.shotframe {
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--screen);
  overflow: hidden;
  position: relative;
}
.shotinner {
  width: 390px;
  height: 844px;
  transform-origin: top left;
}
/* Judul layar: pil miring yang menempel di pojok kiri atas kartunya,
   persis seperti penanda artboard di kanvas desainnya. Karena pilnya
   keluar dari kotak kartu, barisannya diberi jarak atas supaya pil paling
   atas tidak terpotong oleh bagian di atasnya. */
.shotpill {
  position: absolute;
  top: -14px;
  left: -10px;
  z-index: 3;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 14px 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Pil yang lebih lebar dari kartunya akan menabrak pil kartu sebelahnya.
     Pembatas ini menjaga supaya label yang kepanjangan terpotong dengan
     titik-titik, bukan menindih tetangganya. */
  max-width: calc(100% + 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Baris tangkapan layar: rata tengah, dan boleh turun baris pada layar
   sempit tanpa memotong satu pun bingkai. */
.shotrow {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 48px;
  align-items: flex-start;
}
.shotrow.center {
  justify-content: center;
}
/* Di dalam kartu langkah, tangkapan layarnya duduk di samping teks. */
.step.withshot {
  grid-template-columns: 58px minmax(0, 1fr) auto;
}
.step.withshot .shot {
  margin-top: 4px;
}
@media (max-width: 900px) {
  .step.withshot {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .step.withshot .shot {
    grid-column: 2;
  }
}

/* ==================================================================
   CELAH SETIPIS RAMBUT ANTARA GARIS TEPI DAN BAYANGAN
   ==================================================================

   Kartu di situs ini bergaris tepi tinta dan berbayangan keras tinta yang
   digeser beberapa piksel. Keduanya seharusnya bertemu tanpa celah — tapi
   kalau lebar atau posisi kartunya jatuh di tengah piksel (sering terjadi
   pada kartu di dalam grid, dan pada pil judul yang dimiringkan), browser
   menggambar batas keduanya di setengah piksel dan menyisakan garis tipis
   berwarna latar halaman. Di layar, garis krem itu terbaca sebagai garis
   putih yang menempel di sisi bayangan.

   `outline` setebal 1px berwarna sama dengan garis tepinya digambar persis
   di luar kotak kartu, jadi celah itu tertutup tanpa mengubah ukuran,
   tata letak, maupun tampilan kartunya. */
.shotframe,
.shotpill,
.feature,
.stat,
.step,
.lrow,
.kicker,
.soonlabel,
.stepnum,
.inkitem {
  outline: 1px solid var(--ink);
}
/* Kartu gelap memakai garis tepi terang, jadi cincinnya pun harus terang —
   cincin tinta di atas latar tinta justru bikin kotaknya terlihat kabur. */
.inkitem {
  outline-color: var(--screen);
}

/* Jaring pengaman untuk batang gulir di dalam layar aplikasi.
   Sumbernya sudah diubah jadi `overflow:hidden` waktu layarnya diambil dari
   berkas desain, tapi kalau nanti ada elemen bersarang yang masih bisa
   digulir, batangnya tetap tidak boleh memakan tempat di tepi kartu — itu
   yang dulu memunculkan garis terang setinggi kartu pada layar gelap. */
.shotinner,
.shotinner * {
  scrollbar-width: none;
}
.shotinner::-webkit-scrollbar,
.shotinner *::-webkit-scrollbar {
  width: 0;
  height: 0;
}