@font-face {
            font-family: "Guardian TextSans Web";
            /*
            src: url(../fonts/GuardianTextSans-Regular-Web.eot);
            src: url(../fonts/GuardianTextSans-Regular-Web.eot?#iefix) format("embedded-opentype"), url(../fonts/GuardianTextSans-Regular-Web.woff) format("woff"), url(../fonts/GuardianTextSans-Regular-Web.ttf) format("truetype"), url("../fonts/GuardianTextSans-Regular-Web.svg#Guardian TextSans Web") format("svg");
            */
            src: url('../fonts/GuardianTextSans-Regular-Web.eot');
            src: url('../fonts/GuardianTextSans-Regular-Web.eot?#iefix') format("embedded-opentype"), url('../fonts/GuardianTextSans-Regular-Web.woff') format("woff"), url('../fonts/GuardianTextSans-Regular-Web.ttf') format("truetype"), url('../fonts/GuardianTextSans-Regular-Web.svg#Guardian TextSans Web') format("svg");
            font-weight: 400;
            font-style: normal;
            font-stretch: normal
        }
        .GuardianTextSans-Regular-Web {
            font-family: "Guardian TextSans Web";
            font-weight: 400;
            font-style: normal;
            font-stretch: normal
        }        

        @font-face {
            font-family: "Guardian TextSans Web";
            src: url(../fonts/GuardianTextSans-RegularIt-Web.eot);
            src: url(../fonts/GuardianTextSans-RegularIt-Web.eot?#iefix) format("embedded-opentype"), url(../fonts/GuardianTextSans-RegularIt-Web.woff) format("woff"), url(../fonts/GuardianTextSans-RegularIt-Web.ttf) format("truetype"), url("../fonts/GuardianTextSans-RegularIt-Web.svg#Guardian TextSans Web") format("svg");
            font-weight: 400;
            font-style: italic;
            font-stretch: normal
        }

        .GuardianTextSans-RegularIt-Web {
            font-family: "Guardian TextSans Web";
            font-weight: 400;
            font-style: italic;
            font-stretch: normal
        }

        @font-face {
            font-family: "Guardian TextSans Web";
            src: url(../fonts/GuardianTextSans-Medium-Web.eot);
            src: url(../fonts/GuardianTextSans-Medium-Web.eot?#iefix) format("embedded-opentype"), url(../fonts/GuardianTextSans-Medium-Web.woff) format("woff"), url(../fonts/GuardianTextSans-Medium-Web.ttf) format("truetype"), url("../fonts/GuardianTextSans-Medium-Web.svg#Guardian TextSans Web") format("svg");
            font-weight: 500;
            font-style: normal;
            font-stretch: normal
        }

        .GuardianTextSans-Medium-Web {
            font-family: "Guardian TextSans Web";
            font-weight: 500;
            font-style: normal;
            font-stretch: normal
        }

        @font-face {
            font-family: "Guardian TextSans Web";
            src: url(../fonts/GuardianTextSans-MediumIt-Web.eot);
            src: url(../fonts/GuardianTextSans-MediumIt-Web.eot?#iefix) format("embedded-opentype"), url(../fonts/GuardianTextSans-MediumIt-Web.woff) format("woff"), url(../fonts/GuardianTextSans-MediumIt-Web.ttf) format("truetype"), url("../fonts/GuardianTextSans-MediumIt-Web.svg#Guardian TextSans Web") format("svg");
            font-weight: 500;
            font-style: italic;
            font-stretch: normal
        }

        .GuardianTextSans-MediumIt-Web {
            font-family: "Guardian TextSans Web";
            font-weight: 500;
            font-style: italic;
            font-stretch: normal
        }

        @font-face {
            font-family: "Guardian TextSans Web";
            src: url(../fonts/GuardianTextSans-Bold-Web.eot);
            src: url(../fonts/GuardianTextSans-Bold-Web.eot?#iefix) format("embedded-opentype"), url(../fonts/GuardianTextSans-Bold-Web.woff) format("woff"), url(../fonts/GuardianTextSans-Bold-Web.ttf) format("truetype"), url("../fonts/GuardianTextSans-Bold-Web.svg#Guardian TextSans Web") format("svg");
            font-weight: 700;
            font-style: normal;
            font-stretch: normal
        }

        .GuardianTextSans-Bold-Web {
            font-family: "Guardian TextSans Web";
            font-weight: 700;
            font-style: normal;
            font-stretch: normal
        }

        @font-face {
            font-family: "Guardian TextSans Web";
            src: url(../fonts/GuardianTextSans-BoldIt-Web.eot);
            src: url(../fonts/GuardianTextSans-BoldIt-Web.eot?#iefix) format("embedded-opentype"), url(../fonts/GuardianTextSans-BoldIt-Web.woff) format("woff"), url(../fonts/GuardianTextSans-BoldIt-Web.ttf) format("truetype"), url("../fonts/GuardianTextSans-BoldIt-Web.svg#Guardian TextSans Web") format("svg");
            font-weight: 700;
            font-style: italic;
            font-stretch: normal
        }

        .GuardianTextSans-BoldIt-Web {
            font-family: "Guardian TextSans Web";
            font-weight: 700;
            font-style: italic;
            font-stretch: normal
        }

        body {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            color: #333;
            -webkit-font-smoothing: antialiased;
        }
        a {  text-decoration: none !important; }
        .navbar-brand img { height: 40px; }

        .navbar-brand {
            display: flex;
            flex-direction: row; /* Default: Samping-sampingan */
            flex-wrap: wrap; /* Krusial: Membolehkan teks turun ke baris baru */
            align-items: center;
            justify-content: center;
            text-align: center;
            flex-grow: 1; /* Ambil semua ruang sisa di tengah */
            
            padding-left: 10px; 
            padding-right: 10px;
            margin: 0; /* Pastikan tidak ada margin yang mendorong keluar */
        }

        .navbar .container-fluid {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap; /* Penting: Ikon kiri-kanan tetap di posisinya */
        }

        .jama-logo {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 900;
            letter-spacing: -1px;
            color: #b02a27;
            margin-right: 5px;
            font-size: 1.8rem;
        }

        .jama-network {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 300;
            color: #000;
            font-size: 1.8rem;
        }        
        .brand-separator {
            font-size: 1.8rem;
            color: #b02a27;
            margin: 0 5px;
        }

        .jama-logo, .jama-network {
            display: inline-block;
        }

        /* Navigasi (Roboto Medium/500) */
        .nav-link, .nav-link-secondary, .side-menu-item {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 500;
            font-size: 0.95rem;
        }


        .editor-choice { background-color: #f8f8f8; padding: 10px; text-align: center; border-bottom: 1px solid #ddd; }

        /* home style */
        .journal-description p {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            color: #444;
            text-align: justify;
        }

        .box-information {
        border: 1px solid gray;
        padding: 10px;
        background: #f8f8f8;
        }        

        .header-box {
        text-align: center;
        background: #545050;
        margin: -10px -10px 7px -10px;
        padding: 7px 5px;
        color: white;
        }        
        .list-information li {
            border-bottom: 1px dotted gray;
            padding: 5px 0;
        }

        /* Judul Artikel Besar (Lora - Serif) */
        .article-main-title {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 700;
            font-size: 2rem;
            color: #000;
        }

        /* Judul Daftar Artikel (Lora - Serif) */
        .article-title {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 700;
            line-height: 1.3;
            color: #222;
            text-decoration: none;
        }

        /* Teks Miring (Review, Audio, Penulis) */
        .text-muted.small em, .article-sub {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-style: italic;
            color: #666;
        }

        /* Header Editor's Choice */
        .editor-choice {
            font-family: "Guardian TextSans Web","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 400;
        }        
        
        .text-red { color: #b02a27; font-weight: bold; }


        .offcanvas { width: 280px !important; border-right: none; }
        .offcanvas-header { border-bottom: 1px solid #eee; padding: 1.5rem 1rem; }
        .side-menu-item { padding: 12px 20px; color: #333; text-decoration: none; display: block; transition: 0.3s; }
        .side-menu-item:hover { background-color: #f8f9fa; color: #b02a27; }
        .jama-plus { padding: 20px; background-color: #fff; }
        .dot-red { color: #b02a27; margin-right: 10px; }
        .btn-learn-more { border: 2px solid #b02a27; color: #b02a27; font-weight: bold; border-radius: 8px; margin-top: 15px; }
        .btn-learn-more:hover { background-color: #b02a27; color: white; }
        .offcanvas-body {
            overflow-y: auto; /* Mengaktifkan scroll vertikal */
            max-height: 100vh; /* Membatasi tinggi setara tinggi layar */
            scrollbar-width: thin; /* Untuk browser Firefox agar scrollbar tidak terlalu lebar */
        }

        .offcanvas-body::-webkit-scrollbar {
            width: 6px;
        }
        .offcanvas-body::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 10px;
        }
        .jama-plus {
            padding-bottom: 30px; /* Jarak tambahan agar tombol Learn More tidak terpotong di bawah */
        }        

        /* Menghilangkan panah default bootstrap jika diinginkan */
        .no-caret::after {
            display: none;
        }

        .dropdown-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Styling isi menu */
        .dropdown-menu li {
            font-size: 0.9rem;
        }

        .dropdown-menu a:hover {
            text-decoration: underline !important;
        }
        
    .secondary-nav {
        font-size: 15px; /* Ukuran font standar JAMA */
        min-height: 45px;
        display: flex;
        align-items: center;
    }
    
    .nav-link-secondary {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .nav-link-secondary:hover {
        color: #b02a27; 
    }

    .border-top, .border-bottom {
        border-color: #e9ecef !important;
    }
    .custom-dropdown-animate {
        right: 10px !important; 
        left: auto !important;
        
        min-width: 280px; 
        max-width: 90vw;
        
        border-radius: 8px;
        margin-top: 10px;
        z-index: 1050; 
    }

    .dropdown {
        position: static !important;
    }

    .breadcrumb_separator {
        font-size: 0.8em;
    }
    .journal_thumb {
        padding-top: 7px;
    }
    .pkp_screen_reader {
        display: none;
    }
    /* style sidebar */
    .pkp_block {
        border: 1px solid gray;
        margin-top: 20px;
        padding: 5px 10px;
    }
    .pkp_block > .title {
        background: #545050;
        margin: -5px -10px;
        padding: 5px;
        color: white;
        text-align: center;
        font-size: 1.25rem;
    }
    .pkp_block > .content {
        padding-top: 15px;
    }
    .content > h2.title {
        margin: -20px -10px 10px -10px !important;
        text-align: center;
        font-size: 1.28rem;
        color: white;
        background: #545050;
        padding: 5px;
    }        
    /* Gaya Link Artikel */
    .article-link {
        color: #222;
        text-decoration: none;
        line-height: 1.3;
    }
    .article-link:hover {
        text-decoration: underline;
    }

    /* Garis Merah di atas Tab Aktif */
    .border-top-red {
        border-top: 3px solid #b02a27 !important;
    }

    .active-tab {
        background-color: #fff;
    }

    /* Lingkaran Social Icons */
    .icon-circle {
        width: 28px;
        height: 28px;
        border: 1px solid #ccc;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        cursor: pointer;
    }

/* Gaya Link Jurnal */
.journal-link {
    color: #000;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s;
}
.journal-link:hover {
    color: #b02a27;
}

/* Kustomisasi Garis Atas Warna-Warni */
.journal-item {
    border-top: 4px solid #ccc;
    min-height: 80px;
}

.border-top-pink { border-top-color: #e91e63 !important; }
.border-top-red { border-top-color: #b02a27 !important; }
.border-top-green { border-top-color: #2e7d32 !important; }
.border-top-navy { border-top-color: #1a237e !important; }
.border-top-blue { border-top-color: #0277bd !important; }
.border-top-darkred { border-top-color: #880e4f !important; }
.border-top-lightgreen { border-top-color: #8bc34a !important; }
.border-top-orange { border-top-color: #ef6c00 !important; }
.border-top-cyan { border-top-color: #00bcd4 !important; }
.border-top-lightblue { border-top-color: #03a9f4 !important; }

/* Banner Read More */
.read-more-banner {
    border-radius: 4px;
}    

/* Garis bawah merah khas JAMA */
.border-bottom-red {
    border-bottom: 2px solid #b02a27;
    padding-bottom: 5px;
}

/* Judul Artikel */
.article-item h4 {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Efek Hover Merah */
.hover-red:hover {
    color: #b02a27 !important;
    text-decoration: underline !important;
}

/* Gaya Badge FREE & ONLINE ONLY */
.badge.border {
    border-color: #333 !important;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

.archive-item {
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.archive-item:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); 
    border-color: #007bff;
}

.block_make_submission > .content {
    text-align: center;
    padding: 5px;
}
.block_make_submission {
    background: #545050;
}
.block_make_submission_link {
    color: white;
}
/* Pengaturan Responsif untuk Ikon PDF */
@media (max-width: 576px) {
    .article-item {
        flex-direction: column;
    }
    .article-pdf {
        margin-top: 15px;
        margin-left: 0 !important;
        text-align: right;
    }
}

/* Garis tipis di bawah kategori artikel */
.border-bottom-thin {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    display: inline-block;
    width: 100%;
}

/* Tipografi Judul */
.article-header h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    color: #222;
}

/* Box Key Points */
.key-points-box p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
}

.key-points-box strong {
    font-weight: 800;
}

/* Sidebar Styling */
.action-sidebar {
    position: sticky;
    top: 100px; /* Menempel saat scroll jika header sticky aktif */
}

.maintenance-box {
    line-height: 1.4;
    border-radius: 2px;
}

.btn-danger {
    background-color: #b02a27 !important;
    border: none;
}

/* Ikon Styling (Menggunakan Bootstrap Icons) */
.bi {
    vertical-align: middle;
}

/* Gaya Khusus Abstract */
.abstract-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
    text-align: justify; /* Meniru tampilan jurnal cetak jika diinginkan */
}

.abstract-content strong {
    font-weight: 800;
    color: #000;
    margin-right: 5px;
}

.article-abstract h3 {
    font-size: 1.4rem;
    letter-spacing: 0.5px;
}

/* Responsivitas untuk mobile */
@media (max-width: 576px) {
    .abstract-content p {
        font-size: 1rem;
        text-align: left;
    }
}


/* Styling Footer Dark */
.footer-dark {
    background-color: #1a1a1a !important;
    font-size: 13.5px;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #b02a27;
    text-decoration: underline;
}

.text-secondary {
    color: #999 !important;
}

/* Icon List Style */
.footer-icons-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    color: #ccc;
}

.footer-icon {
    width: 25px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}

/* Social Box Footer */
.social-box {
    width: 32px;
    height: 32px;
    border: 1px solid #444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.social-box:hover {
    background: #444;
}

/* Tombol Subscribe */
.footer-dark .btn-secondary {
    background-color: #444;
    border: none;
    color: #fff;
}

/* Warna Background Footer */
.bg-dark-footer {
    background-color: #1a1a1a; /* Hitam pekat */
}

/* Logo JN Lingkaran */
.jn-circle-logo {
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

/* Styling Link Footer */
.footer-links a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
    opacity: 0.9;
}

.footer-links a:hover {
    text-decoration: underline;
    opacity: 1;
}

/* Kustomisasi Teks Kecil */
footer p {
    color: #ccc;
    line-height: 1.5;
}

/* Responsivitas: Rata tengah di mobile */
@media (max-width: 768px) {
    footer {
        text-align: center;
    }
    .jn-circle-logo {
        margin: 0 auto 10px auto;
    }
    .text-md-end {
        text-align: center !important;
        margin-top: 20px;
    }
}
    /* Responsivitas Border Kolom */
    @media (min-width: 768px) {
        .border-end-md {
            border-right: 1px solid #dee2e6 !important;
        }
    }

    .italic {
        font-style: italic;
    }    

    @media (min-width: 768px) {
        .dropdown {
            position: relative !important;
        }
        .custom-dropdown-animate {
            right: 0 !important;
            min-width: 320px;
        }
    }            
    @media (max-width: 576px) {
        .navbar-brand {
            line-height: 1.1; /* Mengatur jarak antar baris agar lebih rapat */
        }

        .jama-logo {
            font-size: 1.2rem; /* Perkecil sedikit agar proporsional */
        }

        .jama-network {
            font-size: 0.95rem; /* Perkecil agar pas */
        }
    }

    @media (max-width: 480px) {
        .brand-separator {
            display: none;
        }
    }