System Requirements Document for teka-teki-silang

1. Introduction

teka-teki-silang adalah produk yang menghasilkan satu set teka-teki silang (crossword) bertema kolonialisme dalam bahasa Indonesia, berisi tepat 15 soal yang terbagi menjadi soal mendatar dan soal menurun, lengkap dengan kunci jawaban untuk setiap soal, dan disajikan kepada pengguna dalam bentuk gambar.

Produk ini ditujukan untuk Pembuat Teka-Teki Silang — seorang pembuat tunggal (Ahmad rafi) yang menyusun daftar soal beserta jawabannya, memastikan jumlah soal sesuai, dan menghasilkan tampilan bergambar yang siap dipakai sebagai artefak siap-kelas. Hasil yang berhasil adalah satu set teka-teki silang bergambar berisi 15 soal mendatar dan menurun beserta jawabannya.

Nada produk adalah playful-but-serious history: sebuah artefak yang terasa seperti poster terancang, bukan lembar kerja atau dasbor.

2. System Overview

Produk ini adalah aplikasi web satu-pengguna dengan empat halaman yang saling terkait:

• Landing — halaman masuk anonim yang menjelaskan pembuatan teka-teki silang bertema kolonialisme, jumlah 15 soal, pembagian mendatar dan menurun, kunci jawaban, serta hasil gambar.
• Soal — tempat menyusun tepat 15 soal teka-teki silang bertema kolonialisme dan memisahkannya menjadi soal mendatar serta soal menurun.
• Jawaban — tempat menyediakan dan meninjau jawaban untuk setiap soal sebagai kunci jawaban teka-teki silang.
• Gambar — tempat menampilkan hasil teka-teki silang bertema kolonialisme dalam format gambar yang dapat dilihat pengguna.

Aktor: Satu persona aktif manusia — Pembuat Teka-Teki Silang. Tidak ada aktor manusia lain, tidak ada peran sistem, dan tidak ada layanan pihak ketiga yang menjadi pemilik alur kerja.

Perilaku yang diterima: Menyusun 15 soal bertema kolonialisme, memisahkannya menjadi mendatar dan menurun, menyertakan kunci jawaban untuk setiap soal, dan menyajikan hasilnya sebagai gambar.

Kepemilikan: Seluruh halaman dimiliki oleh aplikasi (owner: application) dan dapat diakses tanpa autentikasi (access_requirement: none). Tidak ada identitas aplikasi yang diperlukan karena tidak ada keadaan lintas-sesi yang harus dimiliki secara privat, tidak ada komitmen atau transfer nilai yang harus terikat pada peserta tertentu, dan tidak ada kelanjutan sesi yang harus dipulihkan.

Pengecualian sempit: Produk ini tidak mencakup pembuatan akun, autentikasi, peran/izin, kolaborasi multi-pengguna, penyimpanan riwayat lintas-sesi, atau integrasi layanan eksternal. Produk juga tidak mencakup pembuatan soal otomatis di luar 15 soal bertema kolonialisme yang diminta.

2a. Product Interpretation and Delivery Boundary

Batas pengiriman saat ini: Produk menghasilkan satu set teka-teki silang bertema kolonialisme berisi tepat 15 soal (mendatar dan menurun) beserta kunci jawabannya, disajikan dalam bentuk gambar. Pengguna dapat melihat soal, melihat jawaban, dan melihat/mengunduh gambar hasil.

Kepemilikan akses: Keempat halaman dapat diakses secara anonim tanpa autentikasi. Ini adalah keputusan sadar berdasarkan sifat produk: satu pengguna tunggal, tidak ada keadaan privat yang perlu dilanjutkan, tidak ada komitmen yang perlu diikat pada peserta tertentu.

Batas saat ini vs. masa depan: Semua perilaku yang dijelaskan dalam dokumen ini adalah untuk horizon current. Tidak ada fitur masa depan yang didefinisikan dalam sumber otoritatif.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang disediakan. Bagian ini sengaja dihilangkan.

2c. Page Content and Component Coverage

Landing

