System Requirements Document for fiqih-wanita

1. Introduction

fiqih-wanita adalah sebuah website bertema "Fiqih Wanita" yang disusun sebagai artefak tugas mata kuliah Aplikasi dan Sistem Informasi. Website ini memperkenalkan, menyajikan, dan mendistribusikan materi kajian fiqih wanita dalam bahasa Indonesia, sekaligus menyediakan keluaran berupa file Word yang dapat diserahkan sebagai hasil tugas mata kuliah.

Produk ini memiliki dua audiensi yang saling terkait:

• Penyusun Materi Fiqih Wanita — mahasiswa yang menyusun dan memiliki konten website, dengan identitas penulis Julia (NIM 2520203870230026), yang membutuhkan materi tersaji di web dan tersedia sebagai dokumen Word untuk diserahkan.
• Pembaca Materi Fiqih Wanita — pengguna yang membuka website untuk membaca dan mempelajari materi fiqih wanita, dengan hasil akhir berupa pemahaman isi materi.

Nada produk bersifat tenang, khidmat, dan akademis: sebuah ruang baca, bukan dasbor. Website diposisikan sebagai "kembaran digital" dari manuskrip tercetak, sehingga ekspor .docx terasa wajar dan menyatu dengan pengalaman membaca.

2. System Overview

Website Fiqih Wanita adalah aplikasi web satu-halaman-ke-halaman (multi-halaman) yang menyajikan materi fiqih wanita dalam tata letak baca yang tenang, dengan identitas penulis dan konteks mata kuliah yang tercantum secara eksplisit, serta kemampuan menghasilkan dan mengunduh materi dalam format file Word.

Aktor yang diterima (closed set):

• Penyusun Materi Fiqih Wanita (persona manusia aktif) — menyusun dan memiliki konten; identitas penulis Julia, NIM 2520203870230026.
• Pembaca Materi Fiqih Wanita (persona manusia aktif) — membaca dan mempelajari materi.

Perilaku yang diterima (ringkas):

• Menampilkan judul "Fiqih Wanita" dan konteks mata kuliah Aplikasi dan Sistem Informasi.
• Mencantumkan identitas penulis: Julia, NIM 2520203870230026.
• Menyajikan materi fiqih wanita untuk dibaca dan dipelajari.
• Menyediakan hasil dalam bentuk file Word yang dapat diunduh.

Kepemilikan (ownership): seluruh permukaan interaktif dimiliki oleh aplikasi (first-party), dengan akses tanpa login (access_requirement: none) pada ketiga halaman yang ditetapkan.

Pengecualian sempit (narrow exclusions):

• Tidak ada akun pengguna, autentikasi, atau manajemen peran.
• Tidak ada dasbor, telemetri, atau kontrol perangkat.
• Tidak ada mode gelap sebagai permukaan default.
• Tidak ada ilustrasi, emoji, 3D, atau fotografi stok orang/masjid.

2a. Product Interpretation and Delivery Boundary

Batas pengiriman (delivery boundary): Produk ini adalah website publik tanpa login yang dapat diakses siapa saja yang memiliki tautan. Tidak ada identitas aplikasi yang perlu dibangun karena tidak ada keadaan pengguna yang harus dimiliki secara privat, dilanjutkan, atau diikatkan pada peserta tertentu. Semua halaman dapat diakses secara anonim.

Batas saat ini (current):

• Tiga halaman: Landing, Materi, Unduh Word.
• Materi fiqih wanita disajikan sebagai bab-bab bernomor yang dapat dibaca.
• Ekspor .docx dihasilkan oleh aplikasi dan diunduh oleh pengguna.

Batas masa depan (future): Tidak ada kebutuhan masa depan yang dinyatakan secara eksplisit dalam sumber otoritatif. Setiap penambahan di luar tiga halaman dan empat kebutuhan eksplisit dianggap di luar cakupan generasi ini.

