System Requirements Document for bakso-baskom-karangmojo

1. Introduction

Dokumen ini menetapkan persyaratan sistem untuk Bakso Baskom Karangmojo, sebuah landing page satu halaman berbahasa Indonesia untuk warung bakso & mie ayam "Bakso Baskom Karangmojo" di Ngawis, Karangmojo, Kabupaten Gunungkidul, DI Yogyakarta.

Tujuan produk yang diturunkan dari sumber: memberi calon pelanggan — orang lokal Gunungkidul/Yogyakarta maupun pelintas jalan Karangmojo yang membuka ponsel — satu halaman cepat yang langsung menjawab pertanyaan "warung ini apa, di mana, buka atau tidak sekarang, dan bagaimana saya memesan atau datang?". Halaman harus membuat pengunjung dapat membaca identitas warung dan tagline, menilai keunggulan (ruang makan luas & nyaman, makan di tempat, bawa pulang), melihat menu Bakso dan Mie Ayam, membaca testimoni beserta badge rating 4,4 ★ dari 89 ulasan Google Maps, memeriksa alamat dan jam buka, lalu memutuskan untuk memesan lewat WhatsApp, menelepon, atau membuka lokasi di Google Maps.

Audiens dokumen ini adalah pelaksana tunggal yang membangun satu file HTML lengkap (CSS dan JavaScript di dalamnya), mobile-first, sesuai batasan sumber.

2. System Overview

Produk saat ini adalah satu halaman landing statis yang dibuka langsung di peramban tanpa proses masuk (login), tanpa akun, dan tanpa backend. Seluruh perilaku interaktif dijalankan di sisi klien di dalam satu file HTML:

• Aktor manusia: satu persona, yaitu Pengunjung Warung (Calon Pelanggan).
• Aktor non-persona: WhatsApp (tujuan keluar lewat tautan wa.me), Google Maps (tujuan keluar lewat tautan pencarian), dan telepon (aplikasi penelepon perangkat). Ketiganya adalah tujuan keluar, bukan halaman milik aplikasi.
• Perilaku yang diterima: penyajian data usaha, hero dengan dua tombol, tiga kartu keunggulan berikon, dua kartu menu dengan placeholder harga, tiga kartu testimoni placeholder plus badge rating, bagian lokasi & jam buka dengan tombol Google Maps dan tombol telepon, footer, tombol WhatsApp melayang, navigasi menempel dengan scroll halus, dan indikator "Buka/Tutup" otomatis berbasis jam lokal zona WIB dengan jam tutup 20.30.
• Kepemilikan: seluruh antarmuka adalah milik aplikasi (satu halaman publik). Tidak ada identitas aplikasi, sesi, atau kontrol izin yang diperlukan; halaman bersifat publik dan anonim.
• Pengecualian sempit: tidak ada gambar eksternal; tidak ada menu selain Bakso dan Mie Ayam; tidak ada ulasan atau nama reviewer yang dikarang; tidak ada halaman kedua, keranjang belanja, pembayaran daring, atau pemesanan di dalam situs.

2a. Product Interpretation and Delivery Boundary

Batas pengiriman saat ini. Produk dikirim sebagai satu file HTML mandiri yang memuat CSS dan JavaScript di dalamnya, dirancang mobile-first dan responsif. Tidak ada server aplikasi, basis data, atau API milik produk. Semua data usaha (nama, jenis, alamat, Plus Code, jam buka, telepon/WhatsApp, layanan, kisaran harga, rating, keunggulan) bersifat statis di dalam berkas dan ditampilkan apa adanya.

Kepemilikan akses. Halaman adalah permukaan masuk publik yang anonim. Tidak ada identitas milik aplikasi, pendaftaran, verifikasi, atau sesi yang dibutuhkan, karena tidak ada keadaan pengguna yang harus dimiliki, dilanjutkan, atau diikatkan pada peserta tertentu. Semua tindakan bermakna (memesan, menelepon, membuka lokasi) diserahkan ke tujuan milik penyedia di luar situs: WhatsApp, aplikasi telepon, dan Google Maps.

Batas saat ini vs. masa depan. Yang termasuk cakupan saat ini adalah seluruh struktur, fungsi, dan desain yang disebut pada Bagian 3. Yang berada di luar cakupan saat ini: mengganti placeholder (harga, jam buka pagi, ulasan, nama reviewer, foto) dengan data asli adalah pekerjaan penyuntingan konten oleh pemilik warung, bukan fitur produk; pemesanan daring, pembayaran, akun, dan halaman tambahan tidak diminta dan tidak dibangun.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source pada sumber, sehingga bagian inventaris konten sumber tidak disertakan.

2c. Page Content and Component Coverage

Landing

Satu halaman publik tunggal (sesuai batasan tepat satu halaman) yang memuat seluruh isi dan perilaku yang diterima. Halaman ini anonim dan tidak memerlukan identitas.

Informasi dan keadaan yang ditampilkan

• Nama warung: "Bakso Baskom Karangmojo"; jenis: restoran bakso & mie ayam.
• Tagline singkat, mis. "Bakso porsi baskom, ruang makan luas di Karangmojo".
• Alamat lengkap: Ngawis II, Ngawis, Karangmojo, Kabupaten Gunungkidul, DI Yogyakarta 55891; Plus Code: 2MX8+94 Ngawis.
• Jam buka: setiap hari, tutup pukul 20.30; jam buka pagi ditampilkan sebagai placeholder [ISI].
• Telepon/WhatsApp: 0813-2542-7299.
• Layanan: makan di tempat, bawa pulang (takeaway).
• Kisaran harga: Rp 1–25.000 per orang.
• Rating Google Maps: 4,4 dari 89 ulasan.
• Keunggulan dari pengunjung: ruang makan luas dan nyaman.
• Status "Buka/Tutup" yang dihitung otomatis dari jam lokal zona WIB.

