.msa-feed-wrap {
    width: 100%;
    max-width: 800px; /* Gunakan max-width agar tetap bisa mengecil */
    box-sizing: border-box;
    padding: 20px 15px; /* Kurangi padding di layar kecil */
    margin:0 auto;
}
.msa-box{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;margin-bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.msa-activity-form textarea,.msa-form-group textarea,.msa-form-group input,.msa-comment-input{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px;box-sizing:border-box}
/* 1. Base Button Style (Reset & Layout Umum) */
.msa-btn, 
.msa-like-btn, 
.msa-comment-submit, 
.msa-delete, 
.msa-comment-toggle {
    font-size: 15px;
    display: inline-flex; /* Gunakan inline-flex agar tombol tidak memenuhi lebar layar */
    align-items: center;  /* Center vertikal ikon & teks */
    gap: 5px;
    border: 0;
    border-radius: 10px;
    padding: 5px 10px;    /* Padding lebih proporsional */
    cursor: pointer;
    background: transparent; /* Default transparan untuk tombol ikon */
    transition: all 0.2s ease;
}

/* 2. Tombol dengan Background Warna (Solid) */
.msa-comment-submit, .msa-btn {
    background: #111827; /* Beri warna gelap default untuk submit */
    color: #fff;
}

.msa-delete {
    background: #b91c1c;
    color: #fff;
    margin-left: auto;
    padding: 10px;
}

/* 3. Tombol Tipe Toggle (Like & Comment) */
.msa-comment-toggle {
    color: #000;
}

.msa-like-btn {
    color: #111827;
}

/* 4. Pengaturan SVG (Icon) */
.msa-like-btn svg, 
.msa-comment-toggle svg {
    width: 20px;
    height: 20px; /* Jaga aspek rasio */
    fill: none;   /* Default kosong (outline) */
    stroke: currentColor; /* Garis mengikuti warna teks induk */
    stroke-width: 1.5px;
}

/* 5. Logic State: IS-LIKED (Like Button Aktif) */
.msa-like-btn.is-liked {
    color: #b91c1c;
}

.msa-like-btn.is-liked svg {
    fill: #b91c1c;
    stroke: #b91c1c;
}

/* 6. Logic State: IS-OPEN (Comment Button Aktif) */
.msa-comment-toggle.is-open {
    font-weight: bold;
}

.msa-comment-toggle.is-open svg {
    fill: #000;
    stroke: #000;
}
.msa-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.msa-avatar,.msa-profile-avatar{width:48px;height:48px;border-radius:999px;object-fit:cover}
.msa-profile-avatar{width:96px;height:96px;margin-top:-48px;border:4px solid #fff;background:#fff}
.msa-meta{font-size:12px;color:#6b7280}
.msa-content{margin-bottom:12px;color:#111827}
.msa-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.msa-comments{border-top:1px solid #e5e7eb;padding-top:12px;display: none;}
.msa-comment{
    padding:8px 0;
    border-bottom:1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
}
.msa-comment-form{display:flex;gap:8px;margin-top:12px}
.msa-comment-submit{white-space:nowrap}
.msa-cover{height:180px;border-radius:18px;background:#e5e7eb center/cover no-repeat;margin-bottom:16px}
.msa-profile-row{padding:6px 0;border-bottom:1px dashed #e5e7eb}
.msa-form-group{margin-bottom:14px}
.msa-form-group label{display:block;margin-bottom:6px;font-weight:600}
.msa-success{background:#ecfdf5;color:#065f46;padding:10px 12px;border-radius:10px;margin-bottom:14px}
.msa-form-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.msa-char-count{font-size:12px;color:#6b7280}
.msa-profile-header{display: flex;justify-content: space-between;}
.msa-profile-header a{padding: 10px 20px 5px 20px;background-color: #ff6f6f;border-radius: 10px;color: white;font-weight: 600;}
.msa-comments.active {
    display: block;
}

.msa-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.msa-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    text-decoration: none;
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
}

.msa-page-link.is-active {
    background: #334155;
    color: #fff;
}

.msa-feed-profile{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: #f2f2f2;
    border-radius: 10px;
    margin-bottom: 10px;
}

.msa-box h3{
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
}

.msa-content.is-trimmed {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.msa-content.is-expanded {
    display: block;
    overflow: visible;
}

.msa-content-wrap {
    margin-bottom:12px;
    color:#111827;
}

.msa-content-wrap button{
    text-decoration: underline;
    color:blue;
}



.line-clamp-1{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* 2. Media Query untuk perangkat Mobile (Max 640px) */
@media screen and (max-width: 640px) {
    
    /* Header profil: avatar dan tombol edit */
    .msa-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .msa-profile-avatar {
        margin-top: -40px; /* Sesuaikan sedikit */
        width: 80px;
        height: 80px;
    }

    /* Feed Profile (Box abu-abu yang pakai display:flex) */
    .msa-feed-profile {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* Action buttons (Like, Comment, Delete) */
    .msa-actions {
        flex-wrap: wrap; /* Biar tombol turun kalau gak muat */
        justify-content: space-between;
    }

    .msa-btn, .msa-like-btn, .msa-comment-toggle {
        font-size: 13px; /* Perkecil teks di HP */
        padding: 8px 10px;
    }

    /* Form Komentar agar input dan tombol tumpuk vertikal jika sangat sempit */
    .msa-comment-form {
        flex-direction: column;
    }

    .msa-comment-submit {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }

    /* Cover image lebih pendek di HP */
    .msa-cover {
        height: 140px;
        border-radius: 12px;
    }

    /* Padding box dikurangi sedikit agar konten lebih luas */
    .msa-box {
        padding: 12px;
        border-radius: 12px;
    }

    /* Baris profil (meta data) */
    .msa-profile-row {
        font-size: 14px;
    }

    .msa-profile-row strong {
        display: block; /* Label di atas, value di bawah */
        margin-bottom: 2px;
    }

    /* Pagination */
    .msa-pagination {
        justify-content: center;
    }
}