Kepemilikan eksternal: Tidak ada penyedia eksternal yang ditetapkan. Pembuatan file Word dilakukan oleh aplikasi (server-side), bukan oleh layanan pihak ketiga.

2b. Source Content Inventory

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

2c. Page Content and Component Coverage

Landing

Informasi dan keadaan:

• Judul situs "FIQIH WANITA" dalam Shippori Mincho, tracking lebar, berat 400–500.
• Subjudul bahasa Indonesia: "Materi Kajian untuk Mahasiswi" dalam huruf kapital kecil berwarna muted.
• Blok metadata penulis dalam tiga baris bergaris:
  • Julia · 2520203870230026
  • Aplikasi dan Sistem Informasi
  • Unduh dalam format Word dengan panah bronze.
• Konteks mata kuliah Aplikasi dan Sistem Informasi ditampilkan sebagai bagian dari blok metadata.

Aksi utama:

• Menavigasi ke halaman Materi untuk mulai membaca.
• Menavigasi ke halaman Unduh Word melalui tautan metadata "Unduh dalam format Word".

Aksi pendukung:

• Membaca identitas penulis dan konteks mata kuliah.

Entitas domain:

• Judul situs, subjudul, identitas penulis (nama + NIM), konteks mata kuliah.

Tanggung jawab komponen:

• Hero paper field — 100vh latar #F4F1EA dengan satu garis rambut bronze melintang penuh pada 22% tinggi.
• Wordmark block — judul di kiri atas, di atas garis.
• Metadata block — tiga baris bergaris di kanan bawah, di bawah garis.
• Vertical hairline — garis vertikal tipis pada kolom 9 sebagai penanda tepi baca.

Keadaan (states):

• Loading: tidak ada (halaman statis).
• Empty: tidak berlaku.
• Success: judul, subjudul, dan metadata tampil utuh; animasi fade-in 900ms dengan stagger 40ms.
• Error: tidak berlaku (tidak ada panggilan data).
• Recovery: tidak berlaku.

Materi

Informasi dan keadaan:

• Daftar bab bernomor 01–08 sebagai indeks.
• Isi materi fiqih wanita per bab, dengan sub-bagian dipisahkan garis rambut.
• Judul bab dan nomor bab ditampilkan dengan angka menggantung di margin.

Aksi utama:

• Membaca materi bab demi bab.
• Berpindah bab melalui indeks rel kiri (desktop) atau strip bab horizontal (mobile).

Aksi pendukung:

• Menavigasi ke halaman Unduh Word untuk mengunduh materi.

Entitas domain:

• Bab (nomor, judul, isi), sub-bagian, tabel aturan fiqh (bila diperlukan).

Tanggung jawab komponen:

• Reading column — lebar maksimum 68ch, line-height 1.85, font Zen Kaku Gothic New 17–18px.
• Chapter index rail — rel kiri dengan angka 01–08, opacity 0.35 → 1 saat masuk zona baca (IntersectionObserver, 600ms ease-out).
• Mobile chapter strip — baris horizontal snap-aligned pada 375px.
• Section dividers — garis 1px #D8D2C4 yang berhenti 3 kolom sebelum tepi kanan.
• Ruled tables — tabel bergaris untuk aturan fiqh yang memerlukan tabulasi.

Keadaan (states):

• Loading: tidak ada (konten statis).
• Empty: tidak berlaku (materi selalu tersedia).
• Success: bab tampil utuh, indeks dapat diklik, opacity bab aktif penuh.
• Error: tidak berlaku.
• Recovery: tidak berlaku.

Unduh Word

Informasi dan keadaan:

• Satu kartu dokumen terpusat berisi:
  • Nama file .docx.
  • Ukuran file.
  • Jumlah halaman.
  • Kerangka bergaris (ruled outline) dari dokumen yang akan diekspor.
• Aksi unduh berupa pill outline bronze (bukan tombol terisi).

Aksi utama:

