/* Normalisasi dasar untuk konsistensi antar browser */
                html {
                    font-size: 16px;
                    box-sizing: border-box;
                }

                *,
                *:before,
                *:after {
                    box-sizing: inherit;
                }

                body {
                    font-family: 'Plus Jakarta Sans', sans-serif;
                    font-size: 1rem;
                    line-height: 1.5;
                    color: #333;
                    margin: 0;
                    padding: 0;
                }

                img {
                    max-width: 100%;
                    height: auto;
                }

                /* CSS untuk tombol rating */
                .profile-rating {
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    margin-top: 10px;
                    gap: 10px;
                }

                .rating-btn {
                    padding: 15px 15px;
                    border: none;
                    border-radius: 10px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    font-size: 14px;
                    font-weight: bold;
                    transition: all 0.2s ease;
                    flex: 1;
                    /* Buat tombol mengambil ruang yang sama */
                }

                .like-btn {
                    background-color: #e0f2e9;
                    color: #2e7d32;
                }

                .like-btn:hover,
                .like-btn.active {
                    background-color: #2e7d32;
                    color: white;
                }

                .dislike-btn {
                    background-color: #fde0dc;
                    color: #c62828;
                }

                .dislike-btn:hover,
                .dislike-btn.active {
                    background-color: #c62828;
                    color: white;
                }

                .rating-btn:disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                }

                /* Desain responsif untuk mobile */
                @media (max-width: 480px) {
                    .profile-rating {
                        flex-direction: row;
                    }

                    .rating-btn {
                        padding: 6px 12px;
                        font-size: 14px;
                    }
                }

                /* Sembunyikan tombol share desktop di mobile */
                @media (max-width: 767px) {
                    .social-share {
                        display: none;
                    }
                }

                /* Sembunyikan tombol share desktop dan breadcrumb di mobile */
                @media (max-width: 767px) {
                    .social-share {
                        display: none;
                    }

                    .breadcrumb {
                        display: none;
                    }

                    /* Tambahkan rule baru ini */
                    .breadcrumb-share-container {
                        display: none;
                    }
                }

                /* Mengurangi jarak antara tombol rating dan profile-details */
                @media (max-width: 767px) {
                    .profile-photo {
                        margin-bottom: -30px;
                        /* Margin negatif untuk mengurangi jarak */
                    }

                    .profile-rating {
                        margin-bottom: -5px;
                        /* Margin negatif untuk menarik konten berikutnya ke atas */
                    }

                    .profile-details {
                        margin-top: 0;
                        /* Hapus margin atas */
                    }

                    /* Mengurangi padding dalam profile-container jika perlu */
                    .profile-container {
                        padding-bottom: 0;
                        margin-top: 30px;
                    }
                }

                /* Share Buttons - NEW STYLES */
                .article-share {
                    position: relative;
                }

                .main-share-btn {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    background-color: #00897b;
                    border: none;
                    border-radius: 50px;
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 0.95rem;
                    color: #fff;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                }

                .main-share-btn:hover {
                    background-color: rgb(0, 100, 90);
                }

                .share-dropdown {
                    position: absolute;
                    top: calc(100% + 8px);
                    right: 0;
                    width: 220px;
                    background-color: white;
                    border-radius: 8px;
                    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
                    padding: 8px 0;
                    z-index: 100;
                    display: none;
                    flex-direction: column;
                }

                .share-dropdown.active {
                    display: flex;
                }

                .share-dropdown-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 10px 16px;
                    color: #333;
                    text-decoration: none;
                    transition: background-color 0.2s ease;
                }

                .share-dropdown-item:hover {
                    background-color: #f5f5f5;
                }

                .share-dropdown-item i {
                    font-size: 1.1rem;
                    width: 20px;
                    text-align: center;
                }

                /* Social Media Colors */
                .share-dropdown-item.whatsapp i {
                    color: #25D366;
                }

                .share-dropdown-item.twitter i {
                    color: #000000;
                }

                .share-dropdown-item.facebook i {
                    color: #1877F2;
                }

                .share-dropdown-item.telegram i {
                    color: #0088cc;
                }

                .share-dropdown-item.email i {
                    color: #EA4335;
                }

                /* ===== Styles untuk Mobile Sharing ===== */
                /* Tombol share mengambang */
                .share-floating-btn {
                    position: fixed;
                    right: 0.8rem;
                    bottom: 5rem;
                    width: 40px;
                    height: 40px;
                    background-color: var(--primary-color);
                    color: white;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                    z-index: 98;
                    font-size: 1rem;
                    animation: pulse 2s infinite;
                }

                @keyframes pulse {
                    0% {
                        box-shadow: 0 0 0 0 rgba(0, 137, 123, 0.4);
                    }

                    70% {
                        box-shadow: 0 0 0 6px rgba(0, 137, 123, 0);
                    }

                    100% {
                        box-shadow: 0 0 0 0 rgba(0, 137, 123, 0);
                    }
                }

                /* Share Popup Container */
                .share-popup {
                    position: fixed;
                    bottom: -100%;
                    left: 0;
                    width: 100%;
                    background-color: white;
                    border-radius: 16px 16px 0 0;
                    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
                    z-index: 1001;
                    transition: all 0.3s ease;
                    max-height: 90vh;
                    overflow-y: auto;
                }

                .share-popup.active {
                    bottom: 0;
                }

                /* Share Popup Header */
                .share-popup-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 16px;
                    border-bottom: 1px solid #e0e0e0;
                }

                .share-popup-header span {
                    font-weight: 600;
                    font-size: 1rem;
                    color: #212121;
                }

                .share-popup-close {
                    background: none;
                    border: none;
                    color: #555555;
                    font-size: 1.1rem;
                    cursor: pointer;
                    padding: 0;
                    width: 28px;
                    height: 28px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                }

                /* Share Popup Body */
                .share-popup-body {
                    padding: 16px;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 16px;
                }

                /* Share Popup Buttons */
                .share-popup-btn {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;
                    text-decoration: none;
                    color: #333;
                    padding: 8px;
                    border-radius: 8px;
                    transition: all 0.2s;
                }

                .share-popup-btn:active {
                    transform: scale(0.95);
                }

                /* Icon Container */
                .share-popup-btn i {
                    width: 48px;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    font-size: 1.25rem;
                    color: white;
                }

                /* Text Below Icon */
                .share-popup-btn span {
                    font-size: 0.8rem;
                    font-weight: 500;
                    color: #333;
                }

                /* Social Media Icon Background Colors */
                .share-popup-btn.whatsapp i {
                    background-color: #25D366;
                }

                .share-popup-btn.telegram i {
                    background-color: #0088cc;
                }

                .share-popup-btn.facebook i {
                    background-color: #1877F2;
                }

                .share-popup-btn.twitter i {
                    background-color: #000000;
                }

                .share-popup-btn.email i {
                    background-color: #EA4335;
                }

                .share-popup-btn.copy-link i {
                    background-color: #333333;
                }

                .copy-link {
                    background: none;
                    border: none;
                    font-family: inherit;
                }

                /* Share Floating Container */
                .share-floating-container {
                    display: none;
                    /* Hide initially on desktop */
                }

                /* Tooltip trigger styling */
                .tooltip {
                    position: relative;
                    display: inline-block;
                    cursor: pointer;
                    transition: transform 0.2s ease;
                }

                .tooltip:hover {
                    transform: scale(1.1);
                }

                .tooltip i {
                    color: var(--primary-color, #00897b);
                    transition: color 0.2s ease;
                }

                .tooltip:hover i {
                    color: #006c58;
                    /* Slightly darker on hover */
                }

                /* Hide the original tooltip popup */
                .tooltip .tooltip-text {
                    display: none !important;
                }

                /* Mobile view adjustments */
                @media (max-width: 767px) {
                    .share-floating-container {
                        display: block;
                        position: fixed;
                        right: 0.8rem;
                        bottom: 5rem;
                        z-index: 98;
                    }
                }

                /* Overlay */
                #overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.7);
                    z-index: 100;
                }

                /* Modal */
                #dapilModal {
                    display: none;
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: white;
                    max-width: 90%;
                    width: 500px;
                    max-height: 90vh;
                    z-index: 101;
                    border-radius: 10px;
                    overflow: hidden;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                }

                #dapilModal .modal-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 15px;
                    background-color: var(--primary-color);
                    color: white;
                }

                #dapilModal .modal-header h4 {
                    margin: 0;
                    font-size: 1.2rem;
                }

                #dapilModal .close-btn {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 1.5rem;
                    font-family: Arial, Helvetica, sans-serif;
                    cursor: pointer;
                    padding: 0;
                    line-height: 1;
                }

                #dapilModalContent {
                    padding: 15px;
                    margin-left: -20px;
                    overflow-y: auto;
                    max-height: calc(90vh - 60px);
                }

                .dapil-name {
                    color: #fc5424;
                }

                .instansi-name {
                    color: #fc5424;
                }

                /* ============================================
                   PERBAIKAN FONT SIZE MOBILE YANG KONSISTEN
                   ============================================ */
                
                /* Mobile View Improvements - FIXED FONT SIZES */
                @media (max-width: 767px) {

                    /* Card Name Improvements */
                    .card.name {
                        display: none;
                        /* Sembunyikan card name di mode mobile */
                    }

                    /* Profile Actions Styling */
                    .profile-actions {
                        display: flex;
                        gap: 10px;
                        justify-content: center;
                        margin-top: 20px;
                        margin-bottom: 5px;
                        width: 100%;
                    }

                    .profile-actions button,
                    .profile-actions a {
                        flex: 1;
                        padding: 10px 10px;
                        border: none;
                        border-radius: 10px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 5px;
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                        font-weight: bold;
                        transition: all 0.2s ease;
                        height: 30px;
                        text-decoration: none;
                    }

                    /* Profile Details Improvements - FONT SIZE FIXED */
                    .profile-details {
                        padding: 0;
                        margin-top: 10px;
                    }

                    .profile-details table {
                        width: 100%;
                        border-collapse: collapse;
                    }

                    .profile-details table tr {
                        border-bottom: 1px solid #f0f0f0;
                    }

                    .profile-details table tr:last-child {
                        border-bottom: none;
                    }

                    /* PERBAIKAN UTAMA: Font size konsisten untuk semua elemen dalam tabel */
                    .profile-details table td,
                    .profile-details table th {
                        padding: 12px 8px;
                        vertical-align: top;
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                        line-height: 1.4 !important;
                    }

                    .profile-details table td {
                        width: 40%;
                        color: #555;
                        font-weight: 500 !important; /* FIXED: Konsisten font weight */
                    }

                    .profile-details table th {
                        width: 60%;
                        font-weight: 600 !important; /* FIXED: Konsisten font weight */
                        text-align: left;
                        color: #333;
                    }

                    /* Icons dalam table cells */
                    .profile-details table td i {
                        font-size: 16px !important; /* FIXED: Ukuran icon konsisten */
                        display: inline-block;
                        text-align: center;
                        margin-right: 6px;
                        color: var(--primary-color, #00695c);
                        vertical-align: middle;
                        width: 18px; /* FIXED: Lebar icon konsisten */
                    }

                    /* Text dalam cells */
                    .profile-details table td span,
                    .profile-details table th span {
                        font-size: 14px !important; /* FIXED: Ukuran text konsisten */
                        line-height: 1.4 !important;
                    }

                    /* Dapil row styling - TAMBAHKAN INI */
                    .dapil-row-content {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 8px;
                        width: 100%;
                        min-height: 25px;
                    }

                    .dapil-text {
                        flex: 1;
                        min-width: 0;
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                        hyphens: auto;
                        line-height: 1.3;
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                        color: #333;
                    }

                    .dapil-button {
                        flex-shrink: 0;
                        background-color: var(--primary-color, #00897b);
                        color: white;
                        border: none;
                        border-radius: 50%;
                        padding: 0;
                        font-size: 12px !important; /* FIXED: Ukuran font konsisten */
                        font-weight: 600;
                        cursor: pointer;
                        transition: all 0.2s ease;
                        white-space: nowrap;
                        width: 25px;
                        height: 25px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
                    }

                    .dapil-button:hover {
                        background-color: #00756a;
                        transform: translateY(-1px);
                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
                    }

                    .dapil-button:active {
                        transform: translateY(0);
                        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                    }

                    .dapil-button i {
                        font-size: 10px !important; /* FIXED: Ukuran icon button konsisten */
                    }

                    /* Styles for mobile-only rows */
                    .profile-details .mobile-only {
                        display: table-row;
                    }

                    .profile-details .mobile-only img {
                        width: 25px;
                        height: 25px;
                        vertical-align: middle;
                        margin-right: 5px;
                        object-fit: contain;
                    }

                    .mobile-text {
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                        line-height: 1.4 !important;
                    }

                    .inline-logo-text {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        flex-wrap: nowrap;
                        overflow-x: auto;
                        line-height: 1.3;
                    }

                    .inline-logo-text img {
                        max-height: 25px;
                        width: auto;
                        flex-shrink: 0;
                    }

                    .inline-logo-text .mobile-text {
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                        color: #333;
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                    }

                    /* MOBILE ONLY: Konsisten margin-right 3px untuk SEMUA logo dan emoji */
                    .profile-details .mobile-only img,
                    .inline-logo-text img,
                    .profile-details img {
                        margin-right: 3px !important; /* Logo partai, instansi, lembaga */
                    }

                    /* CSS class untuk zodiak dan shio dengan jarak 3px */
                    .zodiak-shio-spacing {
                        word-spacing: 3px !important;
                        letter-spacing: 0 !important;
                    }

                    /* Tambahan CSS untuk memastikan semua logo dalam profile-details memiliki jarak yang sama */
                    .profile-details table img {
                        margin-right: 3px !important;
                        vertical-align: middle;
                    }

                    /* Button dalam table */
                    .profile-details table th button {
                        padding: 4px 8px;
                        font-size: 12px !important; /* FIXED: Ukuran font button konsisten */
                        margin-left: 5px;
                        border-radius: 4px;
                    }

                    /* Small text seperti disclaimer dan terbilang harta */
                    .disclaimer-container {
                        margin-top: 12px;
                        font-size: 12px !important; /* FIXED: Ukuran font konsisten */
                        color: #777;
                        padding: 8px;
                        border-radius: 5px;
                        line-height: 1.4 !important;
                    }

                    .disclaimer-container p {
                        margin: 0;
                        font-size: 12px !important; /* FIXED: Ukuran font konsisten */
                    }

                    .disclaimer-container i {
                        font-size: 12px !important; /* FIXED: Ukuran icon konsisten */
                        margin-right: 4px;
                    }

                    /* Small text untuk terbilang harta */
                    small {
                        font-size: 11px !important; /* FIXED: Ukuran font kecil konsisten */
                        line-height: 1.3 !important;
                        display: block;
                        margin-top: 4px;
                    }

                    /* Recommendations Improvements */
                    .rekomendasi-container h3 {
                        font-size: 16px !important; /* FIXED: Ukuran heading konsisten */
                        text-align: center;
                        margin-bottom: 15px;
                        font-weight: 600;
                    }

                    /* Related news dalam mobile */
                    .mobile-related-news .related-news-container h3 {
                        font-size: 16px !important; /* FIXED: Ukuran heading konsisten */
                        font-weight: 600;
                    }

                    .mobile-related-news .related-news-title {
                        font-size: 13px !important; /* FIXED: Ukuran title konsisten */
                        line-height: 1.3 !important;
                        margin-bottom: 4px;
                    }

                    .mobile-related-news .related-news-date {
                        font-size: 11px !important; /* FIXED: Ukuran tanggal konsisten */
                    }

                    /* Comments section */
                    .comments-container h3 {
                        font-size: 16px !important; /* FIXED: Ukuran heading konsisten */
                        font-weight: 600;
                    }

                    /* Load more button */
                    .load-more-btn {
                        font-size: 14px !important; /* FIXED: Ukuran font button konsisten */
                        padding: 8px 16px;
                    }
                }

                /* Hide mobile-only rows in desktop view */
                @media (min-width: 768px) {
                    .profile-details .mobile-only {
                        display: none;
                    }

                    .profile-actions {
                        display: none;
                    }
                }

                /* Recommendations Fixes (for all screen sizes) */
                .rekomendasi-books {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                    gap: 15px;
                }

                /* Fix for when fewer than 6 items */
                .rekomendasi-books.center-items {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 15px;
                }

                .rekomendasi-books.center-items .book-item {
                    flex: 0 0 170px;
                    max-width: 170px;
                    margin-bottom: 10px;
                }

                /* Styles untuk menangani nama panjang */
                .book-item .book-title {
                    padding: 5px;
                    text-align: center;
                    height: auto;
                    min-height: 80px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                .book-item .official-name {
                    font-size: 0.9rem;
                    line-height: 1.2;
                    word-wrap: break-word;
                    overflow-wrap: break-word;
                    hyphens: auto;
                    margin: 5px 0;
                    min-height: 3.6em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .book-item .official-party {
                    font-size: 0.8rem;
                    color: #666;
                    margin: 5px 0;
                    word-wrap: break-word;
                    overflow-wrap: break-word;
                    hyphens: auto;
                    line-height: 1.2;
                    min-height: 2.4em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                /* Mobile View Improvements for recommendations */
                @media (max-width: 767px) {
                    .rekomendasi-books {
                        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                        gap: 10px;
                    }

                    .rekomendasi-books.center-items .book-item {
                        flex: 0 0 120px;
                        max-width: 120px;
                    }

                    .book-item .official-name {
                        font-size: 13px !important; /* FIXED: Ukuran font konsisten */
                    }

                    .book-item .official-party {
                        font-size: 12px !important; /* FIXED: Ukuran font konsisten */
                    }
                }

                /* Show text, hide icon on desktop */
                .desktop-text {
                    display: inline;
                }

                button .mobile-icon {
                    display: none;
                }

                /* Hide text, show icon on mobile */
                @media (max-width: 767px) {
                    .desktop-text {
                        display: none;
                    }

                    button .mobile-icon {
                        display: inline-block;
                    }
                }

                /* Mengatur tampilan baris desktop/mobile */
                @media (max-width: 767px) {
                    .desktop-only-row {
                        display: none;
                        /* Sembunyikan tampilan TTL desktop pada mobile */
                    }

                    .mobile-only-row {
                        display: table-row;
                        /* Tampilkan baris mobile */
                    }
                }

                @media (min-width: 768px) {
                    .mobile-only-row {
                        display: none;
                        /* Sembunyikan tampilan TTL mobile pada desktop */
                    }

                    .desktop-only-row {
                        display: table-row;
                        /* Tampilkan baris desktop */
                    }

                    /* Desktop layout adjustments for related news and comments */
                    .related-comments-container {
                        display: grid;
                        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
                    }
                }

                /* Related News & Comments Container Layout */
                .related-comments-container {
                    display: grid;
                    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
                    gap: 20px;
                    margin-top: 25px;
                }

                /* Related News Styling */
                .related-news-container {
                    background-color: #fff;
                    border-radius: 12px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                    padding: 10px;
                    margin-top: 20px;
                    overflow: hidden;
                }

                .related-news-container h3 {
                    font-size: 1.1rem;
                    color: var(--primary-color, #00695c);
                    margin-bottom: 20px;
                    font-weight: 600;
                    text-align: center;
                }

                .related-news-container h3 i {
                    margin-right: 8px;
                }

                .related-news-list {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                }

                .related-news-item {
                    display: grid;
                    grid-template-columns: 60px 1fr;
                    gap: 10px;
                    text-decoration: none;
                    color: inherit;
                    padding-bottom: 15px;
                    border-bottom: 1px solid #f0f0f0;
                    transition: transform 0.2s ease;
                }

                .related-news-item:last-child {
                    padding-bottom: 0;
                    border-bottom: none;
                }

                .related-news-item:hover {
                    transform: translateX(5px);
                }

                .related-news-image {
                    width: 60px;
                    height: 60px;
                    border-radius: 6px;
                    overflow: hidden;
                }

                .related-news-image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                }

                .related-news-item:hover .related-news-image img {
                    transform: scale(1.1);
                }

                .related-news-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }

                .related-news-title {
                    font-size: 0.8rem;
                    font-weight: 600;
                    color: #333;
                    margin: 0 0 6px 0;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    line-height: 1.4;
                    transition: color 0.2s ease;
                }

                .related-news-item:hover .related-news-title {
                    color: var(--primary-color, #00695c);
                }

                .related-news-date {
                    font-size: 0.75rem;
                    color: #666;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }

                .related-news-date i {
                    color: var(--primary-color, #00695c);
                    font-size: 0.7rem;
                }

                .no-related-news {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 100px;
                    color: #777;
                    font-size: 0.9rem;
                    font-style: italic;
                    text-align: center;
                    background-color: #f9f9f9;
                    border-radius: 8px;
                }

                /* Disqus Comments Section Styling */
                .comments-container {
                    background-color: #fff;
                    border-radius: 12px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                    padding: 20px;
                    overflow: hidden;
                }

                .comments-container h3 {
                    font-size: 1.1rem;
                    color: var(--primary-color, #00695c);
                    font-weight: 600;
                    text-align: center;
                }

                .comments-container h3 i {
                    margin-right: 8px;
                }

                #disqus_thread {
                    font-family: 'Plus Jakarta Sans', sans-serif;
                }

                /* Custom styling for Disqus iframe */
                iframe#dsq-app2 {
                    width: 100%;
                }

                /* Limit height initially and show scrollbar */
                .limited-comments #disqus_thread {
                    max-height: 600px;
                    overflow-y: auto;
                }

                /* Load more button styling */
                #disqus-load-more {
                    text-align: center;
                    margin: 15px 0 0;
                }

                .load-more-btn {
                    background-color: var(--primary-color, #00695c);
                    color: white;
                    border: none;
                    border-radius: 25px;
                    padding: 10px 20px;
                    font-size: 0.95rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    font-family: 'Plus Jakarta Sans', sans-serif;
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                }

                .load-more-btn:hover {
                    background-color: #005048;
                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
                }

                .load-more-btn i {
                    font-size: 1rem;
                }

                /* Mobile optimizations for related news and comments */
                @media (max-width: 767px) {

                    /* Mobile layout for related and comments sections */
                    .related-comments-container {
                        display: block;
                        gap: 0;
                    }

                    .related-news-container {
                        margin-top: 20px;
                        padding: 15px;
                        border-radius: 10px;
                    }

                    .related-news-container h3 {
                        font-size: 16px !important; /* FIXED: Ukuran heading konsisten */
                        margin-bottom: 15px;
                    }

                    .related-news-list {
                        gap: 12px;
                    }

                    .related-news-item {
                        padding-bottom: 12px;
                        gap: 8px;
                    }

                    .related-news-image {
                        width: 50px;
                        height: 50px;
                    }

                    .related-news-title {
                        font-size: 13px !important; /* FIXED: Ukuran title konsisten */
                        margin-bottom: 4px;
                    }

                    .related-news-date {
                        font-size: 11px !important; /* FIXED: Ukuran tanggal konsisten */
                    }

                    .no-related-news {
                        min-height: 80px;
                        font-size: 12px !important; /* FIXED: Ukuran font konsisten */
                    }

                    .comments-container {
                        padding: 15px;
                        margin-top: 0;
                        border-radius: 10px;
                    }

                    .comments-container h3 {
                        font-size: 16px !important; /* FIXED: Ukuran heading konsisten */
                        margin-bottom: 15px;
                    }

                    /* Compact comment view for mobile */
                    .limited-comments #disqus_thread {
                        max-height: 450px;
                    }

                    .load-more-btn {
                        width: 100%;
                        padding: 8px 0;
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                    }
                }

                /* Style overrides for Disqus elements (will apply when Disqus loads) */
                #disqus_thread .textarea-wrapper {
                    background-color: #f8f8f8 !important;
                    border: 1px solid #e7e7e7 !important;
                }

                #disqus_thread .post-list .post {
                    border-bottom: 1px solid #f0f0f0 !important;
                    padding: 15px 0 !important;
                }

                #disqus_thread .publisher-anchor-color {
                    color: var(--primary-color, #00695c) !important;
                }

                #disqus_thread .publisher-background-color {
                    background-color: var(--primary-color, #00695c) !important;
                }

                #disqus_thread .comment-count {
                    color: var(--primary-color, #00695c) !important;
                    font-weight: 600 !important;
                }

                /* Hide original related-news-container in mobile and show mobile version instead */
                @media (max-width: 767px) {
                    .profile-photo .related-news-container {
                        display: none;
                        /* Hide original location */
                    }

                    .mobile-related-news {
                        display: block;
                        /* Show in mobile view */
                        margin-top: 15px;
                        margin-bottom: 20px;
                    }
                }

                @media (min-width: 768px) {
                    .mobile-related-news {
                        display: none;
                        /* Hide in desktop view */
                    }
                }

                /* Mobile optimized styles for related news */
                .mobile-related-news .related-news-container {
                    background-color: #fff;
                    border-radius: 12px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                    padding: 15px;
                    margin-top: 5px;
                }

                .mobile-related-news .related-news-container h3 {
                    font-size: 16px !important; /* FIXED: Ukuran heading konsisten */
                    color: var(--primary-color, #00695c);
                    margin-bottom: 15px;
                    font-weight: 600;
                    text-align: center;
                }

                .mobile-related-news .related-news-list {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                }

                .mobile-related-news .related-news-item {
                    display: grid;
                    grid-template-columns: 50px 1fr;
                    gap: 10px;
                    padding-bottom: 12px;
                    border-bottom: 1px solid #f0f0f0;
                }

                .mobile-related-news .related-news-item:last-child {
                    padding-bottom: 0;
                    border-bottom: none;
                }

                .mobile-related-news .related-news-image {
                    width: 50px;
                    height: 50px;
                    border-radius: 6px;
                    overflow: hidden;
                }

                .mobile-related-news .related-news-title {
                    font-size: 13px !important; /* FIXED: Ukuran title konsisten */
                    margin-bottom: 4px;
                }

                /* Tooltip modal styles for all devices */
                .tooltip-modal-overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.4);
                    backdrop-filter: blur(2px);
                    z-index: 1000;
                    transition: opacity 0.25s ease;
                }

                /* Modal container */
                .tooltip-modal {
                    display: none;
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: white;
                    width: 85%;
                    max-width: 350px;
                    border-radius: 12px;
                    z-index: 1001;
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
                    overflow: hidden;
                    transition: all 0.2s ease;
                }

                /* Modal header */
                .tooltip-modal-header {
                    background-color: var(--primary-color, #00897b);
                    background-image: linear-gradient(to right, #00897b, #00756a);
                    color: white;
                    padding: 12px 16px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .tooltip-modal-title {
                    font-weight: 700;
                    font-size: 18px;
                    margin: 0;
                    letter-spacing: 0.2px;
                    text-align: left;
                    flex-grow: 1;
                }

                .tooltip-modal-close {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 18px;
                    font-family: Arial;
                    cursor: pointer;
                    padding: 0;
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    opacity: 0.8;
                    transition: all 0.2s ease;
                    margin-left: 8px;
                }

                .tooltip-modal-close:hover {
                    opacity: 1;
                    background-color: #fc5424;
                }

                /* Modal content */
                .tooltip-modal-content {
                    padding: 20px;
                    font-size: 15px;
                    line-height: 1.5;
                    color: #444;
                    max-height: 60vh;
                    overflow-y: auto;
                    text-align: center;
                }

                /* Typography improvements */
                .tooltip-modal-content b {
                    color: #00897b;
                    font-weight: 600;
                }

                .tooltip-modal-content p {
                    margin: 0 0 10px 0;
                }

                .tooltip-modal-content p:last-child {
                    margin-bottom: 0;
                }

                /* Custom scrollbar for the content */
                .tooltip-modal-content::-webkit-scrollbar {
                    width: 5px;
                }

                .tooltip-modal-content::-webkit-scrollbar-track {
                    background: #f1f1f1;
                    border-radius: 8px;
                }

                .tooltip-modal-content::-webkit-scrollbar-thumb {
                    background: #c1c1c1;
                    border-radius: 8px;
                }

                .tooltip-modal-content::-webkit-scrollbar-thumb:hover {
                    background: #a8a8a8;
                }

                /* Styles untuk tombol lapor */
                .report-btn {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    background-color: #f44336;
                    border: none;
                    border-radius: 50px;
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 0.95rem;
                    color: white;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                }

                .report-btn:hover {
                    background-color: #d32f2f;
                }

                /* Social share styles revisi */
                @media (min-width: 768px) {
                    .social-share {
                        display: flex;
                        gap: 10px;
                        align-items: center;
                    }
                }

                /* Modal Lapor style */
                .report-overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.7);
                    z-index: 1000;
                    animation: fadeIn 0.3s ease;
                }

                .report-modal {
                    display: none;
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: white;
                    width: 90%;
                    max-width: 450px;
                    border-radius: 12px;
                    z-index: 1001;
                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
                    animation: modalShow 0.3s ease;
                    max-height: 90vh;
                    overflow-y: auto;
                }

                @keyframes fadeIn {
                    from {
                        opacity: 0;
                    }

                    to {
                        opacity: 1;
                    }
                }

                @keyframes modalShow {
                    from {
                        opacity: 0;
                        transform: translate(-50%, -45%);
                    }

                    to {
                        opacity: 1;
                        transform: translate(-50%, -50%);
                    }
                }

                .report-modal-content {
                    display: flex;
                    flex-direction: column;
                }

                .report-modal-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 15px 20px;
                    background-color: #f44336;
                    color: white;
                    border-radius: 12px 12px 0 0;
                }

                .report-modal-header h3 {
                    margin: 0;
                    font-size: 1.2rem;
                    font-weight: 600;
                }

                .report-close-btn {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 1.5rem;
                    cursor: pointer;
                    line-height: 1;
                    padding: 0;
                }

                .report-modal-body {
                    padding: 20px;
                }

                .report-option-group,
                .report-comments-group {
                    margin-bottom: 20px;
                }

                .report-label {
                    font-weight: 600;
                    margin-bottom: 10px;
                    color: #333;
                    font-size: 0.95rem;
                }

                .report-options {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }

                .report-option {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }

                .report-option label {
                    font-size: 0.9rem;
                    color: #555;
                    cursor: pointer;
                }

                .report-comments-group textarea {
                    width: 100%;
                    padding: 12px;
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    resize: vertical;
                    font-family: inherit;
                    font-size: 0.9rem;
                    transition: border-color 0.2s;
                }

                .report-comments-group textarea:focus {
                    outline: none;
                    border-color: #f44336;
                    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
                }

                .word-counter {
                    text-align: right;
                    font-size: 0.8rem;
                    color: #777;
                    margin-top: 5px;
                }

                .report-actions {
                    display: flex;
                    justify-content: center;
                }

                .report-submit-btn {
                    background-color: #f44336;
                    color: white;
                    border: none;
                    border-radius: 8px;
                    padding: 12px 24px;
                    font-weight: 600;
                    font-size: 1rem;
                    cursor: pointer;
                    transition: background-color 0.2s;
                    width: 100%;
                }

                .report-submit-btn:hover {
                    background-color: #d32f2f;
                }

                /* Custom radio buttons */
                .report-option input[type="radio"] {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    width: 20px;
                    height: 20px;
                    border: 2px solid #ddd;
                    border-radius: 50%;
                    outline: none;
                    transition: all 0.2s;
                    position: relative;
                    cursor: pointer;
                }

                .report-option input[type="radio"]:checked {
                    border-color: #f44336;
                }

                .report-option input[type="radio"]:checked:after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 10px;
                    height: 10px;
                    background-color: #f44336;
                    border-radius: 50%;
                }

                /* Mobile adjustments */
                @media (max-width: 767px) {
                    .report-modal {
                        width: 95%;
                    }

                    .report-modal-header {
                        padding: 12px 15px;
                    }

                    .report-modal-body {
                        padding: 15px;
                    }

                    .report-option label {
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                    }

                    .report-label {
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                    }

                    .report-comments-group textarea {
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                    }

                    .word-counter {
                        font-size: 12px !important; /* FIXED: Ukuran font konsisten */
                    }

                    .report-submit-btn {
                        font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                    }
                }

                /* Text alignment for small elements on desktop */
                @media (min-width: 768px) {
                    small[style*="text-transform: lowercase"] {
                        text-align: center !important;
                    }
                }

                /* Efek border kerlap-kerlip putih */
                @keyframes borderBlink {
                    0% {
                        border: 2px solid rgba(255, 255, 255, 0.4);
                        box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
                    }

                    50% {
                        border: 2px solid rgba(255, 255, 255, 1);
                        box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
                    }

                    100% {
                        border: 2px solid rgba(255, 255, 255, 0.4);
                        box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
                    }
                }

                /* Styles untuk tombol verifikasi - sesuai dengan tombol social share */
                .verify-btn {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    background-color: #0089b1;
                    border-radius: 50px;
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 0.95rem;
                    color: #fff;
                    cursor: pointer;
                    height: 35px;
                    transition: all 0.3s ease;
                    animation: borderBlink 1.5s infinite;
                    text-decoration: none;
                }

                /* Hover tetap aktif */
                .verify-btn:hover {
                    background-color: #006d8f;
                }

                /* Tombol verifikasi di mobile view */
                #mobile-verify-btn {
                    flex: 1;
                    padding: 10px 10px;
                    border-radius: 10px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    font-size: 14px !important; /* FIXED: Ukuran font konsisten */
                    font-weight: bold;
                    transition: all 0.2s ease;
                    background-color: #0089b1;
                    color: white;
                    height: 30px;
                    text-decoration: none;
                    animation: borderBlink 1.5s infinite;
                }

                /* Responsif dan konsisten di mobile */
                @media (max-width: 767px) {
                    #mobile-verify-btn i {
                        margin-right: 0;
                        font-size: 14px !important; /* FIXED: Ukuran icon konsisten */
                    }

                    .profile-actions a#mobile-verify-btn {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        height: 30px;
                        padding: 0 8px;
                    }
                }

                /* Tooltips logo verified */
                .tooltip-container {
                    position: relative;
                    display: inline-block;
                }

                .tooltip-icon {
                    height: 25px;
                    cursor: help;
                }

                /* Style untuk tooltip */
                .tooltip-text {
                    visibility: hidden;
                    opacity: 0;
                    position: absolute;
                    top: 50%;
                    left: 110%;
                    transform: translateY(-50%);
                    background-color: #333 !important;
                    color: #fff !important;
                    padding: 8px 16px;
                    border-radius: 8px;
                    font-weight: bold;
                    font-size: 13px;
                    white-space: nowrap;
                    transition: opacity 0.2s ease;
                    z-index: 99999;
                    text-fill-color: #fff !important;
                    -webkit-text-fill-color: #fff !important;
                    text-shadow: none !important;
                    text-align: center;
                    line-height: 1.2;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-height: 24px;
                }

                .tooltip-text::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 100%;
                    transform: translateY(-50%);
                    border-width: 6px;
                    border-style: solid;
                    border-color: transparent #333 transparent transparent;
                }

                /* CSS untuk desktop dengan hover */
                @media (hover: hover) {
                    .tooltip-container:hover .tooltip-text {
                        visibility: visible;
                        opacity: 1;
                    }
                }

                /* CSS Checkbox Hack untuk Mobile */
                .tooltip-container input[type="checkbox"] {
                    position: absolute;
                    opacity: 0;
                    cursor: pointer;
                    height: 100%;
                    width: 100%;
                    left: 0;
                    top: 0;
                    z-index: 1;
                    margin: 0;
                    padding: 0;
                }

                .tooltip-container input[type="checkbox"]:checked~.tooltip-text {
                    visibility: visible;
                    opacity: 1;
                }

                /* Mobile styles */
                @media screen and (max-width: 768px) {
                    .tooltip-container {
                        position: relative;
                        display: inline-block;
                    }

                    .tooltip-icon {
                        height: 22px;
                        cursor: help;
                    }

                    .tooltip-text {
                        visibility: hidden;
                        opacity: 0;
                        position: absolute;
                        z-index: 99999;
                        right: auto;
                        left: -15px;
                        transform: translateX(-100%) translateY(-50%);
                        top: 50%;
                        background-color: #333 !important;
                        color: #fff !important;
                        padding: 6px 10px;
                        border-radius: 8px;
                        font-weight: bold;
                        font-size: 11px !important; /* FIXED: Ukuran font konsisten */
                        white-space: nowrap;
                        width: auto;
                        min-width: 150px;
                        max-width: 180px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                        text-align: center;
                    }

                    .tooltip-text::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: auto;
                        right: -12px;
                        transform: translateY(-50%);
                        border-width: 6px;
                        border-style: solid;
                        border-color: transparent transparent transparent #333;
                    }
                }

                /* Container Disqus */
                .comments-container {
                    position: relative;
                    max-height: 1000px;
                    overflow: hidden !important;
                }

                /* Iframe Disqus (desktop default) */
                .comments-container iframe {
                    display: block;
                    width: 100%;
                    height: calc(100% + 80px) !important;
                    margin-bottom: -70px !important;
                    border: none;
                    overflow: hidden !important;
                }

                /* Tambahan khusus untuk tampilan mobile */
                @media (max-width: 767px) {
                    .comments-container iframe {
                        height: calc(100% + 120px) !important;
                        margin-bottom: -100px !important;
                    }

                    .comments-container::after {
                        height: 80px;
                    }
                }