• Informasi/keadaan: Judul besar "TEKA-TEKI SILANG: KOLONIALISME" dalam Archivo Black uppercase, dua baris dengan baris kedua digeser ke kanan. Paragraf singkat berisi tinta di atas bidang pink yang menyatakan 15 soal, mendatar & menurun, plus kunci jawaban. Fragmen papan teka-teki silang krem (potongan 6×6 dari grid asli dengan beberapa sel terisi pink) diputar -3° dan meluber keluar tepi kanan, dengan tag stiker tangerine bertuliskan "15 SOAL" disematkan di sudutnya.
• Aksi utama: Tombol "Lihat Soal" (tinta di atas krem) menuju halaman Soal. Tombol "Unduh Gambar" (garis luar tinta) menuju halaman Gambar.
• Aksi pendukung: Navigasi tab stiker yang diputar (Landing, Soal, Jawaban, Gambar) dengan batas tinta 3px, tab aktif terisi tangerine, diletakkan di sepanjang tepi atas.
• Entitas domain: Teka-teki silang, tema kolonialisme, 15 soal, mendatar, menurun, kunci jawaban, gambar.
• Tanggung jawab komponen: Hero full-bleed pink; headline Archivo Black yang membentang penuh; fragmen grid krem yang diputar dan meluber; tag stiker "15 SOAL"; paragraf penjelas; dua tombol chunky; navigasi tab stiker.
• Keadaan: Loading — tidak ada (halaman statis). Empty — tidak berlaku. Success — halaman tampil penuh dengan semua elemen. Error — tidak berlaku. Recovery — tidak berlaku.

Soal

• Informasi/keadaan: Daftar lengkap 15 soal, dipisahkan menjadi dua bagian: mendatar dan menurun. Setiap soal memiliki nomor (chip pink bernomor) dan teks soal. Bagian mendatar ditampilkan pada pita warna hot pink; bagian menurun pada pita warna tangerine. Ticker marquee tipis berisi istilah-istilah kolonialisme berjalan sekali di bagian atas halaman.
• Aksi utama: Membaca soal mendatar dan menurun. Hover pada chip soal membalik warnanya dari pink ke tangerine dan menyorot sel grid yang sesuai dengan pop skala 150ms.
• Aksi pendukung: Navigasi tab stiker ke halaman lain.
• Entitas domain: Soal, nomor soal, kategori (mendatar/menurun), tema kolonialisme, grid.
• Tanggung jawab komponen: Pita warna full-bleed untuk mendatar (pink) dan menurun (tangerine); chip nomor; baris soal dengan stagger 120ms saat masuk viewport; ticker marquee; navigasi tab stiker.
• Keadaan: Loading — tidak ada (data statis). Empty — tidak berlaku (selalu ada 15 soal). Success — 15 soal tampil terbagi dalam dua bagian. Error — tidak berlaku. Recovery — tidak berlaku.

Jawaban

• Informasi/keadaan: Kunci jawaban untuk setiap soal, ditampilkan sebagai versi papan yang dibalik warnanya: latar pink, huruf krem. Daftar jawaban bernomor dalam dua kolom.
• Aksi utama: Meninjau jawaban untuk setiap soal. Reveal huruf per sel dengan pembalikan warna per sel.
• Aksi pendukung: Navigasi tab stiker ke halaman lain.
• Entitas domain: Jawaban, nomor soal, kunci jawaban, grid yang dibalik warna.
• Tanggung jawab komponen: Papan warna-terbalik (pink ground, cream letters); daftar jawaban bernomor dua kolom; animasi reveal per sel; navigasi tab stiker.
• Keadaan: Loading — tidak ada. Empty — tidak berlaku. Success — semua jawaban tampil. Error — tidak berlaku. Recovery — tidak berlaku.

Gambar

• Informasi/keadaan: Hasil teka-teki silang bertema kolonialisme dalam format gambar — rendering bergaya poster dari papan dengan set stiker dan lockup judul. Gambar dapat dilihat pengguna.
• Aksi utama: Melihat gambar hasil. Mengunduh gambar.
• Aksi pendukung: Navigasi tab stiker ke halaman lain.
• Entitas domain: Gambar, papan, stiker, lockup judul, 15 soal, mendatar, menurun, kunci jawaban.
• Tanggung jawab komponen: Area tampilan gambar; tombol unduh; navigasi tab stiker.
• Keadaan: Loading — indikator saat gambar dirender. Empty — pesan jika gambar belum tersedia. Success — gambar tampil dan dapat diunduh. Error — pesan jika rendering gagal, dengan opsi coba lagi. Recovery — tombol coba lagi untuk merender ulang.