• Menghasilkan file Word dari materi fiqih wanita.
• Mengunduh file Word yang dihasilkan.

Aksi pendukung:

• Melihat ringkasan isi dokumen sebelum mengunduh.
• Kembali ke halaman Materi untuk membaca.

Entitas domain:

• Dokumen Word (nama file, ukuran, jumlah halaman, kerangka isi).

Tanggung jawab komponen:

• Document card — kartu terpusat tanpa bayangan, radius 0px, dipisahkan garis rambut.
• Download pill — pill outline bronze #8C6A3F, tanpa isian.
• Outline list — daftar bergaris bab-bab yang akan diekspor.

Keadaan (states):

• Loading: indikator tenang saat file Word sedang dihasilkan.
• Empty: tidak berlaku (materi selalu tersedia untuk diekspor).
• Success: file Word terunduh dengan nama, ukuran, dan jumlah halaman yang sesuai.
• Error: pesan tenang bila pembuatan file gagal, dengan aksi coba lagi.
• Recovery: pengguna dapat mengulang proses unduh tanpa kehilangan konteks halaman.

3. Functional Requirements

FR-01 — Judul Website "Fiqih Wanita"

As a Pembaca Materi Fiqih Wanita I should melihat judul "Fiqih Wanita" saat membuka website so that saya langsung mengenali topik dan identitas situs.

• Provenance: explicit
• Trigger/input: Pengguna membuka halaman Landing.
• Observable result: Judul "FIQIH WANITA" tampil dalam Shippori Mincho, tracking lebar, berat 400–500, di kiri atas hero.
• Access state: anonim (tanpa login).
• Failure/recovery: tidak berlaku (konten statis).
• Continuation: pengguna dapat menggulir atau menavigasi ke Materi.

FR-02 — Konteks Mata Kuliah Aplikasi dan Sistem Informasi

As a Pembaca Materi Fiqih Wanita I should melihat konteks mata kuliah Aplikasi dan Sistem Informasi so that saya memahami bahwa situs ini adalah artefak tugas akademik.

• Provenance: explicit
• Trigger/input: Pengguna membuka halaman Landing.
• Observable result: Baris Aplikasi dan Sistem Informasi tampil dalam blok metadata penulis.
• Access state: anonim.
• Failure/recovery: tidak berlaku.
• Continuation: pengguna dapat menavigasi ke Materi atau Unduh Word.

FR-03 — Identitas Penulis Julia, NIM 2520203870230026

As a Penyusun Materi Fiqih Wanita I should melihat identitas penulis Julia dan NIM 2520203870230026 tercantum di website so that karya saya teratribusi dengan benar.

• Provenance: explicit
• Trigger/input: Pengguna membuka halaman Landing.
• Observable result: Baris Julia · 2520203870230026 tampil dalam blok metadata penulis.
• Access state: anonim.
• Failure/recovery: tidak berlaku.
• Continuation: pengguna dapat menavigasi ke Materi atau Unduh Word.

FR-04 — Membaca Materi Fiqih Wanita

As a Pembaca Materi Fiqih Wanita I should membaca materi fiqih wanita yang tersusun dalam bab-bab bernomor so that saya dapat mempelajari isi materi.

• Provenance: required_inference
• Trigger/input: Pengguna membuka halaman Materi dan memilih bab dari indeks.
• Observable result: Isi bab tampil dalam kolom baca 68ch dengan line-height 1.85; nomor bab aktif berubah opacity dari 0.35 ke 1.
• Access state: anonim.
• Failure/recovery: tidak berlaku (konten statis).
• Continuation: pengguna dapat melanjutkan ke bab berikutnya atau menavigasi ke Unduh Word.

FR-05 — Menghasilkan dan Mengunduh File Word

As a Penyusun Materi Fiqih Wanita I should menghasilkan dan mengunduh materi fiqih wanita dalam bentuk file Word so that saya dapat menyerahkannya sebagai tugas mata kuliah.

