/* ============================================
   SINGLE POST - MOBILE RESPONSIVE (MAX 767px)
   ============================================ */

@media (max-width: 767px) {

    /* ============================================
       1. LAYOUT UTAMA (1 KOLOM)
       ============================================ */
    .single-wrapper {
        flex-direction: column;
        padding: 20px 0;
        gap: 25px;
    }

    .single-content-area,
    .single-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .single-sidebar {
        position: static;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e5e5e5;
    }

    /* ============================================
       2. KATEGORI BADGE
       ============================================ */
    .single-meta-top {
        margin-bottom: 12px;
    }

    .single-category-badge {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    /* ============================================
       3. JUDUL BERITA
       ============================================ */
    .single-title {
        font-size: 1.6rem;
        line-height: 1.3;
        margin: 0 0 12px 0;
        letter-spacing: -0.3px;
    }

    /* ============================================
       4. EXCERPT / RINGKASAN
       ============================================ */
    .single-excerpt {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0 0 15px 0;
    }

    /* ============================================
       5. META INFO (AUTHOR + SHARE)
       ============================================ */
    .single-meta-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0;
        margin-bottom: 5px;
    }

    .single-meta-info {
        width: 100%;
        gap: 10px;
    }

    .author-avatar-small img {
        width: 32px;
        height: 32px;
        border-width: 1px;
    }

    .author-details {
        gap: 2px;
        line-height: 1.25;
    }

    .author-source {
        font-size: 0.85rem;
        gap: 5px;
    }

    .author-name,
    .source-name {
        font-size: 0.85rem;
    }

    .meta-date {
        font-size: 0.75rem;
    }

    /* ============================================
       6. SHARE BUTTONS (ATAS) - MOBILE
       ============================================ */
    .share-label {
        display: none !important;
    }

    .single-share-buttons {
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .single-share-wrapper {
        margin-bottom: 0 !important;
        padding: 15px 0;
    }

    /* ============================================
       7. FEATURED IMAGE - FULL BLEED (RAPAT TEPI)
       ============================================ */
    .single-featured-image {
        margin-left: -16px;  /* Sesuaikan dengan padding container */
        margin-right: -16px;
        width: calc(100% + 32px); /* 16px + 16px = 32px */
        max-width: calc(100% + 32px);
        border-radius: 0;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .single-featured-image img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        border-radius: 0;
        object-fit: cover;
    }

    .image-caption {
        padding: 8px 16px 0 16px;
        font-size: 0.8rem;
        color: #888;
        text-align: left;
        font-style: normal;
        background: transparent;
    }

    /* ============================================
       8. ISI KONTEN BERITA
       ============================================ */
    .single-entry-content {
        font-size: 1rem;
        line-height: 1.7;
    }

    .single-entry-content p {
        margin-bottom: 1.2em;
        font-weight: 500;
    }

    .single-entry-content h2 {
        font-size: 1.35rem;
        margin: 1.3em 0 0.7em;
    }

    .single-entry-content h3 {
        font-size: 1.15rem;
        margin: 1.2em 0 0.6em;
    }

    .single-entry-content h4 {
        font-size: 1rem;
        margin: 1em 0 0.5em;
    }

    .single-entry-content ul,
    .single-entry-content ol {
        padding-left: 1.5em;
        margin-bottom: 1.2em;
    }

    .single-entry-content blockquote {
        padding: 10px 12px;
        margin: 1.5em 0;
        font-size: 0.95rem;
    }

    /* Gambar dalam konten - JANGAN overflow, biarkan normal */
    .single-entry-content img {
        max-width: 100%;
        height: auto;
        margin: 1.2em 0;
        border-radius: 4px;
        display: block;
    }

    /* ============================================
       9. TAGS MOBILE
       ============================================ */
    .single-tags-wrapper {
        margin: 20px 0 15px;
        padding-top: 15px;
    }

    .single-tags {
        gap: 8px;
    }

    .single-tag-item {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    /* ============================================
       10. SHARE BUTTONS (BAWAH ARTIKEL)
       ============================================ */
    .single-share-buttons-bottom {
        flex-wrap: wrap;
        margin-bottom: 30px;
        gap: 8px;
    }

    .share-btn {
        flex: 1;
        min-width: calc(50% - 4px);
        text-align: center;
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    /* ============================================
       11. AUTHOR BOX
       ============================================ */
    .single-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 15px;
        margin-bottom: 30px;
    }

    .author-avatar img {
        width: 70px;
        height: 70px;
    }

    .author-name {
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .author-bio {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* ============================================
       12. RELATED POSTS - MOBILE 2 KOLOM
       ============================================ */
    .related-posts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .related-item {
        height: 100%;
    }

    .related-item-link {
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
        color: inherit;
    }

    .related-thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: 8px;
        border-radius: 6px;
        overflow: hidden;
    }

    .related-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .related-content {
        padding-top: 0;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .related-item-category {
        display: block;
        color: #d32f2f;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: none;
        margin-bottom: 3px;
        line-height: 1.2;
    }

    .related-item-title {
        font-size: 0.8rem;
        font-weight: 800;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s;
    }

    .related-item-link:hover .related-item-title {
        color: #d32f2f;
    }

    /* ============================================
       13. PAGINATION (HALAMAN)
       ============================================ */
    .single-entry-content .post-pages,
    .single-entry-content .page-links {
        gap: 6px;
        margin: 25px 0 20px;
        justify-content: center;
    }

    .single-entry-content .post-pages .page-label,
    .single-entry-content .page-links .page-label {
        margin-right: 6px;
        font-size: 0.85rem;
    }

    .single-entry-content .post-page-numbers,
    .single-entry-content .page-links a,
    .single-entry-content .page-links > span {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .single-entry-content .post-page-numbers.all-pages-link,
    .single-entry-content .page-links a.all-pages-link {
        padding: 0 14px;
        font-size: 0.8rem;
    }

    /* ============================================
       14. KOMENTAR
       ============================================ */
    .comments-area {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e5e5e5;
    }

    .comment-respond {
        margin-top: 20px;
    }

    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        width: 100%;
        padding: 10px;
        font-size: 0.95rem;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .comment-form .form-submit input {
        background: #d32f2f;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }
}

/* ============================================
   PENYESUAIAN HP SANGAT KECIL (MAX 480px)
   ============================================ */
@media (max-width: 480px) {

    .single-title {
        font-size: 1.4rem;
    }

    .single-excerpt {
        font-size: 0.9rem;
    }

    .single-entry-content {
        font-size: 0.95rem;
    }

    .author-source {
        font-size: 0.8rem;
    }

    .share-btn {
        min-width: 100%;
    }
}