System Requirements Document for nova-kewarisan

1. Introduction

nova-kewarisan adalah layanan informasi kewarisan (hukum waris Islam / faraid) berbahasa Indonesia yang melayani dua kebutuhan nyata pengguna dalam satu alur kerja: mencari jawaban atas pertanyaan tentang kewarisan, dan membuat poster kewarisan yang dapat dibagikan kepada keluarga.

Produk ini ditujukan untuk keluarga Indonesia dan pelajar yang datang dengan pertanyaan konkret — siapa yang mendapat bagian warisan, berapa besar bagiannya, dan mengapa demikian — serta membutuhkan penjelasan yang terstruktur, dapat dipercaya, dan dapat diteruskan kepada kerabat dalam bentuk poster yang siap dipakai.

Nada produk bersifat informatif, instruksional, dan agak formal: sebuah layanan publik, bukan merek gaya hidup. Struktur kewarisan — kelas ahli waris, pecahan bagian, dan hubungan antar-ahli waris — dijadikan struktur antarmuka itu sendiri.

2. System Overview

nova-kewarisan adalah aplikasi web dengan antarmuka kustom yang menyediakan dua kemampuan utama:

1. Tanya Jawab kewarisan — pengguna mengajukan pertanyaan tentang kewarisan dan menerima jawaban yang disajikan sebagai dokumen bernomor dengan tabel bagian warisan.
2. Pembuatan poster kewarisan — pengguna meminta pembuatan poster kewarisan, meninjau hasilnya, dan menerima poster tersebut.

Kedua kemampuan ini didukung oleh backend yang menghasilkan jawaban dan poster. Antarmuka kustom disajikan melalui tiga halaman: Landing, Tanya Jawab, dan Poster.

Aktor manusia aktif (katalog tertutup):

• Pencari Jawaban — pengguna yang membutuhkan jawaban atas pertanyaan tentang kewarisan.
• Pembuat Poster — pengguna yang membutuhkan poster tentang kewarisan.

Aktor non-persona: backend layanan (penghasil jawaban dan poster) sebagai sistem pendukung.

Batasan sempit yang dikecualikan dari cakupan saat ini:

• Tidak ada akun pengguna, autentikasi, atau pengelolaan profil pada rilis ini; seluruh halaman dapat diakses tanpa identitas.
• Tidak ada riwayat tersimpan, penyimpanan permanen, atau pustaka poster lintas sesi.
• Tidak ada kolaborasi antar-pengguna, komentar, atau berbagi langsung ke platform pihak ketiga.
• Tidak ada kalkulator warisan interaktif berbasis input data keluarga; jawaban dan poster dihasilkan dari permintaan pengguna, bukan dari basis data silsilah.
• Tidak ada konten di luar topik kewarisan.

2a. Product Interpretation and Delivery Boundary

Kepemilikan penyajian. Seluruh interaksi manusia pada rilis ini dimiliki oleh aplikasi pihak pertama melalui antarmuka kustom: halaman Landing sebagai permukaan masuk publik, halaman Tanya Jawab sebagai tempat pertanyaan diajukan dan jawaban diterima, dan halaman Poster sebagai tempat poster diminta, ditinjau, dan diterima. Tidak ada permukaan milik penyedia eksternal dan tidak ada tujuan eksternal yang menjadi pemilik alur kerja manusia.

Kepemilikan akses. Ketiga halaman bersifat publik tanpa persyaratan identitas (access_requirement: none). Pengguna dapat langsung mengajukan pertanyaan atau meminta poster tanpa membuat akun, masuk, atau memberikan kredensial. Karena tidak ada keadaan yang harus dimiliki secara privat, dilanjutkan, atau diikatkan pada peserta tertentu, tidak ada identitas milik aplikasi yang diperlukan dan tidak ada alur masuk yang dibuat.

Batas saat ini dan masa depan. Kemampuan saat ini terbatas pada pencarian jawaban kewarisan dan pembuatan poster kewarisan. Penyimpanan riwayat, akun, dan berbagi lintas pengguna berada di luar cakupan saat ini dan tidak diimplementasikan pada rilis ini.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang diberikan; bagian ini tidak berlaku.