• Provenance: explicit
• Trigger/input: Pengguna membuka halaman Unduh Word dan menekan pill outline bronze untuk mengunduh.
• Observable result: File .docx terunduh dengan nama, ukuran, dan jumlah halaman yang ditampilkan pada kartu dokumen.
• Access state: anonim.
• Failure/recovery: bila pembuatan file gagal, pesan tenang ditampilkan dengan aksi coba lagi; pengguna dapat mengulang tanpa kehilangan konteks.
• Continuation: pengguna dapat kembali ke Materi untuk membaca atau mengunduh ulang.

FR-06 — Melihat Ringkasan Dokumen Word

As a Penyusun Materi Fiqih Wanita I should melihat ringkasan dokumen (nama file, ukuran, jumlah halaman, kerangka isi) sebelum mengunduh so that saya yakin dokumen yang diunduh sudah lengkap.

• Provenance: required_inference
• Trigger/input: Pengguna membuka halaman Unduh Word.
• Observable result: Kartu dokumen menampilkan nama file, ukuran, jumlah halaman, dan kerangka bergaris bab-bab yang akan diekspor.
• Access state: anonim.
• Failure/recovery: tidak berlaku.
• Continuation: pengguna dapat menekan pill unduh atau kembali ke Materi.

4. User Personas

Penyusun Materi Fiqih Wanita

Konteks produk: Mahasiswa yang menyusun dan memiliki konten website berjudul "Fiqih Wanita" untuk mata kuliah Aplikasi dan Sistem Informasi. Identitas penulis yang ditampilkan adalah Julia (NIM 2520203870230026).

Tujuan utama: Tersedianya materi fiqih wanita dalam bentuk dokumen Word yang dapat diserahkan sebagai tugas mata kuliah, sekaligus tersaji di website bertema fiqih wanita.

Tanggung jawab yang diterima:

• Menyusun materi fiqih wanita yang akan ditampilkan di website.
• Memastikan identitas penulis (Julia, NIM 2520203870230026) dan konteks mata kuliah tercantum.
• Menghasilkan dan mengunduh file Word sebagai keluaran tugas.

Input dan keputusan:

• Materi fiqih wanita yang disusun dalam bab-bab.
• Keputusan kapan mengunduh file Word untuk diserahkan.

Interaksi dengan peserta lain: Pembaca Materi Fiqih Wanita membaca materi yang disusun; Penyusun tidak berinteraksi langsung dengan pembaca, tetapi karyanya dikonsumsi oleh pembaca.

Keberhasilan yang dapat diamati: File .docx terunduh dengan nama, ukuran, dan jumlah halaman yang sesuai, siap diserahkan sebagai tugas.

Yang membedakan peran ini: Penyusun adalah pemilik konten dan pengguna utama fitur ekspor Word; fokusnya adalah kelengkapan dan kesiapan penyerahan dokumen, bukan sekadar membaca.

Pembaca Materi Fiqih Wanita

Konteks produk: Pengguna yang membuka website untuk membaca dan mempelajari materi fiqih wanita yang disusun.

Tujuan utama: Memahami isi materi fiqih wanita melalui halaman web bertema fiqih wanita.

Tanggung jawab yang diterima:

• Membaca materi bab demi bab.
• Berpindah bab melalui indeks rel kiri (desktop) atau strip bab horizontal (mobile).

Input dan keputusan:

• Pilihan bab yang ingin dibaca.
• Keputusan untuk melanjutkan ke bab berikutnya atau mengunduh materi.

Interaksi dengan peserta lain: Pembaca mengonsumsi materi yang disusun oleh Penyusun Materi Fiqih Wanita; tidak ada interaksi langsung antar-pengguna.

Keberhasilan yang dapat diamati: Materi terbaca utuh dalam kolom baca 68ch dengan line-height 1.85; nomor bab aktif berubah opacity dari 0.35 ke 1 saat masuk zona baca.