Tindakan utama dan pendukung

• Utama: "Pesan via WhatsApp" (tautan wa.me/6281325427299 dengan pesan awal "Halo Bakso Baskom, saya mau pesan bakso/mie ayam"), "Lihat Lokasi", "Buka di Google Maps" (tautan pencarian Google Maps dengan alamat), tombol telepon, dan tombol WhatsApp melayang di pojok kanan bawah.
• Pendukung: navigasi menempel dengan tautan anchor dan scroll halus; tombol "Menu" pada layar kecil yang membuka lembar navigasi.

Entitas domain

• Data usaha (identitas, alamat, Plus Code, jam buka, kontak, layanan, kisaran harga, rating).
• Item menu: Bakso dan Mie Ayam (hanya dua ini), masing-masing dengan placeholder harga Rp [ISI].
• Testimoni: tiga kartu dengan placeholder [ISI ulasan asli dari Google Maps] dan [ISI nama reviewer].
• Status buka/tutup (terhitung, bukan data statis).

Tanggung jawab komponen

• Navigasi menempel (sticky): menampilkan wordmark, tautan anchor (Keunggulan, Menu, Lokasi), pil status Buka/Tutup, dan tombol WhatsApp; pada layar kecil tautan menciut menjadi satu tombol "Menu" yang membuka lembar krem.
• Hero: nama warung, tagline, pil status, tombol "Pesan via WhatsApp" dan "Lihat Lokasi", ilustrasi SVG baskom, dan pita marquee kuning di bawahnya.
• Keunggulan: tiga kartu berikon — Ruang makan luas & nyaman, Makan di tempat, Bawa pulang.
• Menu: dua kartu (Bakso, Mie Ayam) dengan chip harga placeholder.
• Testimoni: tiga kartu placeholder plus badge rating besar "4,4 ★ dari 89 ulasan Google Maps".
• Lokasi & jam buka: alamat, Plus Code, jam buka, tombol "Buka di Google Maps", dan tombol telepon.
• Footer: nama, alamat, nomor telepon, dan tombol WhatsApp melayang.
• Area placeholder foto: kotak bergaris putus-putus dengan keterangan "Ganti dengan foto asli" dan komentar HTML yang menyebut nama berkas yang harus dimasukkan.

Keadaan pemuatan, kosong, sukses, galat, dan pemulihan

• Pemuatan: halaman statis; tidak ada keadaan pemuatan data. Animasi masuk (rise 16px, stagger huruf wordmark, settle badge rating) berjalan sekali saat elemen masuk viewport.
• Kosong: placeholder yang belum diganti ([ISI], [ISI ulasan asli dari Google Maps], [ISI nama reviewer], area foto) tetap tampil sebagai penanda yang jelas, bukan disembunyikan.
• Sukses: pengunjung membaca informasi, melihat status Buka/Tutup, dan berhasil membuka WhatsApp, penelepon, atau Google Maps.
• Galat: jika JavaScript gagal atau dinonaktifkan, pil status tidak dapat dihitung; halaman tetap menampilkan seluruh informasi statis dan tombol tetap berfungsi sebagai tautan biasa.
• Pemulihan: status dihitung ulang saat halaman dimuat dan diperbarui secara berkala sehingga pengunjung yang membuka halaman lama tetap melihat status yang benar; tidak ada keadaan rusak permanen.

3. Functional Requirements

Setiap butir adalah cerita As a ... I should ... dengan provenance, fakta siklus hidup, dan penerimaan yang dapat diamati.

FR-01 — Halaman tunggal responsif berbahasa Indonesia (explicit) As a Pengunjung Warung (Calon Pelanggan), I should membuka satu halaman landing berbahasa Indonesia yang responsif dan mobile-first, sehingga saya dapat membaca seluruh informasi warung dalam satu gulir tanpa berpindah halaman.

• Pemicu: pengunjung membuka berkas HTML.
• Hasil teramati: satu halaman dengan seluruh bagian (hero, keunggulan, menu, testimoni, lokasi & jam buka, footer) tersusun berurutan.
• Batasan: keluaran berupa satu file HTML lengkap dengan CSS dan JavaScript di dalamnya; tidak ada halaman kedua.
• Kegagalan/pemulihan: jika CSS gagal dimuat, konten tetap terbaca sebagai dokumen HTML biasa.
• Kelanjutan: pengunjung menggulir ke bagian berikutnya.