2c. Page Content and Component Coverage

Landing

• Informasi/keadaan: pernyataan besar "KEWARISAN" sebagai baris terbesar, diikuti penjelasan singkat layanan (jawaban kewarisan dan pembuatan poster), legenda kecil-huruf besar "SATU PERTANYAAN — SATU JAWABAN — SATU POSTER", dan diagram ahli waris berkode warna.
• Tindakan utama: tombol merah "Ajukan Pertanyaan" (label putih huruf besar) menuju halaman Tanya Jawab.
• Tindakan pendukung: tombol sekunder bergaris hitam "Buat Poster" menuju halaman Poster.
• Entitas domain: kategori ahli waris (pasangan, anak, saudara), legenda kode warna.
• Tanggung jawab komponen:
  • Hero poster asimetris — judul terkunci pada kolom 1–8, diagram pada kolom 9–12 yang meluber ke tepi kanan; garis merah 4px di bawah kata "KEWARISAN" sepanjang lebar kolom.
  • Grid 12 kolom terlihat — garis kolom 1px hitam terekspos sebagai kerangka tata letak.
  • Diagram ahli waris — simpul berkode warna (orang tua merah, pasangan kuning, anak biru, saudara hijau) dengan penghubung 1px hitam; label tetap di dalam simpul.
  • Legenda — chip persegi datar berkode warna dengan label huruf besar.
  • Aturan horizontal tipis — pemisah dengan teks legenda kecil-huruf besar di dasar lipatan.
• Keadaan:
  • Loading: tidak ada (halaman statis).
  • Empty: tidak berlaku.
  • Success: halaman tampil penuh; kedua tombol dapat diklik.
  • Error: tidak berlaku untuk halaman statis; jika navigasi gagal, pengguna tetap berada di Landing dan dapat mencoba lagi.
  • Recovery: pengguna dapat memilih tombol lain atau memuat ulang halaman.

Tanya Jawab

• Informasi/keadaan: pertanyaan pengguna ditampilkan pada rel kiri bergaris dengan tag kategori merah; jawaban ditampilkan pada kolom kanan lebar dengan sub-poin bernomor dan tabel bagian warisan.
• Tindakan utama: mengirimkan pertanyaan kewarisan melalui kolom masukan pertanyaan.
• Tindakan pendukung: memperluas jawaban (memicu garis merah 4px menggambar dari kiri ke kanan), menyalin atau membaca tabel bagian.
• Entitas domain: pertanyaan, jawaban, kategori kewarisan, tabel bagian warisan (ahli waris, bagian/pecahan), sub-poin bernomor.
• Tanggung jawab komponen:
  • Rel pertanyaan — kolom kiri bergaris dengan tag kategori merah dan teks pertanyaan.
  • Kolom masukan pertanyaan — bidang teks dan kontrol kirim.
  • Badan jawaban — ukuran lebar, rata kiri ragged-right, sub-poin bernomor.
  • Tabel bagian — baris beraturan dengan garis rambut dan angka tabular (ahli waris, bagian).
  • Garis merah 4px — menggambar kiri-ke-kanan saat jawaban diperluas (satu-satunya gerakan).
• Keadaan:
  • Loading: indikator bahwa jawaban sedang disiapkan setelah pertanyaan dikirim.
  • Empty: keadaan awal sebelum pertanyaan diajukan — kolom jawaban kosong dengan arahan untuk mengajukan pertanyaan.
  • Success: jawaban tampil dengan tag kategori, sub-poin bernomor, dan tabel bagian.
  • Error: jika jawaban gagal dihasilkan, pesan kesalahan ditampilkan di kolom jawaban dengan tindakan untuk mengirim ulang pertanyaan.
  • Recovery: pengguna dapat mengirim ulang pertanyaan atau mengubah kata-kata pertanyaan lalu mengirim lagi.

Poster