Yang membedakan peran ini: Pembaca berfokus pada pemahaman isi dan kenyamanan membaca teks panjang berbahasa Indonesia; tidak memiliki tanggung jawab atas penyusunan atau ekspor dokumen.

5. Core User Flows

Flow 1 — Pembaca Membuka Website dan Mengenal Konteks

1. Pembaca membuka tautan website Fiqih Wanita di peramban.
2. Halaman Landing dimuat: latar #F4F1EA 100vh dengan satu garis rambut bronze melintang pada 22% tinggi.
3. Judul "FIQIH WANITA" dan subjudul "Materi Kajian untuk Mahasiswi" muncul dengan fade-in 900ms dan stagger 40ms.
4. Pembaca membaca blok metadata di kanan bawah: Julia · 2520203870230026, Aplikasi dan Sistem Informasi, Unduh dalam format Word.
5. Pembaca memutuskan untuk mulai membaca dan menavigasi ke halaman Materi.
6. Hasil yang dapat diamati: Pembaca mengenali topik, identitas penulis, dan konteks mata kuliah.
7. Langkah berikutnya: Pembaca masuk ke Flow 2.

Flow 2 — Pembaca Membaca Materi Bab demi Bab

1. Pembaca tiba di halaman Materi.
2. Indeks rel kiri menampilkan nomor bab 01–08 dengan opacity 0.35.
3. Pembaca memilih bab pertama; nomor bab aktif berubah opacity dari 0.35 ke 1 (IntersectionObserver, 600ms ease-out).
4. Isi bab tampil dalam kolom baca 68ch dengan line-height 1.85, font Zen Kaku Gothic New 17–18px.
5. Pembaca menggulir ke bawah; sub-bagian dipisahkan garis 1px #D8D2C4 yang berhenti 3 kolom sebelum tepi kanan.
6. Pada perangkat mobile 375px, indeks rel berubah menjadi strip bab horizontal snap-aligned; pembaca menggeser strip untuk berpindah bab.
7. Hasil yang dapat diamati: Pembaca memahami isi bab yang dibaca.
8. Langkah berikutnya: Pembaca melanjutkan ke bab berikutnya atau menavigasi ke halaman Unduh Word (Flow 3).

Flow 3 — Penyusun Menghasilkan dan Mengunduh File Word

1. Penyusun membuka halaman Unduh Word.
2. Kartu dokumen terpusat menampilkan nama file .docx, ukuran file, jumlah halaman, dan kerangka bergaris bab-bab yang akan diekspor.
3. Penyusun meninjau ringkasan untuk memastikan kelengkapan dokumen.
4. Penyusun menekan pill outline bronze untuk memulai unduhan.
5. Aplikasi menghasilkan file Word dari materi fiqih wanita; indikator tenang ditampilkan selama proses.
6. Hasil yang dapat diamati: File .docx terunduh dengan nama, ukuran, dan jumlah halaman yang sesuai.
7. Kegagalan dan pemulihan: Bila pembuatan file gagal, pesan tenang ditampilkan dengan aksi coba lagi; Penyusun dapat mengulang tanpa kehilangan konteks halaman.
8. Langkah berikutnya: Penyusun menyerahkan file Word sebagai tugas mata kuliah, atau kembali ke Materi untuk membaca ulang.

Flow 4 — Pembaca Mengunduh Materi untuk Dibaca Luring

1. Pembaca berada di halaman Materi dan memutuskan untuk mengunduh materi.
2. Pembaca menavigasi ke halaman Unduh Word.
3. Pembaca melihat kartu dokumen dengan nama file, ukuran, jumlah halaman, dan kerangka isi.
4. Pembaca menekan pill outline bronze untuk mengunduh.
5. Hasil yang dapat diamati: File .docx terunduh dan dapat dibuka di aplikasi pengolah kata.
6. Kegagalan dan pemulihan: Bila unduhan gagal, pembaca dapat menekan ulang pill unduh.
7. Langkah berikutnya: Pembaca membaca materi secara luring atau kembali ke Materi untuk melanjutkan bacaan daring.

