/* Non-floating di mobile */
        @media (max-width: 768px) {
            .sidebar {
                position: static !important;
                top: auto !important;
                margin-top: 1.5rem;
            }

            .main-content {
                flex-direction: column;
            }

            .content-left {
                width: 100%;
            }

            /* 🌆 Featured Image (gambar utama) */
            .featured-image {
                width: 100%;
                max-width: 100%;
                height: auto;
                border-radius: 1rem;
                object-fit: cover;
                display: block;
                margin: 0 auto;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }

            /* 🖼️ Grid Galeri */
            .gallery-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 0.75rem;
            }

            /* 📱 Gambar Galeri */
            .gallery-image {
                width: 100%;
                height: 160px;
                object-fit: cover;
                border-radius: 0.75rem;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

            .gallery-item:hover .gallery-image {
                transform: scale(1.03);
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            }

            @media (max-width: 640px) {
                .gallery-image {
                    height: 130px;
                }
            }
        }

        /* ====== DISCUSSION CONTENT STYLING ENHANCED ====== */
        .discussion-content {
            font-size: 1rem;
            line-height: 1.8;
            color: #1e293b;
        }


        /* ✅ Blockquote: jangan italic */
        .discussion-content blockquote {
            border-left: 4px solid #0d6efd;
            background: #f1f5f9;
            padding: 1rem 1.25rem;
            margin: 1.5rem 0;
            font-style: normal;
            /* hilangkan italic */
            color: #1e293b;
            font-weight: 500;
            border-radius: 0.5rem;
        }

        /* ✅ Code Block & Inline Code */
        .discussion-content pre {
            background: #0f172a;
            color: #f8fafc;
            padding: 1rem 1.25rem;
            border-radius: 0.75rem;
            overflow-x: auto;
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            margin: 1.5rem 0;
        }

        .discussion-content code {
            background: #f1f5f9;
            color: #0f172a;
            font-family: 'Fira Code', monospace;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        /* ✅ Table (grid bawaan editor) */
        .discussion-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            border: 1px solid #e2e8f0;
            font-size: 0.9rem;
        }

        .discussion-content th,
        .discussion-content td {
            border: 1px solid #e2e8f0;
            padding: 0.75rem 1rem;
            text-align: left;
            vertical-align: top;
        }

        .discussion-content th {
            background: #f8fafc;
            font-weight: 600;
        }

        /* ✅ Hurdle / Horizontal Rule */
        .discussion-content hr {
            border: none;
            border-top: 3px solid #e2e8f0;
            margin: 2rem 0;
            border-radius: 999px;
        }

        /* ✅ Grid Layout (jika editor generate .grid atau .grid-x class) */
        .discussion-content .grid {
            display: grid;
            gap: 1rem;
        }

        .discussion-content .grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .discussion-content .grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .discussion-content .grid>* {
            background: #f8fafc;
            padding: 1rem;
            border-radius: 8px;
        }

        /* ✅ Spacing antara elemen (paragraf ke tabel, paragraf ke blockquote, dll) */
        .discussion-content>*:not(:last-child) {
            margin-bottom: 1.25rem;
        }

        /* ===== 🎯 FILAMENT TIPTAP: HURDLE BLOCK ===== */
        .discussion-content .filament-tiptap-hurdle {
            background-color: #f1f5f9;
            /* warna netral seperti di editor */
            padding: 0.75rem 1rem;
            margin: 1.5rem 0;
        }

        /* Opsional: kalau Tiptap pakai data-color untuk tema */
        .discussion-content .filament-tiptap-hurdle[data-color="gray_light"] {
            background-color: #f8fafc;
            border-left-color: #cbd5e1;
        }

        .discussion-content .filament-tiptap-hurdle[data-color="blue_light"] {
            background-color: #eff6ff;
            border-left-color: #0d6efd;
        }

        .discussion-content .filament-tiptap-hurdle[data-color="yellow_light"] {
            background-color: #fef9c3;
            border-left-color: #facc15;
        }

        .discussion-content .filament-tiptap-hurdle[data-color="red_light"] {
            background-color: #fee2e2;
            border-left-color: #ef4444;
        }

        /* Jaga supaya teks di dalamnya tetap rapi */
        .discussion-content .filament-tiptap-hurdle p {
            margin: 0;
            text-align: justify;
            font-weight: 600;
            color: #1e293b;
        }

        /* ===== 🎯 FILAMENT TIPTAP: GRID BLOCK ===== */
        .discussion-content .filament-tiptap-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin: 1.5rem 0;
        }

        /* Support untuk atribut cols (jumlah kolom dinamis) */
        .discussion-content .filament-tiptap-grid[cols="3"] {
            grid-template-columns: repeat(3, 1fr);
        }

        .discussion-content .filament-tiptap-grid[cols="4"] {
            grid-template-columns: repeat(4, 1fr);
        }

        .discussion-content .filament-tiptap-grid[cols="1"] {
            grid-template-columns: 1fr;
        }

        /* Style kolom di dalam grid */
        .discussion-content .filament-tiptap-grid__column {
            background: #f8fafc;
            padding: 1rem;
            border: 1px dashed #cbd5e1;
            border-radius: 0.5rem;
        }

        /* Paragraf di dalam kolom */
        .discussion-content .filament-tiptap-grid__column p {
            margin: 0;
            color: #1e293b;
        }

        /* Responsif */
        @media (max-width: 768px) {
            .discussion-content .filament-tiptap-grid {
                grid-template-columns: 1fr;
            }
        }

        .discussion-content p[style][style*="text-align: justify"]:empty::after {
            content: "";
            display: block;
            height: 1rem;
            /* tinggi spasi antar paragraf kosong */
        }

        /* versi umum untuk p kosong tanpa isi */
        .discussion-content p:empty::after {
            content: "";
            display: block;
            height: 1rem;
        }

        /* ===== 🎯 LIST STYLE FIX (OL & UL) ===== */
        .discussion-content ol,
        .discussion-content ul {
            margin-left: 1.5rem;
            margin-bottom: 1.25rem;
            padding-left: 1.25rem;
        }

        .discussion-content ol {
            list-style-type: decimal;
        }

        .discussion-content ul {
            list-style-type: disc;
        }

        /* Sub-list (nested) tetap rapi */
        .discussion-content ol ol,
        .discussion-content ul ul {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .discussion-content li {
            margin-bottom: 0.5rem;
            line-height: 1.8;
        }

        /* Tambahan opsional: jika Tailwind atau CSS reset menimpa list */
        .discussion-content ol,
        .discussion-content ul {
            list-style-position: outside !important;
        }

        /* ===== 🎯 FIX HEADING (H1–H6) FROM TIPTAP ===== */
        .discussion-content h1,
        .discussion-content h2,
        .discussion-content h3,
        .discussion-content h4,
        .discussion-content h5,
        .discussion-content h6 {
            font-weight: 700;
            color: #0f172a;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            line-height: 1.3;
        }

        /* Size scale */
        .discussion-content h1 {
            font-size: 1.8rem;
        }

        .discussion-content h2 {
            font-size: 1.6rem;
        }

        .discussion-content h3 {
            font-size: 1.4rem;
        }

        .discussion-content h4 {
            font-size: 1.25rem;
        }

        .discussion-content h5 {
            font-size: 1.1rem;
        }

        .discussion-content h6 {
            font-size: 1rem;
            font-weight: 600;
        }

        /* Optional: justify headings with style attr */
        /*.discussion-content h1[style*="text-align"],*/
        /*.discussion-content h2[style*="text-align"],*/
        /*.discussion-content h3[style*="text-align"] {*/
        text-align: inherit !important;
        /* or keep style from Tiptap */
        /*}*/

        /* ✅ Checklist Visual untuk <ul class="checked-list"> */
        .discussion-content ul.checked-list {
            list-style: none;
            padding-left: 0;
            margin: 1rem 0;
        }

        .discussion-content ul.checked-list li {
            position: relative;
            padding-left: 1.6rem;
            margin-bottom: 0.75rem;
            line-height: 1.7;
        }

        /* Centang custom */
        .discussion-content ul.checked-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0.1rem;
            font-weight: bold;
            font-size: 1rem;
        }

        /* Optional: memperbaiki nested style seperti <p>, <strong>, dll */
        .discussion-content ul.checked-list li p {
            margin: 0;
        }

        /* === 📦 Responsive Grid Builder dari Tiptap === */
        .discussion-content .filament-tiptap-grid-builder {
            display: grid;
            gap: 1rem;
            margin: 1.5rem 0;
            /* Default to 2 columns, override via inline style from editor */
            grid-template-columns: repeat(2, 1fr);
        }

        /* Kolom individual */
        .discussion-content .filament-tiptap-grid-builder__column {
            background: #f8fafc;
            padding: 1rem;
            border: 1px dashed #cbd5e1;
            border-radius: 0.5rem;
        }

        /* Responsif di layar kecil */
        @media (max-width: 768px) {
            .discussion-content .filament-tiptap-grid-builder {
                grid-template-columns: 1fr !important;
            }
        }

        /* ==== DETAIL / EXPANDABLE SECTION ==== */
        .discussion-content details {
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            border-radius: 0.5rem;
            margin: 1.5rem 0;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            line-height: 1.6;
        }

        .discussion-content summary {
            font-weight: 600;
            cursor: pointer;
            outline: none;
            list-style: none;
            /* remove native triangle */

            position: relative;
            padding-left: 1.25rem;
        }

        /* Add custom ▼/▲ toggle icon */
        .discussion-content summary::before {
            content: "▼";
            font-size: 0.7rem;
            position: absolute;
            left: 0;
            top: 2px;
            transition: transform 0.2s ease;
        }

        /* Rotate when open */
        .discussion-content details[open] summary::before {
            transform: rotate(180deg);
        }

        /* Konten di dalam details */
        .discussion-content details>*:not(summary) {
            margin-top: 0.75rem;
            padding-left: 0.5rem;
        }

        /* Untuk tabel agar bisa di-scroll horizontal di layar kecil */
        @media (max-width: 468px) {

            /* ✅ Wrap semua table agar scrollable */
            .discussion-content table {
                display: table;
                width: 90%;
                overflow-x: auto;
                border-collapse: collapse;
                min-width: 260px;
                font-size: 0.5rem;
            }

            .discussion-content ol,
            .discussion-content ul {
                margin-left: 0.1rem;
                margin-bottom: 0.25rem;
                padding-left: 1rem;
            }

            /* ✍️ Style dasar tabel */
            .discussion-content th,
            .discussion-content td {
                padding: 0.25rem 0.2rem;
                border: 1px solid #e2e8f0;
                text-align: left;
                vertical-align: top;
            }

            .discussion-content th {
                background: #f1f5f9;
                font-weight: 600;
            }

            .discussion-content th:first-child,
            .discussion-content td:first-child {
                width: 40px;
                text-align: center;
            }

            .discussion-content td {
                word-break: break-word;
                overflow-wrap: anywhere;
                white-space: normal;
            }

            .discussion-content blockquote {
                padding: 0.6rem 0.75rem;
                margin: 0.75rem 0;
                border-left-width: 3px;
                font-size: 0.85rem;
                line-height: 1.5;
                border-radius: 0.4rem;
            }


        }

        .discussion-content img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            height: auto;
        }




        /* ====== DISCUSSION CONTENT STYLING ENHANCED ====== */
        .content-text {
            font-size: 1rem;
            line-height: 1.8;
            color: #1e293b;
        }


        /* ✅ Blockquote: jangan italic */
        .content-text blockquote {
            border-left: 4px solid #0d6efd;
            background: #f1f5f9;
            padding: 1rem 1.25rem;
            margin: 1.5rem 0;
            font-style: normal;
            /* hilangkan italic */
            color: #1e293b;
            font-weight: 500;
            border-radius: 0.5rem;
        }

        /* ✅ Code Block & Inline Code */
        .content-text pre {
            background: #0f172a;
            color: #f8fafc;
            padding: 1rem 1.25rem;
            border-radius: 0.75rem;
            overflow-x: auto;
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            margin: 1.5rem 0;
        }

        .content-text code {
            background: #f1f5f9;
            color: #0f172a;
            font-family: 'Fira Code', monospace;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        /* ✅ Table (grid bawaan editor) */
        .content-text table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            border: 1px solid #e2e8f0;
            font-size: 0.9rem;
        }

        .content-text th,
        .content-text td {
            border: 1px solid #e2e8f0;
            padding: 0.75rem 1rem;
            text-align: left;
            vertical-align: top;
        }

        .content-text th {
            background: #f8fafc;
            font-weight: 600;
        }

        /* ✅ Hurdle / Horizontal Rule */
        .content-text hr {
            border: none;
            border-top: 3px solid #e2e8f0;
            margin: 2rem 0;
            border-radius: 999px;
        }

        /* ✅ Grid Layout (jika editor generate .grid atau .grid-x class) */
        .content-text .grid {
            display: grid;
            gap: 1rem;
        }

        .content-text .grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .content-text .grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .content-text .grid>* {
            background: #f8fafc;
            padding: 1rem;
            border-radius: 8px;
        }

        /* ✅ Spacing antara elemen (paragraf ke tabel, paragraf ke blockquote, dll) */
        .content-text>*:not(:last-child) {
            margin-bottom: 1.25rem;
        }

        /* ===== 🎯 FILAMENT TIPTAP: HURDLE BLOCK ===== */
        .content-text .filament-tiptap-hurdle {
            background-color: #f1f5f9;
            /* warna netral seperti di editor */
            padding: 0.75rem 1rem;
            margin: 1.5rem 0;
        }

        /* Opsional: kalau Tiptap pakai data-color untuk tema */
        .content-text .filament-tiptap-hurdle[data-color="gray_light"] {
            background-color: #f8fafc;
            border-left-color: #cbd5e1;
        }

        .content-text .filament-tiptap-hurdle[data-color="blue_light"] {
            background-color: #eff6ff;
            border-left-color: #0d6efd;
        }

        .content-text .filament-tiptap-hurdle[data-color="yellow_light"] {
            background-color: #fef9c3;
            border-left-color: #facc15;
        }

        .content-text .filament-tiptap-hurdle[data-color="red_light"] {
            background-color: #fee2e2;
            border-left-color: #ef4444;
        }

        /* Jaga supaya teks di dalamnya tetap rapi */
        .content-text .filament-tiptap-hurdle p {
            margin: 0;
            text-align: justify;
            font-weight: 600;
            color: #1e293b;
        }

        /* ===== 🎯 FILAMENT TIPTAP: GRID BLOCK ===== */
        .content-text .filament-tiptap-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin: 1.5rem 0;
        }

        /* Support untuk atribut cols (jumlah kolom dinamis) */
        .content-text .filament-tiptap-grid[cols="3"] {
            grid-template-columns: repeat(3, 1fr);
        }

        .content-text .filament-tiptap-grid[cols="4"] {
            grid-template-columns: repeat(4, 1fr);
        }

        .content-text .filament-tiptap-grid[cols="1"] {
            grid-template-columns: 1fr;
        }

        /* Style kolom di dalam grid */
        .content-text .filament-tiptap-grid__column {
            background: #f8fafc;
            padding: 1rem;
            border: 1px dashed #cbd5e1;
            border-radius: 0.5rem;
        }

        /* Paragraf di dalam kolom */
        .content-text .filament-tiptap-grid__column p {
            margin: 0;
            color: #1e293b;
        }

        /* Responsif */
        @media (max-width: 768px) {
            .content-text .filament-tiptap-grid {
                grid-template-columns: 1fr;
            }
        }

        .content-text p[style][style*="text-align: justify"]:empty::after {
            content: "";
            display: block;
            height: 1rem;
            /* tinggi spasi antar paragraf kosong */
        }

        /* versi umum untuk p kosong tanpa isi */
        .content-text p:empty::after {
            content: "";
            display: block;
            height: 1rem;
        }

        /* ===== 🎯 LIST STYLE FIX (OL & UL) ===== */
        .content-text ol,
        .content-text ul {
            margin-left: 1.5rem;
            margin-bottom: 1.25rem;
            padding-left: 1.25rem;
        }

        .content-text ol {
            list-style-type: decimal;
        }

        .content-text ul {
            list-style-type: disc;
        }

        /* Sub-list (nested) tetap rapi */
        .content-text ol ol,
        .content-text ul ul {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .content-text li {
            margin-bottom: 0.5rem;
            line-height: 1.8;
        }

        /* Tambahan opsional: jika Tailwind atau CSS reset menimpa list */
        .content-text ol,
        .content-text ul {
            list-style-position: outside !important;
        }

        /* ===== 🎯 FIX HEADING (H1–H6) FROM TIPTAP ===== */
        .content-text h1,
        .content-text h2,
        .content-text h3,
        .content-text h4,
        .content-text h5,
        .content-text h6 {
            font-weight: 700;
            color: #0f172a;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            line-height: 1.3;
        }

        /* Size scale */
        .content-text h1 {
            font-size: 1.8rem;
        }

        .content-text h2 {
            font-size: 1.6rem;
        }

        .content-text h3 {
            font-size: 1.4rem;
        }

        .content-text h4 {
            font-size: 1.25rem;
        }

        .content-text h5 {
            font-size: 1.1rem;
        }

        .content-text h6 {
            font-size: 1rem;
            font-weight: 600;
        }

        /* Optional: justify headings with style attr */
        /*.content-text h1[style*="text-align"],*/
        /*.content-text h2[style*="text-align"],*/
        /*.content-text h3[style*="text-align"] {*/
        text-align: inherit !important;
        /* or keep style from Tiptap */
        }

        /* ✅ Checklist Visual untuk <ul class="checked-list"> */
        .content-text ul.checked-list {
            list-style: none;
            padding-left: 0;
            margin: 1rem 0;
        }

        .content-text ul.checked-list li {
            position: relative;
            padding-left: 1.6rem;
            margin-bottom: 0.75rem;
            line-height: 1.7;
        }

        /* Centang custom */
        .content-text ul.checked-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0.1rem;
            font-weight: bold;
            font-size: 1rem;
        }

        /* Optional: memperbaiki nested style seperti <p>, <strong>, dll */
        .content-text ul.checked-list li p {
            margin: 0;
        }

        /* === 📦 Responsive Grid Builder dari Tiptap === */
        .content-text .filament-tiptap-grid-builder {
            display: grid;
            gap: 1rem;
            margin: 1.5rem 0;
            /* Default to 2 columns, override via inline style from editor */
            grid-template-columns: repeat(2, 1fr);
        }

        /* Kolom individual */
        .content-text .filament-tiptap-grid-builder__column {
            background: #f8fafc;
            padding: 1rem;
            border: 1px dashed #cbd5e1;
            border-radius: 0.5rem;
        }

        /* Responsif di layar kecil */
        @media (max-width: 768px) {
            .content-text .filament-tiptap-grid-builder {
                grid-template-columns: 1fr !important;
            }
        }

        /* ==== DETAIL / EXPANDABLE SECTION ==== */
        .content-text details {
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            border-radius: 0.5rem;
            margin: 1.5rem 0;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            line-height: 1.6;
        }

        .content-text summary {
            font-weight: 600;
            cursor: pointer;
            outline: none;
            list-style: none;
            /* remove native triangle */

            position: relative;
            padding-left: 1.25rem;
        }

        /* Add custom ▼/▲ toggle icon */
        .content-text summary::before {
            content: "▼";
            font-size: 0.7rem;
            position: absolute;
            left: 0;
            top: 2px;
            transition: transform 0.2s ease;
        }

        /* Rotate when open */
        .content-text details[open] summary::before {
            transform: rotate(180deg);
        }

        /* Konten di dalam details */
        .content-text details>*:not(summary) {
            margin-top: 0.75rem;
            padding-left: 0.5rem;
        }

        /* Untuk tabel agar bisa di-scroll horizontal di layar kecil */
        @media (max-width: 468px) {

            /* ✅ Wrap semua table agar scrollable */
            .content-text table {
                display: table;
                width: 90%;
                overflow-x: auto;
                border-collapse: collapse;
                min-width: 260px;
                font-size: 10px;
            }

            /* ✍️ Style dasar tabel */
            .content-text th,
            .content-text td {
                padding: 0.75rem 1rem;
                border: 1px solid #e2e8f0;
                text-align: left;
                vertical-align: top;
            }

            .content-text th {
                background: #f1f5f9;
                font-weight: 600;
            }


        }

        .content-text img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            height: auto;
        }

        .content-section ul {
            list-style-type: lower-alpha;
        }

        .content-text ul {
            list-style-type: lower-alpha;
        }