3. Functional Requirements

FR-01 — Menyusun 15 soal teka-teki silang bertema kolonialisme

As a Pembuat Teka-Teki Silang I should menyusun tepat 15 soal teka-teki silang bertema kolonialisme so that saya memiliki satu set soal yang siap dipakai.

• Provenance: explicit
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Membuka halaman Soal.
• Hasil yang dapat diamati: Tepat 15 soal bertema kolonialisme tampil di halaman Soal.
• Keadaan akses: Anonim, tanpa autentikasi.
• Kegagalan/recovery: Tidak berlaku (data statis).
• Kelanjutan: Pengguna beralih ke pemisahan mendatar/menurun (FR-02).

FR-02 — Memisahkan soal menjadi mendatar dan menurun

As a Pembuat Teka-Teki Silang I should melihat soal terbagi menjadi soal mendatar dan soal menurun so that struktur teka-teki silang jelas.

• Provenance: explicit
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Membuka halaman Soal.
• Hasil yang dapat diamati: Dua bagian terpisah — mendatar (pita pink) dan menurun (pita tangerine) — masing-masing dengan chip nomor dan teks soal.
• Keadaan akses: Anonim.
• Kegagalan/recovery: Tidak berlaku.
• Kelanjutan: Pengguna beralih ke kunci jawaban (FR-03).

FR-03 — Menyertakan kunci jawaban untuk setiap soal

As a Pembuat Teka-Teki Silang I should melihat kunci jawaban untuk setiap soal so that saya dapat memverifikasi jawaban yang benar.

• Provenance: explicit
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Membuka halaman Jawaban.
• Hasil yang dapat diamati: Kunci jawaban untuk setiap dari 15 soal tampil, dengan papan warna-terbalik dan daftar jawaban bernomor dua kolom.
• Keadaan akses: Anonim.
• Kegagalan/recovery: Tidak berlaku.
• Kelanjutan: Pengguna beralih ke hasil gambar (FR-04).

FR-04 — Menyajikan teka-teki silang dalam bentuk gambar

As a Pembuat Teka-Teki Silang I should melihat dan mengunduh teka-teki silang dalam bentuk gambar so that saya memiliki artefak siap-pakai.

• Provenance: explicit
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Membuka halaman Gambar atau menekan "Unduh Gambar" dari Landing.
• Hasil yang dapat diamati: Gambar bergaya poster dari papan teka-teki silang dengan set stiker dan lockup judul tampil dan dapat diunduh.
• Keadaan akses: Anonim.
• Kegagalan/recovery: Jika rendering gambar gagal, pesan error tampil dengan opsi coba lagi.
• Kelanjutan: Pengguna mengunduh gambar atau kembali menjelajah halaman lain.

FR-05 — Menyorot sel grid dari chip soal

As a Pembuat Teka-Teki Silang I should melihat sel grid yang sesuai tersorot saat saya mengarahkan kursor ke chip soal so that saya dapat menghubungkan soal dengan posisinya di papan.

• Provenance: required_inference
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Hover pada chip soal di halaman Soal.
• Hasil yang dapat diamati: Chip berubah warna dari pink ke tangerine; sel grid yang sesuai menyorot dengan pop skala 150ms.
• Keadaan akses: Anonim.
• Kegagalan/recovery: Tidak berlaku.
• Kelanjutan: Pengguna melanjutkan membaca soal lain.

FR-06 — Menampilkan ticker istilah kolonialisme

As a Pembuat Teka-Teki Silang I should melihat ticker tipis berisi istilah-istilah kolonialisme berjalan sekali di bagian atas halaman Soal so that suasana tema terasa sejak awal.

