/* Simpan di assets/style.css */
:root {
    --brand-red: #ff4757;    /* Untuk Judul & Notifikasi */
    --brand-yellow: #eab308; /* Untuk Aksen & Highlight */
    --brand-green: #2ed573;  /* Untuk Chat & Tombol Sukses */
    --brand-blue: #1e90ff;   /* Untuk Header & Link */
}

/* Standar Mobile-First & No Zoom */
html, body {
    overflow-x: hidden;
    touch-action: pan-x pan-y; /* Mencegah pinch zoom di beberapa browser */
    background-color: #f1f2f6;
}

/* HEADER (BIRU) */
header {
    background-color: var(--brand-blue);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: white;
    border-bottom: 4px solid var(--brand-yellow); /* AKSEN KUNING */
}

/* BLOG POST TITLE (MERAH) */
.post-title {
    color: var(--brand-red);
    font-weight: 800;
    font-size: 1.5rem;
}

/* CHAT BUBBLE & BUTTON (HIJAU) */
.chat-trigger {
    background-color: var(--brand-green);
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Responsivitas Desktop */
@media (min-width: 1024px) {
    .main-content {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Blog kiri, Sidebar/Chat kanan */
        gap: 20px;
        max-width: 1200px;
        margin: 20px auto;
    }
}