FR-02 — Penyajian data usaha (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat data usaha yang lengkap dan akurat, sehingga saya tahu warung ini apa, di mana, dan bagaimana menghubunginya.

• Data yang ditampilkan: nama "Bakso Baskom Karangmojo"; jenis restoran bakso & mie ayam; alamat Ngawis II, Ngawis, Karangmojo, Kabupaten Gunungkidul, DI Yogyakarta 55891; Plus Code 2MX8+94 Ngawis; jam buka setiap hari tutup pukul 20.30 dengan jam buka pagi sebagai placeholder [ISI]; telepon/WhatsApp 0813-2542-7299; layanan makan di tempat dan bawa pulang; kisaran harga Rp 1–25.000 per orang; rating Google Maps 4,4 dari 89 ulasan; keunggulan ruang makan luas dan nyaman.
• Hasil teramati: setiap butir data tampil di halaman.
• Kelanjutan: pengunjung menuju bagian yang relevan (menu, lokasi, atau kontak).

FR-03 — Hero dengan nama, tagline, dan dua tombol (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat nama warung, tagline singkat, dan dua tombol aksi di bagian hero, sehingga saya langsung memahami identitas warung dan pilihan tindakan saya.

• Isi: nama warung; tagline singkat (mis. "Bakso porsi baskom, ruang makan luas di Karangmojo"); tombol "Pesan via WhatsApp" dan "Lihat Lokasi".
• Hasil teramati: kedua tombol tampil besar dan dapat disentuh dengan nyaman di ponsel.
• Kelanjutan: menekan salah satu tombol membawa ke tindakan terkait (FR-09 atau FR-12).

FR-04 — Tiga kartu keunggulan berikon (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat tiga kartu keunggulan berikon, sehingga saya cepat menilai alasan datang ke warung ini.

• Isi: (1) Ruang makan luas & nyaman, (2) Makan di tempat, (3) Bawa pulang — masing-masing dengan ikon.
• Hasil teramati: tiga kartu tampil dengan ikon yang jelas.
• Kelanjutan: pengunjung menggulir ke bagian menu.

FR-05 — Kartu menu Bakso dan Mie Ayam dengan placeholder harga (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat kartu menu untuk Bakso dan Mie Ayam beserta placeholder harga, sehingga saya tahu apa yang dijual tanpa informasi yang dikarang.

• Isi: kartu Bakso dan kartu Mie Ayam; harga memakai placeholder Rp [ISI].
• Batasan: tidak mengarang menu lain selain Bakso dan Mie Ayam.
• Hasil teramati: tepat dua kartu menu tampil; harga tampil sebagai Rp [ISI].
• Kelanjutan: pengunjung memutuskan memesan lewat WhatsApp (FR-09).

FR-06 — Tiga kartu testimoni placeholder (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat tiga kartu testimoni dengan placeholder ulasan dan nama reviewer, sehingga saya tahu di mana ulasan asli akan ditampilkan tanpa membaca ulasan yang dikarang.

• Isi: tiga kartu; teks ulasan [ISI ulasan asli dari Google Maps]; nama [ISI nama reviewer].
• Batasan: jangan mengarang ulasan.
• Hasil teramati: tiga kartu tampil dengan placeholder verbatim.
• Kelanjutan: pengunjung membaca badge rating (FR-07).

FR-07 — Badge besar rating 4,4 ★ dari 89 ulasan (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat badge besar rating 4,4 ★ dari 89 ulasan Google Maps, sehingga saya mendapat sinyal kepercayaan yang cepat.

• Isi: badge besar bertuliskan rating 4,4 ★ dan jumlah 89 ulasan Google Maps.
• Hasil teramati: badge tampil menonjol di bagian testimoni.
• Kelanjutan: pengunjung melanjutkan ke lokasi & jam buka.

FR-08 — Bagian lokasi & jam buka dengan tombol Google Maps dan telepon (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat alamat, jam buka, tombol "Buka di Google Maps", dan tombol telepon, sehingga saya dapat menuju lokasi atau menelepon langsung.

• Isi: alamat lengkap; jam buka; tombol "Buka di Google Maps" yang menautkan ke pencarian Google Maps dengan alamat; tombol telepon.
• Hasil teramati: kedua tombol tampil dan dapat ditekan.
• Kelanjutan: pengunjung membuka Google Maps atau aplikasi penelepon.

FR-09 — Tombol WhatsApp dengan tautan dan pesan awal (explicit) As a Pengunjung Warung (Calon Pelanggan), I should menekan tombol WhatsApp yang membuka tautan wa.me/6281325427299 dengan pesan awal terisi, sehingga saya dapat memesan tanpa mengetik ulang.

• Pemicu: menekan tombol "Pesan via WhatsApp" (hero) atau tombol WhatsApp melayang.
• Hasil teramati: WhatsApp terbuka dengan nomor 6281325427299 dan pesan awal "Halo Bakso Baskom, saya mau pesan bakso/mie ayam".
• Kegagalan/pemulihan: jika WhatsApp tidak tersedia di perangkat, tautan tetap dapat dibuka di peramban sebagai halaman WhatsApp.
• Kelanjutan: pengunjung mengirim pesan dan menunggu balasan warung.

FR-10 — Navigasi menempel dengan scroll halus (explicit) As a Pengunjung Warung (Calon Pelanggan), I should memakai navigasi yang menempel di atas dan menggulir dengan halus ke bagian yang dituju, sehingga saya dapat berpindah bagian tanpa kehilangan konteks.

• Isi: navigasi menempel di atas; tautan anchor ke bagian halaman; scroll halus saat tautan ditekan.
• Hasil teramati: navigasi tetap terlihat saat menggulir; halaman bergulir halus ke bagian tujuan.
• Kegagalan/pemulihan: jika scroll halus tidak didukung, tautan tetap melompat ke bagian tujuan.
• Kelanjutan: pengunjung membaca bagian tujuan.

FR-11 — Indikator "Buka/Tutup" otomatis berbasis WIB (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat indikator "Buka/Tutup" yang dihitung otomatis dari jam lokal zona WIB dengan jam tutup 20.30, sehingga saya tahu apakah warung sedang buka sebelum berangkat.

• Pemicu: halaman dimuat dan waktu berjalan.
• Hasil teramati: indikator menampilkan "Buka" atau "Tutup" sesuai jam WIB saat itu; jam tutup 20.30 menjadi batas.
• Batasan: perhitungan memakai zona WIB; jam buka pagi masih placeholder [ISI].
• Kegagalan/pemulihan: jika JavaScript tidak berjalan, indikator tidak dihitung dan informasi jam buka statis tetap tampil.
• Kelanjutan: pengunjung memutuskan datang, menelepon, atau memesan.

FR-12 — Tombol "Lihat Lokasi" dan "Buka di Google Maps" (explicit) As a Pengunjung Warung (Calon Pelanggan), I should menekan tombol lokasi yang membuka pencarian Google Maps dengan alamat warung, sehingga saya dapat melihat rute menuju warung.

• Pemicu: menekan "Lihat Lokasi" (hero) atau "Buka di Google Maps" (lokasi & jam buka).
• Hasil teramati: Google Maps terbuka dengan pencarian alamat warung.
• Kelanjutan: pengunjung mengikuti rute menuju warung.

FR-13 — Footer dengan identitas dan kontak (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat footer berisi nama, alamat, dan nomor telepon, sehingga saya tetap dapat menemukan kontak di akhir halaman.

• Isi: nama warung, alamat, nomor telepon.
• Hasil teramati: footer tampil di akhir halaman dengan data yang benar.
• Kelanjutan: pengunjung menekan tombol WhatsApp melayang atau menutup halaman.

FR-14 — Tombol WhatsApp melayang di pojok kanan bawah (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat tombol WhatsApp melayang di pojok kanan bawah yang selalu tersedia, sehingga saya dapat memesan kapan saja selama menggulir.

• Isi: tombol melayang di pojok kanan bawah dengan tautan yang sama seperti FR-09.
• Hasil teramati: tombol tetap terlihat saat menggulir dan tidak menutupi teks, harga, atau kontrol lain.
• Kelanjutan: pengunjung menekan tombol dan melanjutkan ke WhatsApp.

FR-15 — Meta tag SEO (explicit) As a Pengunjung Warung (Calon Pelanggan), I should menemukan halaman ini lewat pencarian dengan judul dan deskripsi yang tepat, sehingga saya dapat menemukan "bakso baskom Karangmojo Gunungkidul".

• Isi: meta tag title dan description yang menyebut "bakso baskom Karangmojo Gunungkidul".
• Hasil teramati: judul dan deskripsi tampil pada hasil pencarian dan tab peramban.
• Kelanjutan: pengunjung membuka halaman.

FR-16 — Komentar kode pada bagian yang perlu diganti (explicit) As a pemilik warung yang menyunting berkas, I should menemukan komentar di kode pada bagian yang perlu diganti, sehingga saya dapat memperbarui konten tanpa menebak.

• Isi: komentar pada harga, jam buka pagi, ulasan, dan foto.
• Hasil teramati: setiap placeholder (Rp [ISI], [ISI] jam buka pagi, [ISI ulasan asli dari Google Maps], [ISI nama reviewer], area foto) ditandai komentar yang menjelaskan apa yang harus diganti.
• Kelanjutan: pemilik mengganti placeholder dengan data asli.

FR-17 — Tanpa gambar eksternal, dengan ilustrasi dan area placeholder foto (explicit) As a Pengunjung Warung (Calon Pelanggan), I should melihat halaman yang tampil penuh tanpa memuat gambar eksternal, sehingga halaman tetap cepat dan utuh meski sinyal lemah.

• Isi: gradient, emoji, atau ilustrasi SVG sederhana (mis. mangkuk/baskom bakso); area placeholder foto untuk diganti nanti.
• Hasil teramati: tidak ada permintaan gambar dari domain luar; ilustrasi tampil sebagai SVG/gradient/emoji; area foto tampil sebagai placeholder.
• Kelanjutan: pemilik mengganti area placeholder dengan foto asli.

FR-18 — Desain hangat dan kuliner lokal (explicit) As a Pengunjung Warung (Calon Pelanggan), I should merasakan nuansa hangat dan kuliner lokal dengan kesan ramah, lapang, dan sederhana, sehingga halaman terasa cocok untuk warung bakso lokal.

• Isi: palet merah bata/oranye, krem, dan aksen kuning; font Google dengan judul tebal (mis. Poppins atau Fredoka) dan isi mudah dibaca; sudut membulat; bayangan lembut; kontras teks baik; tombol besar yang nyaman disentuh di HP.
• Hasil teramati: warna, tipografi, bentuk, dan ukuran tombol sesuai arahan; teks tetap terbaca.
• Kelanjutan: pengunjung nyaman membaca dan menekan tombol.

4. User Personas

Pengunjung Warung (Calon Pelanggan)

Konteks produk. Orang yang mencari informasi tentang Bakso Baskom Karangmojo sebelum berkunjung atau memesan. Ia biasanya membuka halaman dari ponsel, sering di jalan atau di area dengan sinyal tidak stabil, dan memutuskan dalam hitungan detik apakah akan mampir, menelepon, atau memesan bawa pulang. Ia belum tentu pernah ke warung ini; sebagian adalah pelintas jalan Karangmojo, sebagian warga lokal Gunungkidul/Yogyakarta yang mencari tempat makan berkelompok.

Tujuan utama. Menentukan dengan cepat apakah warung ini layak dikunjungi sekarang — apa yang dijual, berapa kisaran harganya, apakah sedang buka, di mana lokasinya, dan bagaimana cara memesan atau menghubungi.

Tanggung jawab yang diterima (berbeda dari sekadar "memakai aplikasi"). Ia adalah satu-satunya aktor manusia dan menjalankan seluruh tugas berikut sendiri:

• Membaca nama warung dan tagline untuk memahami identitas dan janji warung.
• Menilai keunggulan: ruang makan luas & nyaman, makan di tempat, bawa pulang.
• Melihat menu Bakso dan Mie Ayam beserta kisaran harga (Rp 1–25.000 per orang) dan placeholder harga per item.
• Membaca testimoni dan badge rating 4,4 ★ dari 89 ulasan Google Maps sebagai sinyal kepercayaan.
• Memeriksa alamat, Plus Code, jam buka, dan indikator Buka/Tutup.
• Memilih tindakan: memesan lewat WhatsApp, menelepon, atau membuka lokasi di Google Maps.

Masukan dan keputusan. Masukan yang ia gunakan adalah isi halaman itu sendiri (data usaha, menu, testimoni, rating, jam buka, status buka/tutup). Keputusan yang ia ambil: datang sekarang atau tidak, memesan bawa pulang atau makan di tempat, dan memakai kanal mana (WhatsApp, telepon, atau navigasi).

Interaksi dengan peserta lain. Ia berinteraksi dengan warung melalui WhatsApp (mengirim pesan awal yang sudah terisi) atau telepon, dan dengan Google Maps untuk navigasi. Warung, WhatsApp, Google Maps, dan aplikasi penelepon adalah pihak di luar situs; halaman hanya menyediakan jalan keluarnya.

Keberhasilan yang dapat diamati. Ia berhasil membuka WhatsApp dengan pesan awal "Halo Bakso Baskom, saya mau pesan bakso/mie ayam", atau berhasil membuka Google Maps dengan alamat warung, atau berhasil memulai panggilan telepon — dan ia tahu status buka/tutup sebelum melakukannya.

5. Core User Flows

Alur 1 — Menilai warung dan memutuskan datang (Pengunjung Warung)

1. Konteks awal: Pengunjung membuka halaman Landing dari ponsel, mungkin dari hasil pencarian "bakso baskom Karangmojo Gunungkidul".
2. Tindakan: Ia membaca hero — nama "Bakso Baskom Karangmojo", tagline "Bakso porsi baskom, ruang makan luas di Karangmojo", dan pil status Buka/Tutup yang dihitung dari jam WIB (tutup 20.30).
3. Hasil teramati: Ia langsung tahu identitas warung dan apakah warung sedang buka.
4. Tindakan: Ia menggulir ke bagian Keunggulan dan membaca tiga kartu berikon: Ruang makan luas & nyaman, Makan di tempat, Bawa pulang.
5. Hasil teramati: Ia memahami alasan datang dan pilihan layanan.
6. Tindakan: Ia menggulir ke bagian Menu dan melihat kartu Bakso dan Mie Ayam dengan placeholder harga Rp [ISI], serta kisaran harga Rp 1–25.000 per orang.
7. Hasil teramati: Ia tahu apa yang dijual tanpa informasi yang dikarang.
8. Tindakan: Ia menggulir ke bagian Testimoni, membaca tiga kartu placeholder, dan melihat badge besar "4,4 ★ dari 89 ulasan Google Maps".
9. Hasil teramati: Ia mendapat sinyal kepercayaan dari rating.
10. Keputusan dan kelanjutan: Ia memilih salah satu alur berikut (Alur 2, 3, atau 4), atau menutup halaman jika memutuskan tidak datang.

Alur 2 — Memesan lewat WhatsApp (Pengunjung Warung)

1. Konteks awal: Setelah menilai warung (Alur 1), Pengunjung memutuskan memesan.
2. Tindakan: Ia menekan tombol "Pesan via WhatsApp" di hero, atau tombol WhatsApp melayang di pojok kanan bawah.
3. Hasil teramati: WhatsApp terbuka pada nomor 6281325427299 dengan pesan awal "Halo Bakso Baskom, saya mau pesan bakso/mie ayam" sudah terisi.
4. Tindakan: Ia menyesuaikan pesan bila perlu dan mengirimkannya.
5. Hasil teramati: Pesan terkirim ke warung; warung (pihak luar) menerima pesanan.
6. Kegagalan/pemulihan: Jika WhatsApp tidak tersedia di perangkat, tautan wa.me tetap terbuka di peramban sebagai halaman WhatsApp; jika tetap gagal, ia dapat memakai tombol telepon (Alur 3).
7. Kelanjutan: Ia menunggu balasan warung mengenai ketersediaan dan pengambilan pesanan.

Alur 3 — Menelepon warung (Pengunjung Warung)

1. Konteks awal: Pengunjung ingin bertanya langsung atau memesan lewat telepon.
2. Tindakan: Ia menggulir ke bagian Lokasi & jam buka dan menekan tombol telepon.
3. Hasil teramati: Aplikasi penelepon perangkat terbuka dengan nomor 0813-2542-7299.
4. Tindakan: Ia melakukan panggilan.
5. Hasil teramati: Warung (pihak luar) menerima panggilan.
6. Kegagalan/pemulihan: Jika panggilan tidak tersambung, ia dapat beralih ke WhatsApp (Alur 2).
7. Kelanjutan: Ia menyelesaikan pertanyaan atau pesanannya lewat telepon.

Alur 4 — Menemukan lokasi dan berangkat (Pengunjung Warung)

1. Konteks awal: Pengunjung memutuskan datang dan perlu rute.
2. Tindakan: Ia menekan tombol "Lihat Lokasi" di hero, atau menggulir ke bagian Lokasi & jam buka dan menekan "Buka di Google Maps".
3. Hasil teramati: Google Maps terbuka dengan pencarian alamat warung (Ngawis II, Ngawis, Karangmojo, Kabupaten Gunungkidul, DI Yogyakarta 55891; Plus Code 2MX8+94 Ngawis).
4. Tindakan: Ia mengikuti rute menuju warung.
5. Hasil teramati: Ia tiba di lokasi; jika datang di luar jam buka, ia sudah mengetahui status Tutup dari indikator di halaman.
6. Kegagalan/pemulihan: Jika Google Maps tidak tersedia, alamat dan Plus Code tetap terbaca di halaman untuk dimasukkan secara manual.
7. Kelanjutan: Ia makan di tempat atau memesan bawa pulang di warung.

Alur 5 — Berpindah bagian dengan navigasi menempel (Pengunjung Warung)

1. Konteks awal: Pengunjung berada di tengah halaman dan ingin menuju bagian tertentu.
2. Tindakan: Ia memakai navigasi menempel di atas — pada layar kecil ia menekan tombol "Menu" untuk membuka lembar navigasi, lalu memilih Keunggulan, Menu, atau Lokasi.
3. Hasil teramati: Halaman bergulir halus ke bagian tujuan; navigasi tetap terlihat.
4. Kegagalan/pemulihan: Jika scroll halus tidak didukung, halaman melompat langsung ke bagian tujuan.
5. Kelanjutan: Ia membaca bagian tujuan dan melanjutkan ke Alur 2, 3, atau 4.

Alur 6 — Pemilik warung mengganti placeholder (pemilik, pekerjaan penyuntingan konten)

1. Konteks awal: Pemilik warung membuka berkas HTML untuk memperbarui konten.
2. Tindakan: Ia mencari komentar kode yang menandai harga, jam buka pagi, ulasan, dan foto.
3. Hasil teramati: Setiap placeholder (Rp [ISI], [ISI] jam buka pagi, [ISI ulasan asli dari Google Maps], [ISI nama reviewer], area foto) ditemukan bersama komentar penjelas.
4. Tindakan: Ia mengganti placeholder dengan data asli dan menyimpan berkas.
5. Hasil teramati: Halaman menampilkan data asli; struktur dan fungsi lain tidak berubah.
6. Kelanjutan: Ia mengunggah berkas yang diperbarui.

6. Visuals Colors and Theme

Arah kreatif proyek bersifat otoritatif untuk bagian ini. Muse: Haraldur Thorleifsson — "Big-hearted boldness for a baskom-sized bowl of bakso". Headline arah: warna blok tebal, tipografi besar dan ramah, kartu membulat, kehangatan yang terbaca instan di layar kecil tanpa satu pun foto.

Mode terang (satu-satunya mode yang diminta):

Tidak ada warna biru, indigo, atau violet di seluruh sistem. Merah bata #B23A1B dipakai penuh pada sekitar sepertiga halaman; kuning #F2A81D tidak lebih dari sepersepuluh permukaan.

Tipografi. Judul: Fredoka 600–700, tracking sedikit dirapatkan (-0.01em); judul bagian memakai sentence case, sedangkan wordmark dan label eyebrow memakai HURUF BESAR dengan letterspacing +0.08em. Isi: Nunito Sans 400/600, line-height 1.65, lebar baca nyaman 62ch. Skala modular 1.333, mobile-first: wordmark hero clamp(44px, 13vw, 108px); judul bagian clamp(28px, 5vw, 44px); judul kartu 20/22px; isi 16/17px; label mikro 12px kapital +0.08em. Line-height 1.05 pada tampilan besar, 1.65 pada isi. Font Poppins, Inter, Roboto, Arial, Helvetica, dan system-ui tidak dipakai untuk judul maupun isi.

Bahasa bentuk. Radius 24–32px pada kartu dan area placeholder foto; pil penuh (999px) pada setiap tombol dan chip; pil status 999px di navigasi. Blok warna bertepi tegas dan pemisah bagian diagonal memotong kelembutan membulat: bidang merah hero berakhir dengan potongan miring 3 derajat. Badge menu dan rating berbentuk stiker persegi panjang yang diputar -2° dan +1.5° dengan garis luar cokelat hangat 3px dan bayangan datar bergeser 6px 6px 0 rgba(43,26,18,0.18) — tidak pernah bayangan buram. Tombol minimal 56px tinggi dengan padding horizontal 20px.

Ritme spasi dan tata letak. Satu kolom mobile-first dengan bagian berwarna penuh selebar layar yang bertumpuk seperti dinding bercat: hero merah bata → pita krem keunggulan dengan tiga kartu bertumpuk (2 kolom pada 768px, 3 kolom pada 1280px) → pita menu putih dengan dua kartu besar berdampingan mulai 768px → pita krem testimoni dengan stiker rating kuning tersemat di tepi atas pita → pita merah bata lokasi & jam buka dengan alamat, jam, dan dua tombol selebar penuh → footer cokelat gelap. Lebar konten maksimum 1120px, gutter 20px pada 375px dan 48px pada 1280px. Setiap judul dan tombol membungkus di dalam kontainernya pada 375px, 768px, dan 1280px; tidak ada yang terpotong atau tertutup tombol WhatsApp melayang (tombol duduk di kanan bawah dengan inset aman 16px, footer diberi padding bawah 96px).

Gaya citra. Tanpa gambar eksternal sama sekali. Subjek visual hero adalah SVG baskom buatan tangan: mangkuk lebar dangkal dilihat sedikit dari atas, bibir merah bata, bagian dalam krem, lima lingkaran bakso cokelat, pusaran garis mie, satu titik daun bawang hijau, dan tiga gulungan uap yang beranimasi naik — dipasang di atas piring lingkaran kuning seperti stiker. Setiap area "foto" adalah placeholder membulat bergaris putus-putus (radius 24px, isi krem, garis putus-putus cokelat 2px) dengan emoji kamera di tengah dan keterangan "Ganti dengan foto asli" plus komentar HTML yang menyebut nama berkas yang harus dimasukkan. Ikon tiga kartu keunggulan adalah SVG garis tebal (meja lebar dengan empat kursi, mangkuk dengan sumpit, kotak bawa pulang) digambar dengan stroke 2.5px cokelat di atas lingkaran kuning. Pola ubin/titik batik SVG berulang pada 6% opasitas memberi tekstur pada pita merah bata.

7. Signature Design Concept

"Poster warung yang menyambut dari jalan." Halaman pembuka publik dibangun sebagai poster besar yang terasa seperti papan nama warung yang dicat tangan, bukan hero SaaS.

• Bidang merah bata penuh #B23A1B mengisi viewport pertama. Di atasnya, wordmark "BAKSO BASKOM" disusun dua baris dalam Fredoka 700 huruf besar pada clamp(44px, 13vw, 108px) berwarna krem, dengan garis bawah kuning 6px di bawah kata "BASKOM", dan baris "KARANGMOJO" yang lebih kecil berwarna kuning bergaris luar di bawahnya.
• Ilustrasi baskom SVG kuning-dan-krem duduk besar di sisi kanan pada 768px ke atas (meluber 40px keluar tepi kanan), dan pada ponsel tampil sebagai ilustrasi 200px di tengah di atas tipografi. Uapnya bergerak naik perlahan.
• Pil status lalu lintas di atas wordmark: hijau #1F6B4A "Buka sampai 20.30" dengan titik berdenyut saat buka, atau merah gelap #7A2A2A "Tutup • buka besok" saat tutup — dihitung dari jam WIB.
• Dua pil tombol besar berdampingan (bertumpuk pada 375px): "Pesan via WhatsApp" kuning #F2A81D berteks cokelat, dan "Lihat Lokasi" sebagai pil hantu bergaris krem.
• Potongan miring 3 derajat menutup bidang merah dengan pita krem, dan tepat di bawahnya pita marquee kuning mengalirkan "BAKSO • MIE AYAM • BASKOM • KARANGMOJO • MAKAN DI TEMPAT • BAWA PULANG •".
• Stiker rating "4,4 ★ dari 89 ulasan Google Maps" adalah persegi kuning diputar -2° dengan garis luar cokelat 3px dan bayangan datar, tersemat separuh di tepi atas pita testimoni.

Komposisi ini hanya menyusun ulang konten, keadaan, dan kontrol yang sudah diterima — tidak menambah perilaku, halaman, atau tujuan baru.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Subjek fokus: ilustrasi SVG baskom (mangkuk lebar, bakso, pusaran mie, daun bawang) di atas piring lingkaran kuning, dengan tiga gulungan uap yang naik.
• Tesis input → transformasi → hasil: saat halaman dimuat, huruf wordmark "BAKSO BASKOM" muncul naik dengan stagger 90ms per huruf, ilustrasi baskom menyusul dengan gerakan masuk lembut, dan pil status Buka/Tutup langsung tampil dengan titik berdenyut bila buka — hasilnya pengunjung melihat poster warung yang "hidup" dan langsung tahu status warung tanpa menggulir.
• Kosakata gerak: kartu dan judul bagian naik 16px dengan ease-out 0.45s saat pertama kali masuk viewport (IntersectionObserver, sekali saja); stiker rating melakukan satu gerakan settle 6 derajat saat masuk; tombol mengecil ke 0.97 saat ditekan dan terangkat 2px saat hover; pita marquee kuning bergulir perlahan dari kanan ke kiri.
• Bingkai pertama yang tersusun: bidang merah bata penuh, wordmark dua baris di kiri, baskom SVG besar di kanan (ponsel: baskom di atas, wordmark di bawah), pil status di atas wordmark, dua pil tombol di bawah tagline, potongan miring krem dan pita marquee kuning di dasar viewport.
• Keadaan reduced-motion: semua gerakan masuk dihapus, marquee menjadi baris statis yang membungkus seluruh item, dan hanya umpan balik warna/keadaan instan yang tersisa.

9. Non-Functional Requirements

• NFR-01 — Satu berkas mandiri (explicit): keluaran berupa satu file HTML lengkap dengan CSS dan JavaScript di dalamnya; tidak ada berkas terpisah, tidak ada proses build, tidak ada backend. Rasional: batasan sumber langsung.
• NFR-02 — Mobile-first dan responsif (explicit): tata letak dirancang untuk ponsel lebih dulu dan tetap utuh pada 375px, 768px, dan 1280px; judul, wordmark, label, angka, teks kartu, dan kontrol tetap berada di dalam viewport dan kontainernya, membungkus atau menyesuaikan ukuran bila perlu. Rasional: batasan sumber langsung.
• NFR-03 — Bahasa Indonesia (explicit): seluruh teks antarmuka berbahasa Indonesia. Rasional: batasan sumber langsung.
• NFR-04 — Tanpa gambar eksternal (explicit): tidak ada permintaan gambar dari domain luar; hanya gradient, emoji, atau SVG sederhana. Rasional: batasan sumber langsung; juga menjaga halaman tetap cepat pada sinyal lemah.
• NFR-05 — Kontras teks baik (explicit): teks isi dan judul memakai #2B1A12 di atas krem (≈ 12:1) dan teks besar putih di atas merah bata (≈ 7:1); teks besar saja yang diletakkan di atas bidang merah. Rasional: batasan sumber langsung.
• NFR-06 — Tombol nyaman disentuh (explicit): tombol minimal 56px tinggi dengan padding horizontal 20px dan radius pil penuh. Rasional: batasan sumber langsung.
• NFR-07 — Tombol WhatsApp melayang tidak menutupi konten (explicit): tombol duduk di kanan bawah dengan inset aman 16px; footer diberi padding bawah 96px agar tidak ada teks, harga, atau kontrol yang tertutup. Rasional: batasan sumber langsung.
• NFR-08 — Indikator status berbasis WIB (explicit): perhitungan Buka/Tutup memakai zona WIB dengan jam tutup 20.30; status dihitung ulang saat halaman dimuat dan diperbarui berkala. Rasional: batasan sumber langsung.
• NFR-09 — Ketahanan tanpa JavaScript (required_inference): bila JavaScript gagal atau dinonaktifkan, seluruh informasi statis dan semua tautan (WhatsApp, Google Maps, telepon) tetap berfungsi; hanya indikator status yang tidak dihitung. Rasional: halaman harus tetap berguna pada perangkat atau jaringan yang gagal menjalankan skrip.
• NFR-10 — Aksesibilitas gerak (explicit, dari arah kreatif): dengan prefers-reduced-motion, semua gerakan masuk dihapus dan marquee menjadi baris statis yang membungkus seluruh item. Rasional: arah kreatif proyek.
• NFR-11 — SEO dasar (explicit): meta tag title dan description menyebut "bakso baskom Karangmojo Gunungkidul". Rasional: batasan sumber langsung.

10. Tech Stack

• HTML5 — satu berkas index.html lengkap, berbahasa Indonesia (lang="id"), dengan meta viewport dan meta tag SEO (title, description).
• CSS3 — ditulis di dalam <style> pada berkas yang sama; mobile-first, custom properties untuk palet, clamp() untuk skala tipografi, grid/flexbox untuk tata letak, @media (prefers-reduced-motion: reduce) untuk keadaan gerak terbatas.
• JavaScript (vanilla) — ditulis di dalam <script> pada berkas yang sama; menangani perhitungan status Buka/Tutup berbasis WIB (tutup 20.30), scroll halus untuk tautan anchor, toggle lembar navigasi pada layar kecil, dan IntersectionObserver untuk animasi masuk sekali jalan.
• Font Google — Fredoka (judul) dan Nunito Sans (isi), dimuat lewat Google Fonts.
• SVG inline — ilustrasi baskom, ikon tiga kartu keunggulan, dan pola ubin batik; tidak ada berkas gambar eksternal.
• Tidak ada framework, bundler, backend, basis data, atau API milik produk. Tautan keluar memakai wa.me/6281325427299 dan pencarian Google Maps berbasis URL.

11. Assumptions and Constraints

• [Asumsi — tidak ditentukan pengguna] Jam buka pagi tetap placeholder [ISI] sampai pemilik warung mengisinya; indikator Buka/Tutup hanya memakai batas tutup 20.30 yang eksplisit.
• [Asumsi — tidak ditentukan pengguna] Harga per item menu tetap placeholder Rp [ISI]; hanya kisaran harga Rp 1–25.000 per orang yang ditampilkan sebagai data nyata.
• [Asumsi — tidak ditentukan pengguna] Teks ulasan dan nama reviewer tetap placeholder verbatim; tidak ada ulasan yang dikarang.
• [Asumsi — tidak ditentukan pengguna] Area foto tetap placeholder sampai pemilik menambahkan foto asli; tidak ada gambar eksternal yang dimuat.
• [Batasan eksplisit] Tepat satu halaman; tidak ada halaman kedua, keranjang, pembayaran, atau pemesanan di dalam situs.
• [Batasan eksplisit] Menu hanya Bakso dan Mie Ayam; tidak ada menu lain yang dikarang.
• [Batasan eksplisit] Tidak ada warna biru, indigo, atau violet; tidak ada bayangan buram; tidak ada foto stok.
• [Batasan eksplisit] Komentar kode wajib ada pada harga, jam buka pagi, ulasan, dan foto.
• [Di luar cakupan saat ini] Akun pengguna, login, sesi, kontrol izin, backend, basis data, dan analitik tidak diminta dan tidak dibangun.

12. Glossary

• Baskom — mangkuk lebar dan dangkal; di sini merujuk pada porsi bakso besar yang menjadi ciri warung dan nama merek.
• Buka/Tutup — indikator status warung yang dihitung otomatis dari jam lokal zona WIB, dengan jam tutup 20.30.
• WIB — Waktu Indonesia Barat, zona waktu yang dipakai untuk perhitungan status buka/tutup.
• Plus Code — kode lokasi Google untuk alamat, di sini 2MX8+94 Ngawis.
• Placeholder — penanda teks yang harus diganti pemilik warung: Rp [ISI], [ISI] (jam buka pagi), [ISI ulasan asli dari Google Maps], [ISI nama reviewer], dan area foto.
• Marquee — pita kuning bergulir di bawah hero yang menampilkan kata kunci warung; menjadi baris statis saat prefers-reduced-motion aktif.
• Sticky nav — navigasi yang menempel di atas viewport selama halaman digulir.
• Takeaway — layanan bawa pulang.