• Provenance: required_inference
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Membuka halaman Soal.
• Hasil yang dapat diamati: Ticker marquee berjalan sekali melintasi bagian atas halaman.
• Keadaan akses: Anonim.
• Kegagalan/recovery: Di bawah prefers-reduced-motion, ticker berhenti dan menampilkan item secara utuh (membungkus ke baris atau dapat digulir horizontal).
• Kelanjutan: Pengguna melanjutkan membaca soal.

FR-07 — Reveal huruf per sel pada halaman Jawaban

As a Pembuat Teka-Teki Silang I should melihat huruf-huruf pada papan jawaban terungkap dengan pembalikan warna per sel so that kunci jawaban terasa hidup dan mudah dibaca.

• Provenance: required_inference
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Membuka halaman Jawaban.
• Hasil yang dapat diamati: Huruf per sel terungkap dengan pembalikan warna; papan berlatar pink dengan huruf krem.
• Keadaan akses: Anonim.
• Kegagalan/recovery: Di bawah prefers-reduced-motion, semua huruf tampil statis tanpa animasi.
• Kelanjutan: Pengguna meninjau daftar jawaban bernomor.

FR-08 — Navigasi antar halaman melalui tab stiker

As a Pembuat Teka-Teki Silang I should berpindah antar halaman (Landing, Soal, Jawaban, Gambar) melalui tab stiker yang diputar so that saya dapat mengakses setiap bagian dengan cepat.

• Provenance: required_inference
• Aktor: Pembuat Teka-Teki Silang
• Pemicu/input: Menekan tab stiker.
• Hasil yang dapat diamati: Halaman tujuan tampil; tab aktif terisi tangerine.
• Keadaan akses: Anonim.
• Kegagalan/recovery: Tidak berlaku.
• Kelanjutan: Pengguna berinteraksi dengan halaman tujuan.

4. User Personas

Pembuat Teka-Teki Silang

Konteks produk: Pengguna tunggal (Ahmad rafi) yang membuat teka-teki silang bertema kolonialisme untuk keperluan siap-kelas. Ia bekerja sendiri, tanpa kolaborator, dan menginginkan hasil akhir berupa artefak bergambar yang dapat langsung dipakai.

Tujuan utama: Menghasilkan satu set teka-teki silang bergambar berisi 15 soal mendatar dan menurun beserta jawabannya.

Tanggung jawab yang diterima:

• Menyusun daftar soal beserta jawaban.
• Memastikan jumlah soal sesuai (tepat 15).
• Memisahkan soal menjadi mendatar dan menurun.
• Menyediakan kunci jawaban untuk setiap soal.
• Menghasilkan tampilan bergambar yang siap dipakai.

Input/keputusan relevan: Membaca soal, memverifikasi jawaban, memutuskan kapan mengunduh gambar.

Interaksi dengan peserta lain: Tidak ada peserta manusia lain. Pengguna berinteraksi hanya dengan antarmuka aplikasi.

Keberhasilan yang dapat diamati: Satu set teka-teki silang bergambar berisi 15 soal mendatar dan menurun beserta jawabannya, yang dapat dilihat dan diunduh.

Yang membedakan peran ini: Pengguna adalah pembuat tunggal yang bekerja secara anonim tanpa perlu akun, tanpa kolaborasi, dan tanpa riwayat lintas-sesi. Fokusnya adalah menghasilkan artefak visual, bukan mengelola data atau berkolaborasi.

5. Core User Flows

Alur 1 — Menjelajah dari Landing ke Soal

1. Konteks awal: Pengguna membuka aplikasi untuk pertama kali. Tidak ada autentikasi yang diperlukan.
2. Halaman: Landing.
3. Aksi: Pengguna melihat hero full-bleed pink dengan judul "TEKA-TEKI SILANG: KOLONIALISME" dan paragraf yang menyatakan 15 soal, mendatar & menurun, plus kunci jawaban.
4. Hasil yang dapat diamati: Pengguna memahami cakupan produk.
5. Langkah berikutnya: Pengguna menekan tombol "Lihat Soal".
6. Hasil: Halaman Soal tampil.

Alur 2 — Membaca 15 soal mendatar dan menurun

