Cerita Tentang Marina #1
Description
<!doctype html>
<title>Ketika Manusia Menjadi Tuhan bagi Dirinya Sendiri — Cerita & Ilustrasi</title> <style> :root{ --bg:#0f1724; --card:#0b1220; --muted:#9aa6b2; --accent:#b38fef; --glass: rgba(255,255,255,0.04); --text:#edf2f7; --highlight:#ffd39b; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } *{box-sizing:border-box} html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#071021);color:var(--text);} .wrap{max-width:980px;margin:28px auto;padding:22px} header{display:flex;align-items:center;gap:16px} .logo{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,#6b7280,#111827);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.6)} .logo span{font-weight:700;color:var(--highlight)} h1{font-size:20px;margin:0} p.lead{color:var(--muted);margin:6px 0 18px}.grid{display:grid;grid-template-columns:1fr 420px;gap:20px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
/* Story card */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:20px;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.byline{font-size:13px;color:var(--muted);margin-bottom:10px}
article p{line-height:1.6;color: #e6eef7}
article blockquote{background:var(--glass);padding:12px;border-left:4px solid var(--accent);margin:14px 0;border-radius:8px;color:var(--text)}
/* Illustration area */
.art{display:flex;flex-direction:column;gap:12px}
.canvas{background:linear-gradient(180deg,#071426 0%, #0b1626 100%);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center}
svg{max-width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{background:var(--glass);padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted);cursor:default}
/* Interactions */
.controls{display:flex;gap:8px;align-items:center}
button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
button.primary{background:linear-gradient(90deg,var(--accent),#ffb86b);border:none;color:#071021}
.tooltip{position:relative}
.tooltip .tip{position:absolute;left:50%;transform:translateX(-50%);bottom:115%;background:#061020;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);color:var(--muted);font-size:13px;white-space:nowrap;display:none}
.tooltip:hover .tip{display:block}
footer{margin-top:18px;color:var(--muted);font-size:13px}
MT
Ketika Manusia Menjadi Tuhan bagi Dirinya Sendiri
Cerita reflektif (reinterpretasi) berdasar eksperimen seni 1974 — plus ilustrasi simbolik yang ramah kebijakan.
<main class="grid" role="main">
<section class="card" aria-labelledby="story-title">
<div class="byline">Cerita & Refleksi — versi bebas hak cipta</div>
<article>
<h2 id="story-title">Legenda Singkat</h2>
<p>Pada suatu sore di tahun 1974, sebuah galeri seni sepi menjadi arena sebuah eksperimen: seorang perempuan bernama <strong>Marina</strong> memilih berdiri diam selama enam jam, membiarkan pengunjung berinteraksi dengannya tanpa ada balasan atau perlawanan.</p>
<p>Di hadapannya tersusun benda-benda simbolis — dari sebatang mawar, bulu, hingga alat dan objek yang menggugah rasa takut. Ia menyampaikan satu permintaan sederhana: "Gunakan apapun yang ada di sini padaku. Aku tidak akan melawan."</p>
<p>Awalnya, ada kelembutan: bunga, sentuhan hati, pelukan. Namun waktu berjalan, diamnya Marina membuat sebagian hati berubah — mereka bereksperimen pada batas-batas adab, dan beberapa berujung bertindak tidak berperikemanusiaan. Ketika enam jam itu usai, Marina menatap mereka satu per satu. Kerumunan yang tadi berani tiba-tiba luluh; tatapan membangkitkan rasa malu dan pertanggungjawaban.</p>
<blockquote>"Apa jadinya manusia jika diberi kebebasan mutlak tanpa konsekuensi?"</blockquote>
<p>Kisah ini memaksa kita menyelidiki mekanika kekuasaan dan empati: betapa mudahnya nurani terbungkam saat tak ada konsekuensi, dan betapa cepatnya rasa malu kembali hadir bila ada kesempatan untuk mempertanggungjawabkan perbuatan.</p>
<p>Siapa yang menegakkan tata krama—hukuman, agama, norma sosial—ataukah hati nurani masing-masing? Cerita ini mengajak kita percaya pada kemungkinan: bahwa peradaban sejati lahir dari kesadaran batin, bukan sekadar ancaman hukuman.</p>
<h3>Refleksi Singkat</h3>
<p>Manusia bisa memilih menjadi lembut atau kejam. Pembedanya sering bukan alat hukum, tetapi apakah mereka mendengar bisikan nurani ketika tak seorang pun memperhatikan.</p>
<p>Apakah kamu masih percaya bahwa manusia dapat berbuat baik meski tak ada yang melihat? Tuliskan pemikiranmu — dialog adalah awal perubahan.</p>
</article>
<footer>Versi ini adalah karya reinterpretasi untuk publik. Bebas dipakai ulang — beri kredit jika suka :)</footer>
</section>
<aside class="art card" aria-labelledby="art-title">
<div style="display:flex;justify-content:space-between;align-items:center">
<div>
<div class="byline">Ilustrasi simbolik</div>
<h3 id="art-title">Ruangan Eksperimen — Ilustrasi Interaktif</h3>
</div>
<div class="controls">
<button id="btn-dark">Toggle Kontras</button>
<button class="primary" id="btn-download">Salin/Unduh HTML</button>
</div>
</div>
<div class="canvas" role="img" aria-label="Ilustrasi Marina berdiri di galeri; meja berisi objek simbolis">
<!-- SVG ilustrasi simbolik, tanpa kekerasan eksplisit -->
<svg width="360" height="300" viewBox="0 0 360 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="false">
<defs>
<linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#10233b"/><stop offset="1" stop-color="#071426"/></linearGradient>
<filter id="soft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="6"/></filter>
</defs>
<!-- Latar -->
<rect width="100%" height="100%" fill="url(#g1)" rx="10"/>
<!-- Meja -->
<rect x="40" y="220" width="280" height="34" rx="6" fill="#0b2a3f" opacity="0.95"/>
<!-- Objek simbolis di meja: ikon sederhana -->
<!-- Mawar -->
<g class="obj" data-name="Mawar" transform="translate(60,210)">
<circle cx="0" cy="-8" r="8" fill="#c84a6b"/>
<rect x="-1" y="-4" width="2" height="22" fill="#357a3b"/>
</g>
<!-- Bulu -->
<g class="obj" data-name="Bulu" transform="translate(105,210)">
<path d="M0 -12 C 8 -14, 14 -8, 8 0 C 2 6, -8 10, 0 -12" fill="#f3f2ee" opacity="0.95"/>
</g>
<!-- Botol parfum -->
<g class="obj" data-name="Parfum" transform="translate(150,210)">
<rect x="-8" y="-18" width="16" height="18" rx="3" fill="#bfa1d6"/>
<rect x="-4" y="-24" width="8" height="6" rx="2" fill="#8f6bb2"/>
</g>
<!-- Gunting -->
<g class="obj" data-name="Gunting" transform="translate(195,210)">
<circle cx="-6" cy="-6" r="6" fill="#6b7280" opacity="0.95"/>
<rect x="-2" y="-6" width="26" height="4" rx="2" fill="#6b7280"/>
</g>
<!-- Pisau (simbolik, non-darah) -->
<g class="obj" data-name="Pisau" transform="translate(240,210)">
<rect x="-1" y="-20" width="2" height="20" fill="#d1d5db" rx="1"/>
<rect x="-5" y="-4" width="10" height="6" rx="2" fill="#7b5e4a"/>
</g>
<!-- Siluet Marina -->
<g transform="translate(180,120)">
<ellipse cx="0" cy="86" rx="46" ry="22" fill="#05131c" opacity="0.75"/>
<path d="M-22 70 C -28 30, -18 -10, 0 -40 C 18 -10, 28 30, 22 70 Z" fill="#071826" stroke="#0e2940" stroke-width="1"/>
<!-- Kepala -->
<circle cx="0" cy="-54" r="18" fill="#0b2030"/>
<!-- Bahu -->
<rect x="-28" y="-28" width="56" height="42" rx="8" fill="#0b2030"/>
</g>
<!-- Penonton (simbolik garis) -->
<g transform="translate(60,40)" fill="#9fb3c8" opacity="0.95">
<circle cx="0" cy="0" r="6"/>
<rect x="-6" y="8" width="12" height="24" rx="4"/>
</g>
<g transform="translate(300,40)" fill="#9fb3c8" opacity="0.95">
<circle cx="0" cy="0" r="6"/>
<rect x="-6" y="8" width="12" height="24" rx="4"/>
</g>
<!-- Sorotan cahaya lembut -->
<ellipse cx="180" cy="60" rx="120" ry="60" fill="white" opacity="0.03" filter="url(#soft)"/>
</svg>
</div>
<div class="legend" aria-hidden="false">
<div class="chip">Mawar — simbol kelembutan</div>
<div class="chip">Bulu — simbol kerentanan</div>
<div class="chip">Parfum — simbol memori</div>
<div class="chip">Gunting & Pisau — simbol batas & konsekuensi</div>
</div>
<div style="margin-top:10px;color:var(--muted);font-size:13px">Arahkan kursor pada objek di ilustrasi (atau sentuh di layar sentuh) untuk melihat makna singkatnya.</div>
</aside>
</main>