6. Visuals Colors and Theme

Muse: Kenya Hara — estetika kekosongan (emptiness as content). Halaman yang tenang seperti kertas untuk pengetahuan yang menuntut ketenangan.

Headline: Emptiness as content — paper-quiet pages for knowledge that asks for calm.

Palet (mode terang)

Larangan warna: Tidak ada biru, indigo, atau violet. Tidak ada gradien di mana pun.

Tipografi

• Headings: Shippori Mincho, berat 400–500 saja, tracking 0.02em–0.06em, tidak pernah bold.
• Body: Zen Kaku Gothic New, 400, 17–18px, line-height 1.85.
• Labels/metadata: 500 uppercase 11px, tracking 0.18em.
• Skala: 1.333 modular — display 40px mobile → 96px desktop (clamp), h2 28→44, h3 20→26, lead 18→21, body 16→18, caption 12→13, micro-label 10→11.

Bahasa Bentuk

• Persegi dan hampir persegi saja: radius 2px pada kontrol langka, 0px pada kartu dan gambar.
• Struktur dari garis rambut (1px #D8D2C4), ruang negatif luas, dan grid 12 kolom yang tenang.
• Gestur khusus: pemisah bagian adalah garis 1px yang berhenti 3 kolom sebelum tepi kanan, meninggalkan celah "belum selesai" yang disengaja.

Tata Letak

• Kolom baca tunggal sempit (maks 68ch) di tengah bidang kertas lebar.
• Rel indeks kiri persisten di desktop (nomor bab 01–08 dalam huruf kapital mono-ish muted) yang runtuh menjadi strip bab horizontal yang dapat digulir di mobile.
• Landing: potret tenang manuskrip — blok judul kiri atas, tengah kosong luas, metadata penulis kanan bawah.
• Materi: gulir kontinu bab-bab bernomor dengan sub-bagian dipisahkan garis rambut.
• Unduh Word: satu kartu terpusat berisi satu nama file, satu ukuran file, satu kerangka dokumen yang diekspor.
• Pada 375px semuanya menjadi satu kolom dengan gutter 24px dan rel indeks menjadi baris snap-aligned yang dapat digulir horizontal.

Gaya Citra

• Tanpa stok orang, tanpa ilustrasi, tanpa 3D.
• Citra bersifat material dan dokumenter: makro butiran kertas tanpa pemutih, satu goresan kaligrafi (khat) sebagai garis bronze tipis, foto atas meja kayu dengan buku catatan dan pena untuk halaman Unduh Word, dan diagram bergaris untuk aturan fiqh yang memerlukan tabel.
• Foto didesaturasi mendekati monokrom dengan cast hangat agar menyatu dalam palet kertas.

7. Signature Design Concept

Hero sebagai bidang kertas, bukan banner.

Halaman Landing adalah 100vh #F4F1EA dengan satu garis rambut bronze melintang penuh pada 22% tinggi. Di atas garis, kiri atas, duduk wordmark "FIQIH WANITA" dalam Shippori Mincho, 40px mobile → 96px desktop, tracked wide, dengan subjudul bahasa Indonesia "Materi Kajian untuk Mahasiswi" di bawahnya dalam 13px muted caps. Bagian tengah 40% viewport sengaja dibiarkan kosong. Di bawah garis, kanan bawah, blok metadata kecil dalam tiga baris bergaris — Julia · 2520203870230026, Aplikasi dan Sistem Informasi, Unduh dalam format Word dengan panah bronze. Satu garis rambut vertikal pada kolom 9 menandai tepi baca. Tidak ada tombol, tidak ada kartu, tidak ada gambar: kekosongan adalah komposisinya, dan satu-satunya warna di layar adalah satu garis bronze dan satu panah bronze.

Gerakan khas (signature moves):

• Hero 100vh kertas tanpa pemutih yang dibelah satu garis rambut bronze, judul kiri atas, metadata penulis kanan bawah — kekosongan itu sendiri adalah pernyataan desain.
• Indeks bab sebagai rel kiri angka bergaris (01–08) yang memudar dari 35% ke opacity penuh saat menggulir ke setiap bab, dan menjadi strip snap horizontal di mobile.
• Pemisah bagian adalah garis 1px yang berhenti tiga kolom sebelum margin kanan, meninggalkan celah sengaja yang berulang di setiap halaman.
• Halaman Unduh Word adalah satu "kartu dokumen" terpusat: nama file, ukuran file, jumlah halaman, dan kerangka bergaris dari .docx yang diekspor, dengan aksi unduh sebagai pill outline bronze — tidak ada tombol terisi di seluruh situs.
• Semua body text berada dalam measure 68ch pada line-height 1.85 dengan angka bab menggantung di margin, sehingga bagian fiqh panjang terbaca seperti manuskrip tercetak, bukan artikel web.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction)