1. Konteks awal: Pengguna berada di halaman Soal.
2. Halaman: Soal.
3. Aksi: Pengguna membaca bagian mendatar (pita pink) dan bagian menurun (pita tangerine). Setiap soal memiliki chip nomor dan teks soal.
4. Hasil yang dapat diamati: Tepat 15 soal tampil, terbagi dalam dua bagian.
5. Aksi pendukung: Pengguna mengarahkan kursor ke chip soal; chip berubah warna dan sel grid yang sesuai menyorot.
6. Langkah berikutnya: Pengguna beralih ke halaman Jawaban melalui tab stiker.
7. Hasil: Halaman Jawaban tampil.

Alur 3 — Meninjau kunci jawaban

1. Konteks awal: Pengguna berada di halaman Jawaban.
2. Halaman: Jawaban.
3. Aksi: Pengguna melihat papan warna-terbalik (latar pink, huruf krem) dengan reveal huruf per sel, dan daftar jawaban bernomor dua kolom.
4. Hasil yang dapat diamati: Kunci jawaban untuk setiap dari 15 soal tampil.
5. Langkah berikutnya: Pengguna beralih ke halaman Gambar melalui tab stiker.
6. Hasil: Halaman Gambar tampil.

Alur 4 — Melihat dan mengunduh gambar hasil

1. Konteks awal: Pengguna berada di halaman Gambar.
2. Halaman: Gambar.
3. Aksi: Pengguna melihat rendering bergaya poster dari papan teka-teki silang dengan set stiker dan lockup judul.
4. Hasil yang dapat diamati: Gambar tampil.
5. Aksi: Pengguna menekan tombol unduh.
6. Hasil: Gambar terunduh.
7. Kegagalan/recovery: Jika rendering gagal, pesan error tampil dengan opsi coba lagi; pengguna dapat mencoba lagi.
8. Langkah berikutnya: Pengguna dapat kembali menjelajah halaman lain melalui tab stiker.

Alur 5 — Mengunduh gambar langsung dari Landing

1. Konteks awal: Pengguna berada di halaman Landing.
2. Halaman: Landing.
3. Aksi: Pengguna menekan tombol "Unduh Gambar" (garis luar tinta).
4. Hasil yang dapat diamati: Pengguna diarahkan ke halaman Gambar.
5. Langkah berikutnya: Pengguna mengunduh gambar dari halaman Gambar.

6. Visuals Colors and Theme

Muse: Jessica Walsh. Headline: Colour-saturated maximalism for a colonial-history crossword.

Palet (light mode)

Kontras: teks tinta di atas pink ≈ 8:1; teks tinta di atas tangerine; teks tinta di atas krem.

Tipografi

• Headings: Archivo Black, uppercase, leading 0.92, tracking -0.01em. Nomor dan indeks soal juga Archivo Black.
• Body: Manrope, bobot 500/700, line-height 1.6, tidak di bawah 16px.
• Skala: modular 1.333 — display clamp(64px, 10vw, 128px); h1 40→72; h2 28→40; clue 17→19; label 13→14 uppercase tracked; body 16→17.

Bahasa bentuk

Blok warna bertepi keras dan bentuk stiker dengan radius kecil (8–14px) hanya pada chip interaktif. Grid teka-teki silang digambar dengan garis tinta 3px tebal pada sel krem; sel terisi hot pink; sel terblokir tangerine. Tag stiker yang diputar dan tumpang tindih (mendatar, menurun, KUNCI JAWABAN) diletakkan di atas bidang warna pada -4° hingga 3°. Tanpa bayangan lembut, tanpa kaca, tanpa gradien.

Tata letak

Grid editorial asimetris: pada 1280px, tata letak 12 kolom dengan papan teka-teki silang menempati kolom 1–8 sebagai karya seni persegi besar dan kolom petunjuk bertumpuk di 9–12; headline hero meluber melintasi semua 12 kolom di atasnya. Pada 768px, papan menjadi lebar penuh dengan daftar petunjuk mendatar dan menurun dalam dua kolom di bawahnya. Pada 375px, semuanya satu kolom: headline, papan, lalu daftar mendatar, lalu daftar menurun, masing-masing petunjuk sebagai baris lebar penuh dengan chip bernomor pink. Kunci jawaban berada di halaman sendiri sebagai versi papan yang dibalik warnanya (latar pink, huruf krem) plus daftar jawaban bernomor. Tanpa grid kartu identik; bagian dipisahkan oleh pita warna full-bleed.

