---
layout: default
title: Beranda
---

<style>
    .hero-section { text-align: center; padding: 60px 0; border-bottom: 1px double var(--border); margin-bottom: 60px; }
    .hero-section h2 { font-weight: normal; font-size: 2rem; color: var(--accent-purple); font-style: italic; }
    
    .grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
    .section-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 4px; color: var(--accent-pink); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 30px; display: block; }
    
    .post-preview { margin-bottom: 40px; }
    .post-preview h3 { font-weight: normal; font-size: 1.6rem; margin: 10px 0; }
    .post-preview h3 a { text-decoration: none; color: var(--text-dark); transition: 0.3s; }
    .post-preview h3 a:hover { color: var(--accent-purple); }
    .post-excerpt { color: #555; font-size: 1rem; line-height: 1.6; }
    .read-more { display: inline-block; margin-top: 15px; font-size: 0.8rem; text-decoration: none; color: var(--accent-purple); font-weight: bold; text-transform: uppercase; }

    @media (max-width: 768px) { .grid-container { grid-template-columns: 1fr; gap: 40px; } }
</style>

<div class="hero-section">
    <h2>"Aksara adalah jembatan rasa, dari hati menuju hati lainnya."</h2>
</div>

<div class="grid-container">
    <section>
        <span class="section-title">Antologi Aksara</span>
        {% assign sorted_puisi = site.puisi | reverse %}
{% for post in sorted_puisi limit:1 %}
   {% endfor %}
        <article class="post-preview">
            <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
            <div class="post-excerpt">
                {{ post.content | strip_html | truncatewords: 25 }}
            </div>
            <a href="{{ post.url }}" class="read-more">Baca Puisi &rarr;</a>
        </article>
        {% else %}
        <p style="font-style: italic; color: #888;">Belum ada aksara yang terukir...</p>
        {% endfor %}
    </section>

    <section>
        <span class="section-title">Celoteh</span>
        {% assign sorted_opini = site.opini | reverse %}
{% for post in sorted_opini limit:1 %}
   {% endfor %}
        <article class="post-preview">
            <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
            <div class="post-excerpt">
                {{ post.content | strip_html | truncatewords: 25 }}
            </div>
            <a href="{{ post.url }}" class="read-more">Baca Celoteh &rarr;</a>
        </article>
        {% else %}
        <p style="font-style: italic; color: #888;">Masih menunggu buah pikir...</p>
        {% endfor %}
    </section>
</div>