• Informasi/keadaan: poster yang dihasilkan ditampilkan besar pada rasio aspek sebenarnya di dinding galeri; rel kontrol tetap di sisi kanan berisi baris berlabel (ahli waris, bagian, kode warna).
• Tindakan utama: meminta pembuatan poster kewarisan.
• Tindakan pendukung: meninjau poster, membaca rel kontrol berlabel, menerima/mengunduh hasil poster.
• Entitas domain: poster kewarisan, ahli waris, bagian, kode warna, legenda.
• Tanggung jawab komponen:
  • Dinding galeri — area tampilan poster pada rasio aspek sebenarnya.
  • Rel kontrol tetap — baris berlabel (ahli waris, bagian, kode warna) dengan nilai sejajar dalam kolom tabular.
  • Kontrol permintaan poster — pemicu pembuatan poster.
  • Kontrol penerimaan hasil — tindakan mengunduh/menerima poster.
• Keadaan:
  • Loading: indikator bahwa poster sedang dibuat.
  • Empty: keadaan awal sebelum poster diminta — dinding galeri kosong dengan arahan untuk meminta poster.
  • Success: poster tampil pada rasio aspek sebenarnya dengan rel kontrol berlabel terisi.
  • Error: jika pembuatan poster gagal, pesan kesalahan ditampilkan dengan tindakan untuk mencoba lagi.
  • Recovery: pengguna dapat meminta ulang pembuatan poster.

3. Functional Requirements

FR-1 — Mengajukan pertanyaan kewarisan

• As a Pencari Jawaban I should mengajukan pertanyaan tentang kewarisan melalui kolom masukan di halaman Tanya Jawab so that saya dapat memperoleh jawaban atas pertanyaan saya.
• Provenance: explicit
• Lifecycle: Pemicu — pengguna mengetik pertanyaan dan mengirimkannya. Hasil yang dapat diamati — pertanyaan tampil pada rel kiri bergaris dengan tag kategori merah, dan jawaban disiapkan pada kolom kanan. Keadaan akses — publik, tanpa identitas. Kegagalan — jika jawaban gagal dihasilkan, pesan kesalahan tampil dengan tindakan kirim ulang. Kelanjutan — pengguna membaca jawaban atau mengirim pertanyaan lain.

FR-2 — Menerima jawaban kewarisan yang disajikan

• As a Pencari Jawaban I should menerima jawaban kewarisan yang disajikan sebagai dokumen bernomor dengan tabel bagian warisan so that saya memperoleh penjelasan yang jelas dan dapat digunakan.
• Provenance: explicit
• Lifecycle: Pemicu — pertanyaan berhasil diproses. Hasil yang dapat diamati — jawaban tampil pada kolom kanan lebar dengan sub-poin bernomor dan tabel bagian (ahli waris, bagian) berangka tabular; garis merah 4px menggambar kiri-ke-kanan saat jawaban diperluas. Keadaan akses — publik. Kegagalan — jawaban tidak tersedia; pesan kesalahan dan opsi kirim ulang ditampilkan. Kelanjutan — pengguna dapat mengajukan pertanyaan lanjutan atau beralih ke pembuatan poster.

FR-3 — Meminta pembuatan poster kewarisan

• As a Pembuat Poster I should meminta pembuatan poster kewarisan dari halaman Poster so that saya memperoleh poster kewarisan yang siap dipakai.
• Provenance: explicit
• Lifecycle: Pemicu — pengguna memicu pembuatan poster. Hasil yang dapat diamati — indikator pembuatan tampil, lalu poster muncul pada dinding galeri dengan transisi crossfade lambat tunggal. Keadaan akses — publik, tanpa identitas. Kegagalan — jika pembuatan gagal, pesan kesalahan tampil dengan tindakan coba lagi. Kelanjutan — pengguna meninjau poster pada rel kontrol berlabel.

FR-4 — Meninjau dan menerima hasil poster