Gaya citra

Tipografi dan grid teka-teki silang adalah citranya. Seni pendukung adalah ilustrasi stiker vektor datar — kapal, cengkih rempah, menara benteng, pin peta, panah gambar tangan — digambar sebagai stiker dua warna bergaris tebal dalam pink/tangerine/tinta, ditempatkan sebagai aksen yang diputar di tepi blok warna. Tanpa fotografi, tanpa render 3D, tanpa mesh gradien. Output 'Gambar' akhir adalah rendering bergaya poster yang dapat diunduh dari papan dengan set stiker dan lockup judul.

7. Signature Design Concept

Layar pertama adalah bidang hot pink (#FF2E88) full-bleed, bukan hero putih. Satu baris tipe Archivo Black uppercase — 'TEKA-TEKI SILANG: KOLONIALISME' — membentang dari tepi ke tepi viewport dalam tinta, diatur pada 64px di mobile dan 128px di desktop, dipecah menjadi dua baris dengan baris kedua digeser ke kanan. Di bawahnya, fragmen papan teka-teki silang krem (#F2E9DC) — potongan 6×6 dari grid asli dengan beberapa sel terisi pink — diletakkan diputar -3° dan meluber keluar tepi kanan, dengan tag stiker tangerine bertuliskan '15 SOAL' disematkan di sudutnya. Kiri bawah: paragraf tinta singkat di atas bidang pink yang menyatakan 15 soal, mendatar & menurun, plus kunci jawaban, dengan dua tombol chunky — 'Lihat Soal' dalam tinta-di-atas-krem dan 'Unduh Gambar' sebagai garis luar tinta. Tanpa tumpukan terpusat, tanpa gradien, tanpa biru.

Gerakan khas:

• Headline Archivo Black raksasa yang membentang penuh viewport pada bidang hot pink solid, dengan baris kedua sengaja digeser ke kanan, tidak pernah terpusat.
• Papan teka-teki silang itu sendiri diperlakukan sebagai karya seni hero: fragmen grid krem yang diputar dan meluber tepi dengan sel terisi pink dan tag stiker tangerine '15 SOAL' disematkan di atasnya.
• Mendatar dan menurun disajikan sebagai dua pita warna full-bleed — mendatar pada hot pink, menurun pada tangerine — dengan chip bernomor dan teks petunjuk putih-di-atas-warna, sehingga pemisahan terasa sebelum dibaca.
• Halaman kunci jawaban sebagai kembaran papan teka-teki silang yang dibalik warnanya: latar pink, huruf krem, dengan reveal pembalikan warna per sel dan daftar jawaban bernomor dalam dua kolom.
• Navigasi tag stiker: tab halaman (Landing, Soal, Jawaban, Gambar) dirender sebagai tag persegi panjang yang diputar dengan batas tinta 3px, yang aktif terisi tangerine, diletakkan di sepanjang tepi atas.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Subjek fokus: Headline Archivo Black raksasa 'TEKA-TEKI SILANG: KOLONIALISME' pada bidang hot pink, dengan fragmen papan teka-teki silang krem yang diputar dan tag stiker '15 SOAL'.
• Tesis input→transformasi→hasil: Saat halaman dimuat, headline masuk dengan stagger 120ms per baris; fragmen papan krem meluncur masuk dari tepi kanan dengan rotasi -3°; tag stiker '15 SOAL' muncul dengan pop skala. Hasilnya adalah komposisi poster yang hidup dan mengundang interaksi.
• Kosakata gerak: Stagger 120ms, pop skala 150ms, pembalikan warna chip pink→tangerine, marquee ticker berjalan sekali.
• Bingkai pertama yang tersusun: Bidang pink penuh dengan headline dua baris (baris kedua digeser kanan), fragmen papan krem diputar di kanan bawah, tag stiker tangerine, paragraf tinta, dan dua tombol chunky.
• Keadaan reduced-motion: Semua gerak berhenti; komposisi statis dengan warna tetap.

9. Non-Functional Requirements

• NFR-01 — Jumlah soal tepat 15. Sistem harus menampilkan tepat 15 soal. Provenance: explicit. Rasional: batasan keras dari sumber otoritatif.
• NFR-02 — Tema kolonialisme. Semua soal harus bertema kolonialisme. Provenance: explicit.
• NFR-03 — Mencakup mendatar dan menurun. Soal harus mencakup soal mendatar dan soal menurun. Provenance: explicit.
• NFR-04 — Jawaban disertakan. Kunci jawaban harus disertakan untuk setiap soal. Provenance: explicit.
• NFR-05 — Output berupa gambar. Hasil akhir harus berupa gambar. Provenance: explicit.
• NFR-06 — Aksesibilitas gerak. Semua gerak harus berhenti di bawah prefers-reduced-motion, meninggalkan keadaan warna statis. Provenance: required_inference. Rasional: diperlukan agar konten tetap dapat dibaca oleh pengguna dengan preferensi gerak terbatas.
• NFR-07 — Teks dan kontrol tetap utuh. Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap sepenuhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar pas; tidak ada elemen lain yang menutupi bagian mana pun darinya. Provenance: explicit (creative direction).
• NFR-08 — Kontras warna. Teks tinta di atas pink ≈ 8:1; teks tinta di atas tangerine; teks tinta di atas krem. Provenance: explicit (creative direction).

10. Tech Stack

• Frontend: React (aplikasi web satu-pengguna dengan empat halaman).
• Styling: CSS dengan token warna dan tipografi sesuai creative direction; font Archivo Black dan Manrope.
• Rendering gambar: Rendering sisi klien untuk menghasilkan gambar bergaya poster dari papan teka-teki silang.
• Build/deployment: Docker/docker-compose untuk pengemasan dan menjalankan aplikasi.

Tidak ada pilihan teknologi lain yang ditentukan oleh sumber otoritatif. Tidak ada backend, basis data, atau layanan eksternal yang diperlukan karena semua data bersifat statis dan tidak ada keadaan lintas-sesi.

11. Assumptions and Constraints

• A-01: Produk adalah aplikasi web satu-pengguna tanpa autentikasi. [Default — tidak ditentukan oleh pengguna; disimpulkan dari tidak adanya kebutuhan keadaan privat atau komitmen yang terikat pada peserta tertentu.]
• A-02: Semua data soal dan jawaban bersifat statis dan disusun oleh pembuat; tidak ada pembuatan soal otomatis. [Default — tidak ditentukan oleh pengguna.]
• A-03: Gambar hasil dirender di sisi klien dan dapat diunduh. [Default — tidak ditentukan oleh pengguna.]
• A-04: Tidak ada penyimpanan riwayat lintas-sesi; setiap kunjungan menampilkan set soal yang sama. [Default — tidak ditentukan oleh pengguna.]
• C-01: Jumlah soal harus tepat 15. Provenance: explicit.
• C-02: Tema soal harus kolonialisme. Provenance: explicit.
• C-03: Soal harus mencakup mendatar dan menurun. Provenance: explicit.
• C-04: Jawaban harus disertakan. Provenance: explicit.
• C-05: Output harus berupa gambar. Provenance: explicit.
• C-06: Tidak ada akun, autentikasi, peran/izin, kolaborasi multi-pengguna, atau integrasi layanan eksternal. Provenance: explicit (batas sempit dari lingkup).

12. Glossary

• Teka-teki silang: Permainan kata di mana pemain mengisi sel-sel grid dengan huruf berdasarkan petunjuk.
• Mendatar: Petunjuk yang jawabannya diisi secara horizontal pada grid.
• Menurun: Petunjuk yang jawabannya diisi secara vertikal pada grid.
• Kunci jawaban: Daftar jawaban yang benar untuk setiap soal.
• Kolonialisme: Tema sejarah yang menjadi dasar semua soal dalam teka-teki silang ini.
• Papan: Grid teka-teki silang tempat huruf-huruf jawaban diisi.
• Chip: Elemen kecil bernomor yang menandai setiap soal.
• Stiker: Elemen grafis vektor datar bergaris tebal yang digunakan sebagai aksen visual.
• Gambar: Output akhir berupa rendering bergaya poster dari papan teka-teki silang.