Motion Tempo: still

Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: Bidang kertas #F4F1EA 100vh dengan satu garis rambut bronze melintang pada 22% tinggi; wordmark "FIQIH WANITA" di kiri atas, blok metadata penulis di kanan bawah.
• Input → transformation → outcome thesis: Saat halaman dimuat, wordmark dan judul memudar masuk selama 900ms dengan stagger 40ms; setelah itu tidak ada yang bergerak. Saat pengguna menggulir, angka bab memudar dari opacity 0.35 ke 1 saat masuk zona baca (IntersectionObserver, 600ms ease-out). Hover pada tautan adalah garis rambut bawah yang tumbuh dari kiri selama 200ms.
• Motion vocabulary: Fade-in tenang, stagger 40ms, fade opacity bab 0.35 → 1, garis rambut bawah tumbuh dari kiri. Tidak ada marquee, ticker, atau gerakan dekoratif kontinu.
• Composed first frame: Latar #F4F1EA penuh; garis rambut bronze melintang pada 22% tinggi; wordmark di kiri atas di atas garis; subjudul muted caps di bawah wordmark; blok metadata tiga baris di kanan bawah di bawah garis; garis rambut vertikal pada kolom 9.
• Reduced-motion state: Semua reveal instan; strip bab dapat digulir tanpa snapping; tidak ada animasi fade atau stagger.

9. Non-Functional Requirements

NFR-01 — Keterbacaan Teks Panjang

• Provenance: required_inference
• Constraint: Body text harus berada dalam measure maksimum 68ch dengan line-height 1.85 dan ukuran 17–18px.
• Rationale: Materi fiqih wanita adalah teks panjang berbahasa Indonesia yang harus nyaman dibaca dalam sesi panjang.

NFR-02 — Kontras Warna

• Provenance: required_inference
• Constraint: Teks utama #26241F pada latar #F4F1EA harus mencapai kontras minimal 13.4:1.
• Rationale: Memastikan keterbacaan bagi pembaca dengan gangguan penglihatan ringan.

NFR-03 — Aksesibilitas Gerakan

• Provenance: required_inference
• Constraint: Dengan prefers-reduced-motion, semua reveal harus instan dan strip bab dapat digulir tanpa snapping.
• Rationale: Menghormati preferensi pengguna yang sensitif terhadap gerakan.

NFR-04 — Keterbacaan Kontrol di Semua Viewport

• Provenance: required_inference
• Constraint: Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px; tidak ada elemen lain yang menutupi bagian mana pun.
• Rationale: Memastikan pengalaman baca yang utuh di semua ukuran layar.

NFR-05 — Format Keluaran Word

• Provenance: explicit
• Constraint: Keluaran yang diminta harus disediakan dalam bentuk file Word (.docx).
• Rationale: Kebutuhan eksplisit pengguna untuk penyerahan tugas mata kuliah.

NFR-06 — Bahasa Antarmuka