• As a Pembuat Poster I should meninjau poster yang dihasilkan pada rasio aspek sebenarnya bersama rel kontrol berlabel (ahli waris, bagian, kode warna) dan menerima hasilnya so that saya dapat memastikan poster sesuai kebutuhan dan menggunakannya.
• Provenance: explicit
• Lifecycle: Pemicu — poster berhasil dibuat. Hasil yang dapat diamati — poster tampil besar pada rasio aspek sebenarnya; rel kontrol tetap di sisi kanan menampilkan baris berlabel dengan nilai sejajar dalam kolom tabular; pengguna dapat mengunduh/menerima poster. Keadaan akses — publik. Kegagalan — poster tidak tampil; pesan kesalahan dan opsi coba lagi. Kelanjutan — pengguna dapat meminta poster lain atau kembali ke Tanya Jawab.

FR-5 — Memahami layanan sebelum memulai

• As a Pencari Jawaban atau Pembuat Poster I should melihat penjelasan layanan dan diagram ahli waris berkode warna di halaman Landing so that saya memahami apa yang dapat dilakukan sebelum memulai.
• Provenance: required_inference
• Lifecycle: Pemicu — pengguna membuka halaman Landing. Hasil yang dapat diamati — judul besar "KEWARISAN", penjelasan singkat, legenda "SATU PERTANYAAN — SATU JAWABAN — SATU POSTER", diagram ahli waris berkode warna, dan dua tombol ("Ajukan Pertanyaan", "Buat Poster"). Keadaan akses — publik anonim. Kegagalan — tidak berlaku untuk halaman statis. Kelanjutan — pengguna memilih salah satu tombol untuk masuk ke alur kerja.

4. User Personas

Pencari Jawaban

Konteks produk. Pengguna ini datang dengan pertanyaan nyata tentang kewarisan — siapa yang mendapat bagian, berapa besar bagiannya, dan mengapa demikian. Ia membutuhkan penjelasan yang dapat dipercaya dan dapat ditindaklanjuti, bukan ringkasan umum.

Tujuan utama. Memperoleh penjelasan/jawaban yang dapat dipercaya mengenai kewarisan.

Tanggung jawab yang diterima. Mengajukan pertanyaan kewarisan dan membaca jawaban yang disajikan. Tanggung jawab ini berulang: pengguna dapat mengajukan beberapa pertanyaan dalam satu sesi.

Masukan dan keputusan. Pengguna merumuskan pertanyaan dalam bahasa Indonesia dan memutuskan kapan jawaban sudah cukup jelas untuk digunakan. Ia membaca tag kategori merah, sub-poin bernomor, dan tabel bagian untuk memverifikasi pemahamannya.

Interaksi dengan peserta lain. Pencari Jawaban tidak berinteraksi langsung dengan Pembuat Poster di dalam produk; keduanya adalah peran terpisah yang dapat dipegang oleh orang yang sama pada waktu berbeda. Pencari Jawaban berinteraksi dengan backend layanan yang menghasilkan jawaban.

Keberhasilan yang dapat diamati. Mendapatkan jawaban kewarisan yang jelas dan dapat digunakan, disajikan sebagai dokumen bernomor dengan tabel bagian warisan.

Yang membedakan peran ini. Fokusnya adalah pemahaman dan penjelasan — membaca, menafsirkan, dan memverifikasi. Ia tidak menghasilkan artefak yang dapat dibagikan; keluarannya adalah pemahaman.

Pembuat Poster

Konteks produk. Pengguna ini membutuhkan artefak visual tentang kewarisan yang dapat dibagikan kepada keluarga — sebuah poster yang merangkum struktur ahli waris dan bagiannya.

Tujuan utama. Menghasilkan poster kewarisan yang siap dipakai.

Tanggung jawab yang diterima. Meminta pembuatan poster kewarisan dan meninjau/mengunduh hasil poster. Tanggung jawab ini berulang: pengguna dapat meminta beberapa poster.

Masukan dan keputusan. Pengguna memicu pembuatan poster dan memutuskan apakah hasilnya sudah sesuai kebutuhan dengan meninjau poster pada rasio aspek sebenarnya dan memeriksa rel kontrol berlabel (ahli waris, bagian, kode warna).

Interaksi dengan peserta lain. Pembuat Poster tidak berinteraksi langsung dengan Pencari Jawaban di dalam produk. Ia berinteraksi dengan backend layanan yang menghasilkan poster.

Keberhasilan yang dapat diamati. Poster kewarisan yang dihasilkan sesuai kebutuhan, ditampilkan pada rasio aspek sebenarnya dan dapat diterima/diunduh.

Yang membedakan peran ini. Fokusnya adalah produksi dan verifikasi artefak — menghasilkan, meninjau, dan menerima keluaran visual. Ia tidak membaca penjelasan panjang; ia memeriksa diagram dan tabel pada poster.

5. Core User Flows

Alur 1 — Pencari Jawaban: mengajukan pertanyaan dan menerima jawaban

1. Konteks awal: Pencari Jawaban membuka halaman Landing tanpa identitas. Ia melihat judul besar "KEWARISAN", penjelasan singkat layanan, legenda "SATU PERTANYAAN — SATU JAWABAN — SATU POSTER", dan diagram ahli waris berkode warna.
2. Tindakan: Ia menekan tombol merah "Ajukan Pertanyaan".
3. Hasil: Halaman Tanya Jawab terbuka dengan kolom jawaban kosong dan arahan untuk mengajukan pertanyaan.
4. Tindakan: Ia mengetik pertanyaan kewarisan pada kolom masukan dan mengirimkannya.
5. Hasil: Pertanyaan tampil pada rel kiri bergaris dengan tag kategori merah; indikator bahwa jawaban sedang disiapkan muncul pada kolom kanan.
6. Hasil: Jawaban tampil pada kolom kanan lebar dengan sub-poin bernomor dan tabel bagian warisan berangka tabular; garis merah 4px menggambar kiri-ke-kanan saat jawaban diperluas.
7. Keputusan: Ia membaca jawaban dan memutuskan apakah sudah cukup jelas.
8. Kelanjutan: Ia dapat mengajukan pertanyaan lanjutan (kembali ke langkah 4) atau beralih ke halaman Poster untuk membuat poster.
9. Kegagalan dan pemulihan: Jika jawaban gagal dihasilkan, pesan kesalahan tampil di kolom jawaban dengan tindakan kirim ulang. Ia dapat mengirim ulang pertanyaan atau mengubah kata-kata pertanyaan lalu mengirim lagi.

Alur 2 — Pembuat Poster: meminta, meninjau, dan menerima poster

1. Konteks awal: Pembuat Poster membuka halaman Landing tanpa identitas.
2. Tindakan: Ia menekan tombol sekunder bergaris hitam "Buat Poster".
3. Hasil: Halaman Poster terbuka dengan dinding galeri kosong dan arahan untuk meminta poster.
4. Tindakan: Ia memicu pembuatan poster kewarisan.
5. Hasil: Indikator bahwa poster sedang dibuat muncul.
6. Hasil: Poster muncul pada dinding galeri pada rasio aspek sebenarnya dengan transisi crossfade lambat tunggal; rel kontrol tetap di sisi kanan terisi baris berlabel (ahli waris, bagian, kode warna) dengan nilai sejajar dalam kolom tabular.
7. Keputusan: Ia meninjau poster dan memeriksa rel kontrol untuk memastikan poster sesuai kebutuhan.
8. Tindakan: Ia menerima/mengunduh poster.
9. Kelanjutan: Ia dapat meminta poster lain (kembali ke langkah 4) atau kembali ke halaman Tanya Jawab.
10. Kegagalan dan pemulihan: Jika pembuatan poster gagal, pesan kesalahan tampil dengan tindakan coba lagi. Ia dapat meminta ulang pembuatan poster.

Alur 3 — Pencari Jawaban atau Pembuat Poster: memahami layanan sebelum memulai