• Provenance: explicit
• Constraint: Antarmuka dan materi disajikan dalam bahasa Indonesia.
• Rationale: Audiens adalah mahasiswi dan dosen berbahasa Indonesia.

10. Tech Stack

• Frontend: React (web) — antarmuka baca dengan kolom 68ch, rel indeks bab, dan kartu dokumen.
• Backend: Python / FastAPI — menghasilkan file .docx dari materi fiqih wanita dan menyajikan endpoint unduhan.
• Storage: penyimpanan berkas untuk materi dan file .docx yang dihasilkan.
• Containerization: Docker / docker-compose — menjalankan frontend dan backend sebagai layanan yang dapat dijalankan bersama.
• Kubernetes: tidak diperlukan untuk cakupan saat ini (deployment tidak menuntut orkestrasi).

11. Assumptions and Constraints

Asumsi

• A-01: Materi fiqih wanita disusun dalam bab-bab bernomor (01–08) sesuai struktur indeks yang ditetapkan dalam arah desain. (required_inference)
• A-02: File Word dihasilkan oleh aplikasi (server-side) dari materi yang sama yang ditampilkan di halaman Materi. (required_inference)
• A-03: Website dapat diakses tanpa login oleh siapa saja yang memiliki tautan. (required_inference)
• A-04: Tidak ada kebutuhan masa depan yang dinyatakan secara eksplisit; cakupan generasi ini terbatas pada tiga halaman dan empat kebutuhan eksplisit. (explicit)

Kendala

• C-01: Judul website harus "Fiqih Wanita". (explicit)
• C-02: Identitas penulis yang ditampilkan: nama Julia, NIM 2520203870230026. (explicit)
• C-03: Konteks penggunaan: mata kuliah Aplikasi dan Sistem Informasi. (explicit)
• C-04: Keluaran yang diminta disediakan dalam bentuk file Word. (explicit)
• C-05: Tidak ada biru, indigo, atau violet sebagai aksen; tidak ada gradien. (explicit — arah kreatif)
• C-06: Tidak ada tombol terisi, bayangan jatuh, atau kartu dengan radius di atas 2px. (explicit — arah kreatif)
• C-07: Tidak ada ilustrasi, emoji, 3D, atau fotografi stok orang/masjid. (explicit — arah kreatif)
• C-08: Berat huruf display tetap 400–500; tidak pernah bold. (explicit — arah kreatif)
• C-09: Mode gelap bukan permukaan default; latar kertas adalah identitas. (explicit — arah kreatif)
• C-10: Tidak ada marquee, ticker, atau gerakan dekoratif kontinu. (explicit — arah kreatif)

12. Glossary

• Fiqih Wanita: Materi kajian hukum Islam yang berkaitan dengan perempuan; topik utama website.
• Aplikasi dan Sistem Informasi: Mata kuliah konteks tugas; dicantumkan sebagai bagian dari identitas situs.
• NIM: Nomor Induk Mahasiswa; identitas akademik penulis (2520203870230026).
• Penyusun Materi Fiqih Wanita: Persona yang menyusun dan memiliki konten website.
• Pembaca Materi Fiqih Wanita: Persona yang membaca dan mempelajari materi.
• Landing: Halaman masuk anonim yang memperkenalkan website, konteks mata kuliah, dan identitas penulis.
• Materi: Halaman utama untuk menampilkan materi fiqih wanita.
• Unduh Word: Halaman terfokus untuk menghasilkan dan mengunduh materi dalam format file Word.
• .docx: Format file Word yang dihasilkan dan diunduh sebagai keluaran tugas.
• Measure 68ch: Lebar kolom baca maksimum 68 karakter untuk kenyamanan membaca teks panjang.
• Hairline: Garis 1px #D8D2C4 sebagai pemisah struktural.
• Pill outline bronze: Kontrol unduh berbentuk pill dengan garis tepi #8C6A3F tanpa isian.