1. Konteks awal: Pengguna membuka halaman Landing tanpa identitas.
2. Tindakan: Ia membaca judul besar "KEWARISAN", penjelasan singkat layanan, dan legenda "SATU PERTANYAAN — SATU JAWABAN — SATU POSTER".
3. Hasil: Ia melihat diagram ahli waris berkode warna (orang tua merah, pasangan kuning, anak biru, saudara hijau) dengan penghubung 1px hitam dan label di dalam simpul.
4. Keputusan: Ia memutuskan apakah akan mencari jawaban atau membuat poster.
5. Kelanjutan: Ia menekan "Ajukan Pertanyaan" (lanjut ke Alur 1) atau "Buat Poster" (lanjut ke Alur 2).

6. Visuals Colors and Theme

Muse: Massimo Vignelli. Headline direction: Systematic clarity for inheritance law — a coded, wayfinding poster system.

Mode: Terang (light mode) sebagai mode utama.

Warna (token peran):

Aturan proporsi warna: Merah menempati sekitar 8% dari setiap layar; kuning/biru/hijau bersama-sama di bawah 10%. Tidak ada gradien dekoratif.

Tipografi:

• Judul: Archivo — Grotesque, tracking rapat (-0.02em), bobot berat untuk judul gaya poster besar, huruf besar small-caps untuk label dan nama kategori, selalu rata kiri ragged-right.
• Badan: Archivo.
• Data dan pecahan: angka tabular.
• Skala: modular 1.25 dengan lompatan display — 40px mobile / 72px tablet / 112px desktop untuk pernyataan hero; 32/40/48 untuk kepala bagian; 20/22/24 untuk subkepala; 17 untuk badan; 13 huruf besar label dengan tracking 0.08em.

Bahasa bentuk: Tepi keras, radius sudut nol. Garis 1px hitam atau 4px hitam untuk pemisah bagian. Chip kategori adalah persegi datar dengan isian warna solid dan teks putih atau hitam. Diagram menggunakan lingkaran, persegi, dan penghubung lurus saja. Tidak ada yang membulat, tidak ada yang mengambang, tidak ada bayangan.

Ritme spasi: Grid 12 kolom dengan garis kolom 1px terlihat di halaman Landing. Hero asimetris: tipe terkunci pada kolom 1–8, diagram berkode warna pada kolom 9–12 yang meluber ke tepi kanan. Tanya Jawab adalah tata letak dokumen dua kolom — pertanyaan pada rel kiri bergaris dengan tag kategori merah, jawaban pada ukuran kanan lebar dengan sub-poin bernomor dan tabel bagian. Poster adalah dinding galeri: poster ditampilkan besar pada rasio aspek sebenarnya dengan rel kontrol tetap di sisi kanan berisi baris berlabel (ahli waris, bagian, kode warna). Setiap nilai sejajar dalam kolom tabular.

Gaya citra: Diagram adalah citraannya — skema hubungan ahli waris dengan penghubung lurus dan simpul berkode warna, blok pecahan digambar sebagai persegi panjang proporsional, dan legenda yang sekaligus menjadi kunci poster. Fotografi hanya digunakan bila informasional — satu citra dokumenter hitam-putih kontras tinggi dari dokumen atau buku besar keluarga, dipotong keras ke grid. Tidak ada ilustrasi demi ilustrasi itu sendiri, tidak ada 3D, tidak ada orang stok, tidak ada gumpalan gradien.

Yang dihindari: Sudut membulat, tombol pil, bayangan lembut, kartu kaca mengambang; gradien dan gumpalan gradien; biru atau indigo sebagai warna sinyal utama; komposisi hero SaaS terpusat (judul + subteks + tombol); font Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, dan system-ui; grid kartu identik dengan hover-lift; parallax, gerakan scroll-scrubbed, dan mikro-interaksi memantul; fotografi orang sebagai dekorasi.

Aksesibilitas teks dan kontrol: Judul, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Citra, dekorasi, dan gerakan mengikuti arah kreatif dan boleh dipotong, meluber, diputar, ditumpuk, atau dipotong sesuai arah, selama tidak menutupi teks atau kontrol yang dapat dibaca.

7. Signature Design Concept

Konsep: Poster kewarisan sebagai antarmuka — halaman Landing adalah poster Vignelli yang hidup, bukan hero SaaS.

Komposisi masuk publik (Landing):

• Kolom 1–8: Judul besar rata kiri dalam Archivo, ditumpuk dalam tiga baris dengan leading rapat, hitam di atas putih. Kata "KEWARISAN" ditetapkan sebagai baris terbesar, digarisbawahi oleh garis merah 4px yang membentang sepanjang lebar kolom. Di bawahnya, ditempelkan rata kiri, tombol merah persegi "Ajukan Pertanyaan" dengan label putih huruf besar, dan tombol sekunder bergaris hitam "Buat Poster".
• Kolom 9–12: Diagram ahli waris berkode warna — simpul orang tua merah, pasangan kuning, anak biru, saudara hijau — dengan penghubung 1px hitam, meluber ke tepi kanan viewport sesuai desain sementara semua label tetap di dalam simpulnya.
• Dasar lipatan: Aturan horizontal tipis hitam dengan legenda small-caps "SATU PERTANYAAN — SATU JAWABAN — SATU POSTER".
• Kerangka: Grid 12 kolom dengan garis kolom 1px hitam terekspos, sehingga struktur tata letak menjadi merek itu sendiri.

Gerakan khas: Garis merah 4px yang menggambar kiri-ke-kanan melintasi lebar judul saat jawaban diperluas — satu-satunya gerakan di seluruh produk.

Penerapan kode warna: Kategori ahli waris dirender sebagai kode warna ketat — persegi datar merah, kuning, biru, hijau dengan label huruf besar — diulang identik di seluruh diagram, tabel jawaban, legenda, dan poster yang dihasilkan.

Nol radius, nol bayangan, nol gradien.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: still Hero Dimensionality: flat

Landing Hero Motion Brief:

• Subjek fokus: Komposisi poster penuh viewport — judul "KEWARISAN" besar rata kiri pada kolom 1–8 dan diagram ahli waris berkode warna pada kolom 9–12 yang meluber ke tepi kanan.
• Tesis input → transformasi → hasil: Pengguna membuka Landing (input) → halaman dirender seketika tanpa animasi masuk (transformasi) → pengguna melihat struktur kewarisan sebagai poster yang dapat langsung ditindaklanjuti melalui dua tombol (hasil).
• Kosakata gerakan: Hampir tidak ada gerakan, sesuai desain. Transisi halaman instan. Satu-satunya gerakan adalah: wipe isian warna 120ms pada chip kategori saat dipilih, garis yang menggambar kiri-ke-kanan saat jawaban diperluas, dan satu crossfade lambat tunggal saat poster baru dihasilkan. Tidak ada parallax, tidak ada reveal yang dipicu scroll, tidak ada bounce.
• Bingkai pertama yang tersusun: Judul tiga baris hitam di atas putih dengan garis merah 4px di bawah "KEWARISAN", dua tombol rata kiri, diagram berkode warna di kanan yang meluber ke tepi, dan aturan horizontal tipis dengan legenda small-caps di dasar lipatan. Grid 12 kolom terlihat dengan garis kolom 1px hitam.
• Keadaan reduced-motion: Tata letak statis yang dapat digunakan — semua elemen tetap pada posisinya, tanpa wipe, tanpa crossfade; jawaban tetap dapat diperluas dan poster tetap dapat ditampilkan seketika.

9. Non-Functional Requirements

NFR-1 — Aksesibilitas teks dan kontrol (explicit, dari arah kreatif). Judul, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan agar muat; tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Alasan: memastikan keterbacaan di semua viewport yang ditentukan.

NFR-2 — Dukungan reduced-motion (explicit, dari arah kreatif). Dengan prefers-reduced-motion, sediakan tata letak statis yang dapat digunakan; konten yang bergerak atau dapat digulir harus tetap dapat dibawa sepenuhnya ke dalam tampilan. Alasan: aksesibilitas gerakan.

NFR-3 — Kinerja pembuatan jawaban dan poster (required_inference). Jawaban dan poster dihasilkan oleh backend; antarmuka harus menampilkan indikator loading selama proses dan tetap responsif. Alasan: diperlukan agar alur kerja manusia dapat diamati dan dipulihkan saat gagal.

NFR-4 — Pemulihan kesalahan (required_inference). Setiap kegagalan pembuatan jawaban atau poster harus menampilkan pesan kesalahan yang dapat diamati dan menawarkan tindakan coba lagi/kirim ulang. Alasan: kelangsungan alur kerja yang diterima.

NFR-5 — Bahasa antarmuka (explicit, dari konteks pengguna). Antarmuka dan konten disajikan dalam bahasa Indonesia. Alasan: audiens Indonesia.

NFR-6 — Tanpa identitas (explicit, dari kontrak halaman). Ketiga halaman dapat diakses tanpa akun, masuk, atau kredensial. Alasan: access_requirement: none pada seluruh permukaan interaksi.

10. Tech Stack

• Frontend: React (aplikasi web dengan antarmuka kustom).
• Backend: Python / FastAPI untuk menghasilkan jawaban kewarisan dan poster.
• Storage: Tidak ada penyimpanan permanen yang diperlukan pada rilis ini; keadaan bersifat sementara per sesi.
• Deployment: Docker / docker-compose untuk menjalankan frontend dan backend. Kubernetes tidak diperlukan untuk cakupan saat ini.

11. Assumptions and Constraints

Asumsi:

• A-1 — Pengguna memiliki koneksi internet untuk mengakses layanan dan menghasilkan jawaban/poster. (required_inference)
• A-2 — Backend layanan mampu menghasilkan jawaban kewarisan dan poster dari permintaan pengguna. (required_inference)
• A-3 — Topik kewarisan mengacu pada hukum waris Islam (faraid) sesuai konteks arah kreatif. (required_inference)

Batasan:

• C-1 — Tidak ada akun, autentikasi, atau pengelolaan profil pada rilis ini. (explicit, dari kontrak halaman)
• C-2 — Tidak ada riwayat tersimpan, penyimpanan permanen, atau pustaka poster lintas sesi. (explicit, dari batas cakupan)
• C-3 — Tidak ada kolaborasi antar-pengguna, komentar, atau berbagi langsung ke platform pihak ketiga. (explicit, dari batas cakupan)
• C-4 — Tidak ada kalkulator warisan interaktif berbasis input data keluarga. (explicit, dari batas cakupan)
• C-5 — Tidak ada konten di luar topik kewarisan. (explicit, dari batas cakupan)
• C-6 — Palet, tipografi, bahasa bentuk, tata letak, dan nada mengikuti arah kreatif yang diberikan; template SaaS indigo/biru-putih dilarang. (explicit, dari arah kreatif)

12. Glossary

• Kewarisan — Hukum waris Islam (faraid); sistem pembagian harta warisan kepada ahli waris menurut bagian yang ditentukan.
• Faraid — Ilmu tentang bagian-bagian warisan yang telah ditetapkan.
• Ahli waris — Pihak yang berhak menerima bagian warisan (misalnya pasangan, anak, orang tua, saudara).
• Ashabah — Kategori ahli waris yang menerima sisa harta setelah bagian tetap dibagikan; ditandai dengan warna merah pada kode kategori.
• Bagian — Pecahan warisan yang diterima seorang ahli waris, disajikan dalam tabel berangka tabular.
• Poster kewarisan — Artefak visual yang dihasilkan yang merangkum struktur ahli waris dan bagiannya, ditampilkan pada rasio aspek sebenarnya.
• Rel kontrol — Panel tetap di sisi kanan halaman Poster berisi baris berlabel (ahli waris, bagian, kode warna).
• Kode warna kategori — Sistem warna ketat untuk kategori ahli waris: merah (orang tua/ashabah), kuning (pasangan), biru (anak), hijau (saudara).