.pkp_site_name {
	text-align:center
}
.pkp_site_name .is_img img{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-top:5px;
	margin-bottom:0px;
}

.pkp_page_index .journals > ul > li{
	display: block;
	width: 100%;
	padding:0;
	text-align:center;
	box-shadow:none;
	border: none;
}

@media only screen and (min-width:768px){
.pkp_page_index .journals > ul > li{
	display:flex;
	text-align:center;
	float:left;
	flex-direction: column;
	margin-bottom: 30px;
	width: calc(50% - 7.5px);
	padding: 15px;
	box-shadow: 0 .3rem 1.525rem -.375rem rgba(0, 0, 0, .15);
	margin:auto auto 15px auto;
	border-radius:5px;
	transition: all .3s ease-in-out;
	width:275px; /*lebar kotak*/
	height:500px;  /*tinggi kotak*/
	margin-left:5px;
	margin-right:5px
	}
}
/*lebar ukuran*/
@media (min-width: 992px) {
    .pkp_structure_content {
        padding-top:2.143rem;
        width:100%;
    }
}

@media (min-width: 992px) {
	.pkp_structure_main:first-child:last-child {
		float:none;
		margin-left: auto;
		margin-right: auto;
		margin-top: 2.857rem;
		width:1200px
    }

    
	
	.pkp_structure_main:first-child:last-child:before {
		left: 150px
    }

	.pkp_structure_main:first-child:last-child:after {
		left: auto;
		right: 150px
    }
}

@media only screen and (min-width:768px){
.pkp_page_index .journals > ul > li:nth-of-type(odd){
	width:275px; /*lebar kotak*/
	height:500px;  /*tinggi kotak*/
}
}
.pkp_page_index .journals > ul > li:hover{
	box-shadow: none;
}
@media only screen and (min-width:768px){
.pkp_page_index .journals > ul > li:hover{
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .15);
    }
}
.pkp_page_index .journals > ul > li:hover img{
	-webkit-filter: grayscale(90%);
	filter: grayscale(90%);
	margin-top:-3px;
}
.pkp_page_index .journals > ul > li::before, .pkp_page_index .journals > ul > li::after{
	display:none;
}
.pkp_page_index .journals .description{
	display: block;
    max-height: 105px; /*tinggi deskripsi*/
	overflow: hidden;
	text-overflow: ellipsis;
}
.pkp_page_index .journals .description p{
    margin:0;
    line-height:1.25;
	text-align:justify;
	
}
.pkp_page_index .journals .thumb{
	float:none;
	margin-left:auto;
	margin-right:auto;
	padding: 0;
	text-align:center;
}
@media only screen and (min-width:768px){
	.pkp_page_index .journals .thumb{
		flex: 15%;
		float: left;
		display: inline-block;
		width:150px; /*lebar gambar*/
	}
}
.pkp_page_index .journals .body{
	flex: 100%;
	float: none;
}
@media only screen and (min-width:768px){
	.pkp_page_index .journals .body{
		flex: 75%;
	}
}
.pkp_page_index .journals .thumb + .body{
	width:auto;
	float: none;
	margin-top:10px
}


.pkp_page_index .journals img{
	border-radius:5px;
	box-shadow: 0 .3rem 1.525rem -.375rem rgba(0, 0, 0, .15);
	transition: all .3s ease-in-out;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	height:150px; /*tinggi gambar*/
}

.pkp_page_index .journals h3{
	margin-top: 15px;
	margin-bottom: 15px;
	font-size:14px;
	line-height: 1.25;
	font-family: "Menlo",Monaco,Consolas, Courier New,monospace;
	    text-align: left;
	font-weight:normal;
}

.pkp_page_index .journals .body h3 a{
	color:#3B524D;
	transition: all .3s ease-in-out;

}
.pkp_page_index .journals .body h3 a:hover{
	color:#2b7822
}
.pkp_page_index .journals .links li{
    margin:15px auto;
}
.pkp_page_index .journals .links li a{
	padding:5px 10px;
	border-radius: 1px;
	background:#3B524D;
	color:#fff;
	text-decoration:none;
	transition: all .3s ease-in-out;
	box-shadow: 0 .3rem 1.525rem -.375rem #3B524D8a;
	font-size:12px;
}
.pkp_page_index .journals .links li a:hover{
	background:#2e7a25;
	box-shadow:none;
}
.pkp_page_index .journals .links li a:after{
	content: "\f101";
	font-family: FontAwesome;
	visibility: hidden;
	margin-left:-10px;
	transition: all .3s ease-in-out;
	opacity: 0;
}
.pkp_page_index .journals .links li a:hover:after{
	visibility: visible;
	margin-left: 5px;
	opacity: 1;
}
.pkp_brand_footer {   
	padding:0px
}

.pkp_brand_footer img{
	display:none;
}
    .pkp_navigation_user.pkp_navigation_user {
		margin: 0;
		padding:2px;
		border: none;
    }
.has_thumb { 
	width: 100px; /* Ganti nilai 200px sesuai dengan lebar yang Anda inginkan */
}


/* =========================================
   SIDEBAR ULTRA SLIM - iOS 18 Obsidian
   Optimized for Scopus Reputated Journal
   ========================================= */

/* Load Material Icons Font */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons-ojs {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 16px; /* Diperkecil agar slim */
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

/* KONTENER UTAMA SEMUA BLOK (Main Menu, Template, Visitors, Indexing) */
.glass-sidebar-compact, 
.glass-sidebar-template, 
.glass-sidebar-visitors, 
.glass-sidebar-indexing {
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 12px;
    padding: 6px !important;
    margin-bottom: 6px !important; /* Jarak antar blok sangat rapat */
    border: 0.5px solid rgba(255, 255, 255, 0.7);
    margin-top: 0 !important; /* Paksa nempel ke atas */
}

/* HEADER MAGENTA (KAPSUL) */
.glass-header-compact {
    background: #4B7469!important;
    color: #ffffff !important;
    padding: 4px 8px !important;
    border-radius: 8px;
    text-align: center;
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* Jarak sangat rapat ke box putih */
}

/* ITEM MENU (MAIN MENU) */
.glass-item-compact {
    display: flex;
    align-items: center;
    background: #ffffff !important;
    color: #333 !important;
    text-decoration: none !important;
    padding: 3px 8px !important; /* Sangat tipis */
    margin-bottom: 3px !important; /* Jarak antar baris menu sangat rapat */
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #f2f2f2;
}

.glass-icon-box-compact {
    background: #E1DAC2;
    color: #4B7469;
    width: 24px; /* Ikon diperkecil */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* BOX PUTIH - DYNAMIC GLASS EFFECT */
.visitor-widget-box,
.indexing-grid,
.template-button-clean {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(52, 83, 77, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 0 !important;
    box-shadow: 0 2px 8px rgba(52, 83, 77, 0.06) !important;
    animation: boxFadeIn 0.4s ease-out !important;
    transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.visitor-widget-box::before,
.indexing-grid::before,
.template-button-clean::before {
    content: '' !important;
    position: absolute !important;
    top: -30px !important;
    left: -30px !important;
    width: 80px !important;
    height: 80px !important;
    background: radial-gradient(circle, rgba(52,83,77,0.08) 0%, transparent 70%) !important;
    transition: all 0.4s ease !important;
    z-index: 0 !important;
}

.visitor-widget-box:hover,
.indexing-grid:hover,
.template-button-clean:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(52, 83, 77, 0.25) !important;
    box-shadow: 0 6px 20px rgba(52, 83, 77, 0.12) !important;
    transform: translateY(-2px) !important;
}

.visitor-widget-box:hover::before,
.indexing-grid:hover::before,
.template-button-clean:hover::before {
    top: -10px !important;
    left: -10px !important;
    width: 120px !important;
    height: 120px !important;
    background: radial-gradient(circle, rgba(72,111,101,0.12) 0%, transparent 70%) !important;
}

.visitor-widget-box > *,
.indexing-grid > *,
.template-button-clean > * {
    position: relative !important;
    z-index: 1 !important;
}

@keyframes boxFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.visitor-widget-box::after,
.indexing-grid::after,
.template-button-clean::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 60% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #34534D, transparent) !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease !important;
}

.visitor-widget-box:hover::after,
.indexing-grid:hover::after,
.template-button-clean:hover::after {
    transform: translateX(-50%) scaleX(1) !important;
}

/* =========================================
   SESUAIKAN JUGA GLASS HEADER & ITEM
   ========================================= */

/* Header sidebar */
.glass-header-compact {
    background: #34534D !important;
}

/* Hover item menu */
.glass-item-compact:hover,
.template-button-clean:hover {
    background: #34534D !important;
    color: #fff !important;
}

/* Ikon box */
.glass-icon-box-compact {
    background: #eaf0ef !important;
    color: #34534D !important;
}

.glass-item-compact:hover .glass-icon-box-compact {
    background: #486F65 !important;
    color: #fff !important;
}

/* Link warna */
.glass-item-compact {
    color: #34534D !important;
}

/* EFEK HOVER GLOBAL */
.glass-item-compact:hover, .template-button-clean:hover {
    background: #4B7469!important;
    color: #fff !important;
    transform: translateX(3px);
}

/* MENGHILANGKAN SPASI GAIB OJS */
.pkp_structure_sidebar p,
.glass-sidebar-compact p, 
.glass-sidebar-template p, 
.glass-sidebar-visitors p,
.glass-sidebar-indexing p,
.pkp_block br {
    margin: 0 !important;
    padding: 0 !important;
    display: none !important; /* Mematikan baris kosong otomatis */
}

/* Paksa kontainer sidebar nempel ke atas */
.pkp_structure_sidebar .pkp_block {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Penyesuaian gambar agar tidak bengkak */
.template-img-clean { max-width: 70% !important; height: auto; }
.index-logo { max-width: 75% !important; height: auto; margin: 2px 0; }
.stat-link { font-size: 9px !important; color: #4B7469; font-weight: bold; }

/* =========================================
   ARTICLE LIST - TIMELINE STYLE FINAL
   ========================================= */

/* Reset ke 1 kolom + timeline */
.obj_issue_toc .sections .section .cmp_article_list,
.obj_issue_toc .sections .section ul,
.page_issue .sections .section ul {
    display: block !important;
    grid-template-columns: unset !important;
    padding: 0 0 0 30px !important;
    margin: 10px 0 !important;
    list-style: none !important;
    position: relative !important;
}

/* Garis vertikal timeline */
.obj_issue_toc .sections .section ul::before,
.obj_issue_toc .sections .section .cmp_article_list::before {
    content: '' !important;
    position: absolute !important;
    left: 10px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: linear-gradient(180deg, #34534D, #486F65, transparent) !important;
    border-radius: 2px !important;
}

/* Li wrapper */
.obj_issue_toc .sections .section ul li {
    display: block !important;
    position: relative !important;
    margin-bottom: 10px !important;
}

/* Titik bulat timeline */
.obj_issue_toc .sections .section ul li::before {
    content: '' !important;
    position: absolute !important;
    left: -25px !important;
    top: 18px !important;
    width: 12px !important;
    height: 12px !important;
    background: #34534D !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 2px #34534D !important;
    z-index: 0 !important;
    transition: all 0.3s ease !important;
}

.obj_issue_toc .sections .section ul li:hover::before {
    background: #486F65 !important;
    box-shadow: 0 0 0 2px #486F65 !important;
    transform: scale(1.2) !important;
}

/* =========================================
   CARD ARTIKEL
   Pakai display: block agar img + a DOI
   bisa inline satu baris secara natural
   ========================================= */

.obj_article_summary {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #eef2f1 !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 10px rgba(52,83,77,0.07) !important;
    transition: all 0.3s ease !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Hover */
.obj_article_summary:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 6px 20px rgba(52,83,77,0.12) !important;
    border-color: rgba(72,111,101,0.3) !important;
    background: #fafcfb !important;
}

/* Badge Article */
.obj_article_summary::before {
    content: 'Article' !important;
    display: inline-block !important;
    background: #eaf0ef !important;
    color: #34534D !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 6px !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}

/* Judul */
.obj_article_summary h4.title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 4px !important;
}

.obj_article_summary h4.title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.obj_article_summary h4.title a:hover {
    color: #34534D !important;
}

/* Meta wrapper */
.obj_article_summary .meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* Penulis */
.obj_article_summary .meta .authors {
    display: block !important;
    font-size: 11px !important;
    color: #888 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 1 !important;
}

/* Halaman */
.obj_article_summary .meta .pages {
    display: block !important;
    font-size: 11px !important;
    color: #bbb !important;
    float: none !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Galley links - tetap flex untuk PDF button */
.obj_article_summary .galleys_links {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    padding: 6px 0 0 !important;
    margin: 4px 0 4px !important;
    border-top: 1px solid #f0f0f0 !important;
    gap: 6px !important;
}

/* Tombol PDF */
.obj_article_summary .galleys_links li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.obj_article_summary .galleys_links .obj_galley_link.pdf {
    background: #34534D !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
}

.obj_article_summary .galleys_links .obj_galley_link.pdf:hover {
    background: #486F65 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================
   DOI - SATU BARIS
   img dan a adalah direct children dari div
   karena parent display:block mereka inline
   ========================================= */

/* Logo DOI 16x16 inline */
.obj_article_summary > img[src*="icon-doi"] {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    display: inline !important;
    vertical-align: middle !important;
    margin-right: 3px !important;
    margin-top: 2px !important;
    float: none !important;
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* Link DOI inline sejajar logo */
.obj_article_summary > a[href*="doi.org"] {
    display: inline !important;
    vertical-align: middle !important;
    font-size: 11px !important;
    color: #3B524D !important;
    text-decoration: none !important;
    word-break: break-all !important;
    margin-top: 0 !important;
    float: none !important;
    position: static !important;
}

.obj_article_summary > a[href*="doi.org"]:hover {
    color: #3B524D !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Sembunyikan br dalam link DOI */
.obj_article_summary > a[href*="doi.org"] br {
    display: none !important;
}

/* Mobile */
@media (max-width: 768px) {
    .obj_issue_toc .sections .section ul {
        padding-left: 24px !important;
    }
    .obj_article_summary:hover {
        transform: none !important;
    }
    .obj_article_summary .meta .pages {
        float: none !important;
        margin-top: 0 !important;
        display: block !important;
    }
}


/* =========================================
   MASTER RESET GLASS FOR CURRENT ISSUE
   ========================================= */

/* 1. Paksa Judul "CURRENT ISSUE" */
.page_issue header h1, 
header.page_header h1,
.page_title {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    border-left: 6px solid #E1DAC2!important;
    color: #E1DAC2!important;
    display: inline-block !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* 2. Paksa Wadah Volume nempel & membungkus teks */
/* OJS sering memakai class .heading atau div tertentu di sini */
.obj_issue_toc .heading,
.obj_issue_toc h2 {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    padding: 15px 20px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 15px !important;
    display: block !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* 3. Menghilangkan garis kuning/oranye di bawah judul agar bersih */
.page_title::after, 
header.page_header::after,
.page_issue .page_header::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* 4. Memperjelas Teks Published */
.published {
    display: block !important;
    margin-top: 5px !important;
    color: #E1DAC2!important;
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase;
}

/* 5. Merapikan Judul Volume */
.obj_issue_toc .heading h2,
.obj_issue_toc .title {
    margin: 0 !important;
    font-weight: 800 !important;
    color: #333 !important;
}


/* ====================================================
   PREMIUM GLASS FOOTER - V5 COMPACT
   ✓ Badge CC LEBIH BESAR (44px)
   ✓ Spacing antar baris LEBIH RAPAT
   ✓ Padding footer disesuaikan tidak terlalu lega
   ✓ Garis hijau atas BERGERAK
   ==================================================== */

/* ===== MAIN FOOTER CONTAINER ===== */
.pkp_structure_footer {
    position: relative;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top: none !important;
    padding: 45px 40px 35px !important;
    margin-top: 60px;
    border-radius: 40px 40px 0 0;
    box-shadow: 
        0 -20px 50px rgba(75, 116, 105, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
    animation: footerFloat 7s ease-in-out infinite;
    text-align: center;
}

/* ===== GARIS HIJAU ANIMASI DI ATAS ===== */
.pkp_structure_footer::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(
        90deg,
        #4B7469 0%,
        #4B7469 15%,
        #E1DAC2 35%,
        #ffffff 50%,
        #E1DAC2 65%,
        #4B7469 85%,
        #4B7469 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: borderFlow 3s linear infinite !important;
    z-index: 10 !important;
    display: block !important;
    box-shadow: 0 0 12px rgba(75, 116, 105, 0.4);
}

/* ===== BLOB CAHAYA DI LATAR ===== */
.pkp_structure_footer::after {
    content: "";
    position: absolute;
    bottom: -100px;
    right: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(75, 116, 105, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: blobDrift 14s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

/* ===== FOOTER CONTENT WRAPPER ===== */
.pkp_footer_content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    transition: all 0.5s ease;
}

/* ===== PARAGRAF PERTAMA (CC BADGE) - LEBIH RAPAT ===== */
.pkp_footer_content p {
    margin: 0 0 16px !important;
    padding: 0;
    text-align: center;
    line-height: 1;
}

/* ===== CC BADGE - LEBIH BESAR ===== */
.pkp_footer_content p img,
.pkp_structure_footer img[src*="licensebuttons"],
.pkp_structure_footer img[src*="creativecommons"],
.pkp_structure_footer img[alt*="Creative Commons"] {
    display: inline-block !important;
    padding: 10px 18px !important;
    background: rgba(75, 116, 105, 0.08);
    border: 1px solid rgba(75, 116, 105, 0.25);
    border-radius: 14px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: badgePulse 3s ease-in-out infinite;
    cursor: pointer;
    height: 44px !important;
    width: auto !important;
    margin: 0 auto !important;
    vertical-align: middle;
    float: none !important;
}

.pkp_footer_content p img:hover,
.pkp_structure_footer img[src*="licensebuttons"]:hover,
.pkp_structure_footer img[src*="creativecommons"]:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(75, 116, 105, 0.15);
    box-shadow: 0 10px 25px rgba(75, 116, 105, 0.25);
}

/* ===== DIVIDER HALUS ===== */
.pkp_footer_content p::after {
    content: "";
    display: block;
    width: 50%;
    margin: 14px auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(75, 116, 105, 0.35), transparent);
}

/* ===== 3 BARIS DIV - JARAK DIRAPATKAN ===== */
.pkp_footer_content div {
    font-family: Georgia, 'Times New Roman', serif;
    margin: 0 !important;
    padding: 4px 0;
    line-height: 1.5;
    text-align: center !important;
}

/* Baris 1: License */
.pkp_footer_content div:nth-of-type(1) {
    font-size: 15px;
    color: #2c3e35;
    padding-top: 10px;
    padding-bottom: 6px;
}

/* Baris 2: Journal (highlighted) */
.pkp_footer_content div:nth-of-type(2) {
    font-size: 19px;
    padding: 6px 0 4px;
}

.pkp_footer_content div:nth-of-type(2) a,
.pkp_footer_content div:nth-of-type(2) strong {
    background: linear-gradient(135deg, #4B7469, #6b9080);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Baris 3: Publisher */
.pkp_footer_content div:nth-of-type(3) {
    font-size: 14px;
    color: #2c3e35;
    padding-top: 2px;
}

/* ===== TEKS PENEKANAN ===== */
.pkp_structure_footer strong,
.pkp_structure_footer b {
    color: #4B7469;
    font-weight: 700;
}

/* ===== LINK STYLING ===== */
.pkp_structure_footer a {
    color: #4B7469 !important;
    text-decoration: none;
    position: relative;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-block;
}

.pkp_structure_footer a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #4B7469, #E1DAC2);
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.pkp_structure_footer a:hover::after {
    width: 100%;
}

.pkp_structure_footer a:hover {
    color: #6b9080 !important;
}

/* ===== ANIMATIONS ===== */
@keyframes footerFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes borderFlow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes blobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, -40px) scale(1.2); }
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(75, 116, 105, 0.3); }
    50% { box-shadow: 0 0 0 14px rgba(75, 116, 105, 0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .pkp_structure_footer {
        padding: 35px 24px 25px !important;
        border-radius: 30px 30px 0 0;
    }
    
    .pkp_footer_content p img {
        height: 38px !important;
        padding: 8px 14px !important;
    }
    
    .pkp_footer_content div:nth-of-type(2) {
        font-size: 16px;
    }
    
    .pkp_structure_footer::after {
        width: 250px;
        height: 250px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .pkp_structure_footer,
    .pkp_structure_footer::before,
    .pkp_structure_footer::after,
    .pkp_footer_content p img {
        animation: none !important;
    }
}

/* =========================================
   ADDITIONAL CONTENT GLASS DESIGN
   ========================================= */

/* Wadah Utama Deskripsi */
.glass-description-card {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    overflow: hidden;
}

/* Gambar Thumbnail Jurnal */
.journal-thumb-glass {
    float: right;
    width: 220px; /* Ukuran lebih proporsional */
    border-radius: 12px;
    margin-left: 20px;
    margin-bottom: 15px;
    border: 5px solid #ffffff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

.journal-thumb-glass:hover {
    transform: scale(1.05) rotate(2deg);
}

/* Styling Teks Deskripsi */
.glass-description-card p {
    line-height: 1.8 !important;
    color: #333 !important;
    font-size: 14px !important;
    margin-bottom: 15px;
}

/* Judul Indeksasi */
.indexing-title-glass {
    background: #4B7469;
    color: #fff;
    display: inline-block;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 20px 0 15px 0;
}

/* Wadah Logo Indeks */
.indexing-flex-glass {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #f0f0f0;
}

.indexing-flex-glass img {
    height: 40px; /* Seragamkan tinggi logo */
    width: auto;
    filter: grayscale(20%);
    transition: 0.3s;
}

.indexing-flex-glass img:hover {
    filter: grayscale(0%);
    transform: translateY(-3px);
}

/* Bersihkan float */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* =========================================
   NAVBAR GLASS HOVER FIX
   ========================================= */

/* 1. Warna Dasar Teks Navbar */
.pkp_navigation_primary a {
    color: #444 !important; /* Abu gelap agar jelas */
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

/* 2. SAAT MOUSE HOVER: Berubah jadi Magenta, bukan Putih */
.pkp_navigation_primary a:hover, 
.pkp_navigation_primary .ui-state-hover a {
    color: #ffffff !important; /* Teks jadi putih */
    background: #E1DAC2!important; /* Background jadi Magenta khas Scopus */
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(33, 21, 199, 0.3) !important;
}

/* 3. Dropdown Menu (Jika ada menu About yang ditarik ke bawah) */
.pkp_navigation_primary ul li ul {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-radius: 0 0 10px 10px;
    border: 1px solid #f2f2f2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.pkp_navigation_primary ul li ul li a {
    color: #333 !important;
    padding: 10px 15px !important;
}

.pkp_navigation_primary ul li ul li a:hover {
    background: #E1DAC2 !important;
    color: #E1DAC2!important; /* Teks jadi magenta saat hover di dropdown */
}

/* 4. Search Button Fix */
.pkp_navigation_primary .search a:hover {
    background: none !important;
    color: #E1DAC2!important;
}

/* =========================================
   EXCLUSIVE 2-COLUMN GLASS - OPTIMIZED
   ========================================= */

/* 1. Judul Jabatan (Editor in Chief / Editorial Team) */
.editorial-title-badge, 
[class*="editorial"] .pkp_structure_main h3 {
    background: #486F65!important;
    color: #ffffff !important;
    display: inline-block !important;
    padding: 6px 20px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 12px rgba(21, 199, 140, 0.2) !important;
    border: none !important;
}

/* 2. Container Grid 2 Kolom */
.editor-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

/* 3. Kartu Editor (Glass Effect) - DIPERBAIKI */
.editor-card {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    padding: 18px !important; /* Padding lebih lega */
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease-in-out !important;
    
    /* Perbaikan utama: Menggunakan block agar flow teks natural */
    height: auto !important;
    display: block !important; 
    overflow: visible !important;
    text-align: left !important;
}

/* Hover Effect */
.editor-card:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-5px) !important;
    border-color: #486F65 !important;
    box-shadow: 0 8px 25px rgba(72, 111, 101, 0.15) !important; /* ↠diperbaiki */
}

/* 4. Tipografi di Dalam Kartu - DIPERBAIKI */
.editor-card a {
    color: #486F65 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    margin-bottom: 3px !important;  /* ↠dikurangi dari 8px */
    display: block !important;
}

.editor-card span {
    font-size: 12px !important;
    color: #444 !important;
    line-height: 1.4 !important;    /* ↠dikurangi dari 1.6 */
    display: block !important;      /* ↠diubah dari inline */
    white-space: normal !important;
    word-wrap: break-word !important;
    margin-bottom: 2px !important;  /* ↠tambahan, jarak antar span kecil */
}

/* 5. Fix: Menghilangkan Judul Otomatis OJS agar Tidak Dobel */
.page_editorial_team .page_header h1,
.page_about_editorialTeam .page_header h1,
.page_about_display .page_header h1 {
    display: none !important;
}

/* 6. Responsif: 1 Kolom di HP */
@media (max-width: 768px) {
    .editor-grid-container {
        grid-template-columns: 1fr !important;
    }
}



/* =========================================
   MOBILE FIX - REVISED
   ========================================= */
@media (max-width: 767px) {
    .pkp_structure_head_wrapper,
    .pkp_site_name_wrapper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    button.pkp_navigation_primary_toggle {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 999 !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.2) !important;
        border: 1px solid rgba(255,255,255,0.4) !important;
        padding: 7px 10px !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .pkp_navigation_primary_wrapper {
        border: none !important;
    }

    .pkp_structure_content {
        margin-top: 10px !important;
    }
}
/* =========================================
   FINAL FIX - EDGE TO EDGE
   ========================================= */

/* Hilangkan background abu-abu di kiri kanan */
body {
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Paksa seluruh struktur OJS edge-to-edge */
#pkp_content_main,
.pkp_structure,
.pkp_structure_head,
.pkp_structure_head_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Tombol hamburger masuk ke dalam banner */
@media (max-width: 767px) {
    .pkp_structure_head_wrapper {
        position: relative !important;
    }

    button.pkp_navigation_primary_toggle {
        position: absolute !important;
        top: 50% !important;
        left: 8px !important;
        transform: translateY(-50%) !important;
        z-index: 999 !important;
        /* FIX 2: sebelumnya #E1DAC2(255,255,255,0.2) — sintaks tidak valid */
        background: rgba(255,255,255,0.2) !important;
        border: 1px solid rgba(255,255,255,0.5) !important;
        border-radius: 6px !important;
        padding: 6px 10px !important;
        color: #fff !important;
        margin: 0 !important;
        float: none !important;
    }
}
@media (max-width: 991px) {
    .pkp_head_wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    button.pkp_navigation_primary_toggle {
        order: 1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        background: #4B7469 !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 15px !important;
        color: #fff !important;
        margin: 0 !important;
        z-index: 999 !important;
        flex-shrink: 0 !important;
    }

    .pkp_site_name_wrapper {
        order: 2 !important;
        flex: 1 !important;
    }
}

/* FIX 1: huruf "A" nyasar sebelum komentar ini sudah dihapus */
/* Hilangkan celah putih di kiri kanan banner */
.pkp_structure_head_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pkp_head_wrapper {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Override container utama OJS yang punya max-width */
.pkp_structure {
    padding: 0 !important;
    margin: 0 !important;
}

body > .pkp_structure > .pkp_structure_head {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
/* Hilangkan garis di bawah banner */
.pkp_structure_content {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.pkp_structure_content::before {
    display: none !important;
    border: none !important;
    content: none !important;
}

.pkp_structure_main::before,
.pkp_structure_main::after {
    display: none !important;
    border: none !important;
}
.sl-c {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    width: 155px !important;
    height: 60px !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(.4,0,.2,1) !important;
    transform: scale(0.88) !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}
.sl-c.sl-center {
    transform: scale(1.15) !important;
    opacity: 1 !important;
    border: 1.5px solid #E1DAC2!important;
    box-shadow: 0 6px 24px rgba(197, 157, 96, 0.2) !important;
}
.sl-c.sl-near {
    transform: scale(0.97) !important;
    opacity: 0.85 !important;
}
.sl-btn-idx {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #E1DAC2!important;
    border: none !important;
    cursor: pointer !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(21, 199, 116, 0.596) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s !important;
}
.sl-btn-idx:hover { background: #4B7469 !important; }
.sl-dot-idx {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #E1DAC2 !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.25s !important;
}
.sl-dot-idx.active {
    background: #E1DAC2!important;
    width: 18px !important;
    border-radius: 3px !important;
}

/* =========================================
   NAVBAR STYLE 5: FLOATING PILL
   ========================================= */

/* Wrapper navbar */
.pkp_navigation_primary_wrapper {
    display: flex !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    background: transparent !important;
}

.pkp_navigation_primary_row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    padding: 8px 16px !important;
}

/* Navbar pill container */
#navigationPrimary {
    background: #34534D !important;
    border-radius: 50px !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    box-shadow: 0 4px 20px rgba(52,83,77,0.25) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Item menu */
#navigationPrimary li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Link menu */
#navigationPrimary a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: block !important;
    border-bottom: none !important;
}

/* Hover */
#navigationPrimary a:hover,
#navigationPrimary a:focus {
    color: #E2DBC4 !important;
    background: rgba(255,255,255,0.15) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    border-radius: 30px !important;
}

/* Item aktif */
#navigationPrimary .current > a,
#navigationPrimary li.current > a {
    color: #E2DBC4 !important;
    background: rgba(255,255,255,0.15) !important;
}

/* Tombol Announcements - pill putih */
#navigationPrimary .pkp_navigation_primary_announcements a,
#navigationPrimary li:last-child a {
    background: #E2DBC4 !important;
    color: #34534D !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
}

#navigationPrimary li:last-child a:hover {
    background: #eaf0ef !important;
    color: #34534D !important;
}

/* Search button */
.pkp_navigation_search_wrapper {
    display: none !important;
}

/* User navigation */
.pkp_navigation_user_wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 16px !important;
}

/* Dropdown menu */
#navigationPrimary ul {
    background: #34534D !important;
    border-radius: 12px !important;
    padding: 6px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(52,83,77,0.2) !important;
    margin-top: 4px !important;
}

#navigationPrimary ul li a {
    border-radius: 8px !important;
    color: rgba(255,255,255,0.8) !important;
    padding: 7px 14px !important;
}

#navigationPrimary ul li a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* Mobile */
@media (max-width: 768px) {
    #navigationPrimary {
        border-radius: 12px !important;
        padding: 8px !important;
        gap: 4px !important;
    }

    #navigationPrimary a {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
}

/* Pill full width */
.pkp_navigation_primary_row {
    padding: 8px 16px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#navigationPrimary {
    flex-wrap: nowrap !important;
    padding: 5px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#navigationPrimary a {
    font-size: 11px !important;
    padding: 6px 16px !important;
    white-space: nowrap !important;
    flex: 1 !important;
    text-align: center !important;
}

/* Sembunyikan Logout saja saat tampil di publik */
#navigationPrimary li:has(a[href*="logout"]),
#navigationPrimary li:has(a[href*="Logout"]) {
    display: none !important;
}

/* =========================================
   NAVBAR FLOATING PILL - FINAL FIX
   ========================================= */

.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.pkp_navigation_primary_row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pill navbar - rata tengah & auto width */
#navigationPrimary {
    background: #34534D !important;
    border-radius: 50px !important;
    padding: 5px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    box-shadow: 0 4px 20px rgba(52,83,77,0.25) !important;
    width: auto !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Item li */
#navigationPrimary > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Link */
#navigationPrimary > li > a {
    color: rgba(255,255,255,0.75) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: block !important;
    border-bottom: none !important;
    white-space: nowrap !important;
}

/* Hover */
#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus {
    color: #E2DBC4 !important;
    background: rgba(255,255,255,0.15) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Announcements - pill putih */
#navigationPrimary > li:last-child > a {
    background: #E2DBC4 !important;
    color: #34534D !important;
    font-weight: 700 !important;
}

#navigationPrimary > li:last-child > a:hover {
    background: #E2DBC4 !important;
    color: #34534D !important;
}

/* Dropdown */
#navigationPrimary ul {
    background: #34534D !important;
    border-radius: 12px !important;
    padding: 6px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(52,83,77,0.2) !important;
    margin-top: 4px !important;
    min-width: 160px !important;
}

#navigationPrimary ul li a {
    border-radius: 8px !important;
    color: rgba(255,255,255,0.8) !important;
    padding: 7px 14px !important;
    font-size: 11px !important;
}

#navigationPrimary ul li a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #E2DBC4 !important;
}

/* Hilangkan celah/padding di sekitar navbar */
.pkp_navigation_primary_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
    #navigationPrimary {
        flex-wrap: wrap !important;
        border-radius: 16px !important;
        padding: 8px !important;
    }

    #navigationPrimary > li > a {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
}
/* Hilangkan celah antara banner dan navbar */
.pkp_structure_head {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.pkp_head_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.pkp_site_name_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Hilangkan celah di atas navbar */
.pkp_navigation_primary_wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pkp_navigation_primary_row {
    margin-top: 0 !important;
    padding-top: 0px !important;
    padding-bottom: 10px !important;
}

/* Hilangkan background putih di area celah */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row {
    background: transparent !important;
}

/* =========================================
   ARCHIVES - FINAL CORRECT v3
   ========================================= */

@keyframes archFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Grid 3 kolom */
.issues_archive {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Card */
.issues_archive > li {
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(52,83,77,0.08) !important;
    border: 1px solid #eef2f1 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    animation: archFadeIn 0.5s ease both !important;
}

.issues_archive > li:nth-child(1) { animation-delay: 0.05s !important; }
.issues_archive > li:nth-child(2) { animation-delay: 0.1s !important; }
.issues_archive > li:nth-child(3) { animation-delay: 0.15s !important; }
.issues_archive > li:nth-child(4) { animation-delay: 0.2s !important; }
.issues_archive > li:nth-child(5) { animation-delay: 0.25s !important; }

.issues_archive > li:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(52,83,77,0.15) !important;
    border-color: rgba(72,111,101,0.3) !important;
}

/* Cover - a.cover */
.issues_archive .obj_issue_summary a.cover {
    display: block !important;
    width: 100% !important;
    height: 160px !important;
    background: linear-gradient(135deg, #2a4a44, #486F65) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-decoration: none !important;
}

.issues_archive .obj_issue_summary a.cover img {
    height: 130px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)) !important;
    transition: transform 0.3s ease !important;
    max-width: 90% !important;
}

.issues_archive > li:hover a.cover img {
    transform: scale(1.06) rotate(-2deg) !important;
}

/* h2 - wrapper judul + series */
.issues_archive .obj_issue_summary h2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 14px 8px !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.issues_archive .obj_issue_summary h2::after {
    display: none !important;
}

/* Judul issue */
.issues_archive .obj_issue_summary h2 a.title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    display: block !important;
    order: 1 !important;
    transition: color 0.2s !important;
}

.issues_archive .obj_issue_summary h2 a.title:hover {
    color: #34534D !important;
}

/* Vol badge - div.series */
.issues_archive .obj_issue_summary h2 .series {
    display: inline-block !important;
    background: #eaf0ef !important;
    color: #34534D !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: none !important;
    width: fit-content !important;
    order: 2 !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
}

/* Description - bendera + teks */
.issues_archive .obj_issue_summary .description {
    padding: 0 14px 14px !important;
    margin: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Bendera kecil */
.issues_archive .obj_issue_summary .description img {
    height: 14px !important;
    width: auto !important;
    max-width: 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 2px !important;
    margin-bottom: 0 !important;
}

/* Teks deskripsi */
.issues_archive .obj_issue_summary .description p {
    font-size: 11px !important;
    color: #888 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Mobile */
@media (max-width: 768px) {
    .issues_archive {
        grid-template-columns: 1fr !important;
    }
    .issues_archive > li:hover {
        transform: translateY(-3px) !important;
    }
}


/* Judul artikel - warna hijau */
h1.page_title {
    color: #3F655E !important;
    border-left-color: #3F655E !important;
}

/* Judul artikel warna hijau */
.obj_article_summary h3.title a,
.obj_article_summary h4.title a,
.obj_article_summary .title a {
    color: #34534D !important;
}

.obj_article_summary h3.title a:hover,
.obj_article_summary h4.title a:hover,
.obj_article_summary .title a:hover {
    color: #486F65 !important;
}

/* =========================================================
   EDUCAZIONE: MODERN CARD UI (ANTI-CRASH & HIGH PRECISION)
   Skema Warna: Dark Green (#425850) & Cream (#E5DBC1)
   ========================================================= */

:root {
    --primary-dark: #425850;
    --accent-cream: #E5DBC1;
    --bg-card: #ffffff;
    --border-card: #eaeaea;
}

/* --- ANIMASI MUNCUL AMAN --- */
@-webkit-keyframes slideUpCard {
    0% { opacity: 0; -webkit-transform: translateY(40px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes slideUpCard {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.obj_article_details .page_title { animation: slideUpCard 0.8s ease-out 0.1s backwards !important; }
.obj_article_details .item.authors { animation: slideUpCard 0.8s ease-out 0.2s backwards !important; }
.obj_article_details .item.doi { animation: slideUpCard 0.8s ease-out 0.3s backwards !important; }
.obj_article_details .item.abstract { animation: slideUpCard 0.8s ease-out 0.4s backwards !important; }
.obj_article_details .item.keywords { animation: slideUpCard 0.8s ease-out 0.5s backwards !important; }
.obj_article_details .item.references { animation: slideUpCard 0.8s ease-out 0.6s backwards !important; }

/* 1. KARTU JUDUL (Minimalis Tipografi ala Scopus Q1) */
.obj_article_details .page_title {
    background-color: transparent !important;
    color: var(--primary-dark) !important;
    padding: 10px 0 25px 0 !important; 
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    margin-bottom: 35px !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    letter-spacing: -0.5px !important;
    /* Memecah properti animasi agar lolos dari filter OJS */
    -webkit-animation-name: titleReveal !important;
    -webkit-animation-duration: 1s !important;
    -webkit-animation-fill-mode: forwards !important;
    -webkit-animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    animation-name: titleReveal !important;
    animation-duration: 1s !important;
    animation-fill-mode: forwards !important;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Garis bawah dinamis (Modern Underline) */
.obj_article_details .page_title::after {
    content: "" !important; /* Wajib tanda kutip ganda di OJS */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 80px !important; /* Dibuat sedikit lebih panjang saat diam */
    height: 5px !important;
    background-color: var(--accent-cream) !important;
    border-radius: 3px !important;
    display: block !important; /* Memaksa elemen agar dirender */
    z-index: 10 !important;
    -webkit-transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Efek saat kursor diarahkan ke judul (Hover) */
.obj_article_details .page_title:hover::after {
    width: 250px !important; /* Memanjang dinamis saat di-hover */
    background-color: var(--primary-dark) !important;
}

/* Animasi masuk khusus untuk Judul */
@-webkit-keyframes titleReveal {
    0% { opacity: 0; -webkit-transform: translateY(20px) scale(0.98); }
    100% { opacity: 1; -webkit-transform: translateY(0) scale(1); }
}
@keyframes titleReveal {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2. FORMAT KARTU UMUM & EFEK HOVER ANIMASI */
.obj_article_details .item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 5px !important;
    margin-bottom: 15px !important; /* UBAH DI SINI: Sebelumnya 25px, diperkecil agar jarak antar kotak lebih rapat */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    display: block !important;
    clear: both !important; 
    box-sizing: border-box !important;
    transition: all 0.3s ease-in-out !important;
}

/* Animasi Melayang saat di-Hover */
.obj_article_details .item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 35px rgba(66, 88, 80, 0.12) !important;
    border-color: rgba(66, 88, 80, 0.2) !important;
}

/* 3. PEMISAHAN KOLOM KIRI (Main Entry) DAN KANAN (Entry Details) */

/* KOLOM KIRI (Penulis, Abstrak, dsb) */
.obj_article_details .main_entry .item {
    width: calc(100% - 30px) !important;
    margin-left: 30px !important; 
    padding: 20px 25px !important; /* UBAH DI SINI: Sebelumnya 35px 40px (sangat besar), sekarang jauh lebih ramping */
}

/* KOLOM KANAN (How to Cite, PDF, dll) */
.obj_article_details .entry_details .item {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 15px 20px !important; /* UBAH DI SINI: Sebelumnya 20px 25px, disesuaikan agar lebih ringkas */
}

/* 4. KARTU PENULIS */
.obj_article_details .item.authors {
    border-left: 8px solid var(--accent-cream) !important;
    padding-left: 17px !important; 
    /* Transisi khusus agar perubahan warna garis terasa halus dan elegan */
    transition: border-left-color 0.3s ease-in-out !important; 
}

/* EFEK HOVER: Warna garis tepi berubah menjadi hijau saat kursor diarahkan */
.obj_article_details .item.authors:hover {
    border-left-color: var(--primary-dark) !important;
}

.obj_article_details .item.authors ul.authors,
.obj_article_details .item.authors ul.authors li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    background: none !important;
}

.obj_article_details .item.authors ul.authors li {
    margin-bottom: 10px !important;
    border-bottom: 1px dashed var(--border-card) !important;
    padding-bottom: 10px !important;
}

.obj_article_details .item.authors ul.authors li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.obj_article_details .item.authors .name {
    font-weight: 800 !important; 
    color: var(--primary-dark) !important; 
    font-size: 1em !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.obj_article_details .item.authors .affiliation {
    font-size: 0.9em !important;
    color: #666 !important;
    display: block !important;
}

/* 5. KARTU DOI */
.obj_article_details .item.doi .label { display: none !important; }

.obj_article_details .item.doi .value a {
    display: block !important;
    background: rgba(255, 255, 255, 0.3) !important;
    color: var(--primary-dark) !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    word-break: break-all !important;
    border: 1px solid var(--accent-cream) !important;
    transition: 0.3s !important;
}

.obj_article_details .item.doi .value a::before {
    content: "DOI: ";
    color: #333;
}

.obj_article_details .item.doi .value a:hover {
    background: var(--accent-cream) !important;
}

/* 6. KARTU ABSTRAK */
.obj_article_details .item.abstract {
    border-top: 6px solid var(--primary-dark) !important;
}

.obj_article_details .item.abstract .label {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--primary-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 1.2em !important;
    margin-bottom: 20px !important;
    display: block !important;
    border-bottom: 2px solid var(--accent-cream) !important;
    padding-bottom: 10px !important;
    font-weight: 800 !important;
}

.obj_article_details .item.abstract p {
    line-height: 1.8 !important;
    color: #333 !important;
    text-align: justify !important; 
    font-size: 1.05rem !important;
}

/* 7. KARTU KEYWORDS */
.obj_article_details .item.keywords .label {
    display: block !important;
    color: var(--primary-dark) !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    border: none !important;
}

.obj_article_details .item.keywords .value {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.obj_article_details .item.keywords .value a,
.obj_article_details .item.keywords .value span {
    background: #fcfbf7 !important;
    border: 1px solid var(--accent-cream) !important;
    color: var(--primary-dark) !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin: 0 !important; 
    text-decoration: none !important;
    transition: 0.2s !important;
}

.obj_article_details .item.keywords .value a:hover,
.obj_article_details .item.keywords .value span:hover {
    background: var(--primary-dark) !important;
    color: white !important;
}

/* 8. KARTU REFERENCES (MEMAKSA RATA KANAN KIRI) */
.obj_article_details .item.references h2.label {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--primary-dark) !important;
    border-bottom: 2px solid var(--accent-cream) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.obj_article_details .item.references p,
.obj_article_details .item.references .value p,
.obj_article_details .item.references .value,
.obj_article_details .item.references * {
    text-align: justify !important;
    line-height: 1.8 !important;
    color: #333 !important;
}

/* 9. FIX KHUSUS KOLOM KANAN (How to Cite & Lisensi) */
.obj_article_details .item.citation .csl-entry,
.obj_article_details .item.copyright p {
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    text-align: left !important; /* Rata kiri agar mudah dibaca */
    word-break: break-word !important; /* Mencegah link panjang menabrak kotak */
}

/* Optimasi Layar Sentuh / Handphone */
@media (max-width: 768px) {
    .obj_article_details .page_title { 
        padding: 25px 20px !important; 
        font-size: 1.6rem !important; 
        margin-left: 0 !important;
        width: 100% !important;
    }
    .obj_article_details .main_entry .item { 
        padding: 25px 20px !important; 
        margin-left: 0 !important; 
        width: 100% !important;
    }
    .obj_article_details .item.authors { padding-left: 14px !important; } 
}
/* =========================================================
FIX ALIGNMENT: Sejajarkan Kolom Kiri (Author) & Kanan (Cover)
========================================================= */

/* 1. Pastikan container pembungkus sejajar persis di batas atas */
.obj_article_details .row {
display: flex !important;
align-items: flex-start !important;
margin-top: 0 !important;
}

/* 2. Hilangkan spasi atas bawaan OJS pada pembagian kolom */
.obj_article_details .main_entry,
.obj_article_details .entry_details {
margin-top: 0 !important;
padding-top: 0 !important;
}

/* 3. Paksa kartu PERTAMA di setiap kolom menempel lurus ke atas */
.obj_article_details .main_entry > .item:first-child,
.obj_article_details .entry_details > .item:first-child {
margin-top: 0 !important;
}

/* ====================================================
   SUBMISSIONS PAGE - V3 FINAL
   ✓ Tombol Make a Submission ukuran ideal (max 240px)
   ✓ Animasi pulse glow ring yang terlihat jelas
   ✓ Arrow bouncing terus-menerus
   ✓ Shimmer kilau saat hover
   ✓ Theme: Hijau (#4B7469) + Krem (#E1DAC2)
   ==================================================== */

/* ===========================================
   1. BOX NOTIFIKASI ATAS
   =========================================== */
.cmp_notification {
    position: relative !important;
    background: linear-gradient(135deg, 
        rgba(75, 116, 105, 0.06) 0%, 
        rgba(225, 218, 194, 0.15) 100%) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(75, 116, 105, 0.15) !important;
    border-left: none !important;
    border-radius: 14px !important;
    padding: 20px 24px 20px 65px !important;
    margin-bottom: 36px !important;
    overflow: hidden;
    transition: all 0.4s ease;
}

.cmp_notification::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 5px !important;
    background: linear-gradient(180deg, #4B7469, #E1DAC2, #4B7469) !important;
    background-size: 100% 200% !important;
    animation: notifBar 3s linear infinite !important;
}

.cmp_notification::after {
    content: "✎";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: #4B7469;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(75, 116, 105, 0.3);
    animation: notifIcon 2.5s ease-in-out infinite;
}

.cmp_notification:hover {
    background: linear-gradient(135deg, 
        rgba(75, 116, 105, 0.1) 0%, 
        rgba(225, 218, 194, 0.25) 100%) !important;
    transform: translateX(3px);
    box-shadow: 0 8px 24px rgba(75, 116, 105, 0.12);
}

.cmp_notification a {
    color: #4B7469 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    position: relative;
    font-size: 15px;
}

.cmp_notification a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #4B7469, #E1DAC2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.cmp_notification a:hover::after { transform: scaleX(1); }

@keyframes notifBar {
    0% { background-position: 0% 200%; }
    100% { background-position: 0% 0%; }
}

@keyframes notifIcon {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    50% { transform: translateY(-50%) rotate(-12deg) scale(1.05); }
}

/* ===========================================
   2. CHECKLIST HEADER & INTRO
   =========================================== */
.submission_checklist h2 {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #2c3e35 !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.submission_checklist h2::before {
    content: "";
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, #4B7469, #E1DAC2);
    border-radius: 2px;
    flex-shrink: 0;
}

.submission_checklist h2 .cmp_edit_link {
    font-size: 13px;
    font-weight: 400;
    color: #6b8378 !important;
    margin-left: auto;
}

.submission_checklist > :not(h2):not(ul) {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0 0 20px;
    padding-left: 16px;
}

/* ===========================================
   3. CHECKLIST CARDS
   =========================================== */
.submission_checklist ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 10px !important;
}

.submission_checklist ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 20px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(75, 116, 105, 0.12) !important;
    border-left: 4px solid #4B7469 !important;
    border-radius: 12px !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    color: #2c3e35 !important;
    line-height: 1.65 !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    text-indent: 0 !important;
    margin-left: 0 !important;
}

.submission_checklist ul li::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(225, 218, 194, 0.3), 
        transparent);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.submission_checklist ul li:hover::before { left: 100%; }

.submission_checklist ul li:hover {
    transform: translateX(6px);
    background: white !important;
    border-left-color: #E1DAC2 !important;
    border-left-width: 5px !important;
    box-shadow: 0 10px 25px rgba(75, 116, 105, 0.15);
}

/* ===========================================
   4. CHECKBOX (fa-check)
   =========================================== */
.submission_checklist ul li .fa,
.submission_checklist ul li .fa-check,
.submission_checklist ul li span[class*="fa-check"] {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    background: linear-gradient(135deg, #4B7469, #6b9080) !important;
    border-radius: 8px !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0 !important;
    box-shadow: 0 4px 12px rgba(75, 116, 105, 0.3);
    animation: checkFloat 3s ease-in-out infinite;
    position: relative !important;
    z-index: 1;
    float: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
}

.submission_checklist ul li .fa-check::before,
.submission_checklist ul li span[class*="fa-check"]::before {
    content: "✓" !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    color: white !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.submission_checklist ul li:nth-child(1) .fa-check { animation-delay: 0s; }
.submission_checklist ul li:nth-child(2) .fa-check { animation-delay: 0.3s; }
.submission_checklist ul li:nth-child(3) .fa-check { animation-delay: 0.6s; }
.submission_checklist ul li:nth-child(4) .fa-check { animation-delay: 0.9s; }
.submission_checklist ul li:nth-child(5) .fa-check { animation-delay: 1.2s; }
.submission_checklist ul li:nth-child(6) .fa-check { animation-delay: 1.5s; }

.submission_checklist ul li:hover .fa-check {
    animation-play-state: paused;
    background: linear-gradient(135deg, #6b9080, #4B7469) !important;
    transform: rotate(-8deg) scale(1.1);
    box-shadow: 0 6px 16px rgba(75, 116, 105, 0.4);
}

@keyframes checkFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}
/* =========================================================
   PERBAIKAN KHUSUS HP SAJA (≤ 768px)
   Desktop tidak terpengaruh sama sekali oleh blok di bawah ini
   ========================================================= */
@media (max-width: 768px) {

    /* Di HP: kolom MENUMPUK ke bawah agar tidak terpotong */
    .obj_article_details .row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Tiap kolom ambil lebar penuh di HP */
    .obj_article_details .main_entry,
    .obj_article_details .entry_details {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cover muncul di bawah dengan jarak rapi */
    .obj_article_details .entry_details {
        margin-top: 24px !important;
    }

    /* Gambar cover tidak meluap */
    .obj_article_details .entry_details img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Cegah scroll horizontal (sumber teks terpotong) di HP */
    html, body {
        overflow-x: hidden !important;
    }
}

/* ===========================================
   5. TOMBOL MAKE A SUBMISSION — SIZED + ANIMATED
   âš  FIX: ukuran proporsional + animasi terlihat
   =========================================== */
.pkp_block.block_make_submission {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 20px !important;
    margin: 0 !important;
    overflow: visible !important; /* PENTING agar pulse ring tidak terpotong */
}

.pkp_block.block_make_submission .content {
    text-align: center;
    padding: 0 !important;
    overflow: visible !important;
}

/* Tombol utama */
.block_make_submission_link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 240px !important;
    margin: 0 auto !important;
    padding: 6px 22px !important;
    background: linear-gradient(135deg, #4B7469 0%, #6b9080 100%) !important;
    color: white !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 
        0 6px 20px rgba(75, 116, 105, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    border: none !important;
    animation: pulseRing 2.5s ease-in-out infinite !important;
}

/* Shimmer kilau saat hover (di dalam tombol) */
.block_make_submission_link::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 1 !important;
}

/* Arrow icon yang bouncing terus */
.block_make_submission_link::after {
    content: "→" !important;
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-left: 2px !important;
    animation: arrowBounce 1.5s ease-in-out infinite !important;
    position: relative !important;
    z-index: 2 !important;
    color: white !important;
}

.block_make_submission_link:hover::before { 
    left: 100% !important; 
}

.block_make_submission_link:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow: 
        0 14px 30px rgba(75, 116, 105, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    animation-play-state: paused !important;
}

.block_make_submission_link:hover::after {
    animation: none !important;
    transform: translateX(6px) !important;
}

.block_make_submission_link:active {
    transform: translateY(-1px) scale(1.01) !important;
}

/* PULSE GLOW RING — animasi utama */
@keyframes pulseRing {
    0%, 100% { 
        box-shadow: 
            0 6px 20px rgba(75, 116, 105, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 0 0 rgba(75, 116, 105, 0.5);
    }
    50% { 
        box-shadow: 
            0 6px 20px rgba(75, 116, 105, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 0 16px rgba(75, 116, 105, 0);
    }
}

/* ARROW BOUNCING */
@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

/* ===========================================
   6. RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .cmp_notification {
        padding: 18px 18px 18px 58px !important;
        font-size: 14px;
    }
    
    .cmp_notification::after {
        left: 14px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .submission_checklist ul li {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }
    
    .submission_checklist ul li .fa-check {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
    
    .block_make_submission_link {
        padding: 11px 20px !important;
        font-size: 11px !important;
        max-width: 220px !important;
    }
}

/* ===========================================
   7. ACCESSIBILITY
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .cmp_notification,
    .cmp_notification::before,
    .cmp_notification::after,
    .submission_checklist ul li,
    .submission_checklist ul li .fa-check,
    .block_make_submission_link,
    .block_make_submission_link::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   EDUCAZIONE — CUSTOM PAGES STYLE
   Satu file untuk semua halaman (Focus & Scope, Section Policies, dst).
   Tempel di: Settings > Website > Appearance > Additional CSS
   ========================================================= */

/* Import font — WAJIB di paling atas Additional CSS */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600&display=swap');

/* ---- Variabel warna bersama (dipakai semua blok) ---- */
.fs-wrap, .sec-wrap, .pr-wrap{
  --green:#486F65;
  --green-deep:#3A5A52;
  --green-dark:#2F4A43;
  --cream:#E1DAC2;
  --cream-soft:#F3EFE4;
  --ink:#3a3a3a;
  --ink-soft:#5c5c5c;
  --line:rgba(72,111,101,.18);
}


/* =========================================================
   1) FOCUS & SCOPE
   ========================================================= */
.fs-wrap{
  max-width:880px;
  margin:0 auto;
  position:relative;
  font-family:'Outfit',system-ui,sans-serif;
  color:var(--ink);
  animation:fsRise .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fsRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.fs-head{position:relative;padding-left:26px;margin-bottom:38px;}
.fs-head::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--green),var(--cream));
}
.fs-kicker{
  font-size:12px !important;letter-spacing:.32em;text-transform:uppercase;
  color:var(--green) !important;font-weight:600;margin:0 0 8px !important;
}
.fs-head h2{
  font-family:'Fraunces',serif !important;font-weight:600 !important;
  font-size:clamp(30px,5vw,46px) !important;line-height:1.05 !important;
  margin:0 !important;color:var(--green-dark) !important;letter-spacing:-.01em;
}
.fs-head h2 em{font-style:italic;color:var(--green) !important;}

.fs-wrap .fs-lead{
  font-size:18px !important;line-height:1.75 !important;
  color:var(--ink) !important;margin:0 0 22px !important;
}
.fs-wrap .fs-lead.secondary{
  font-size:16px !important;color:var(--ink-soft) !important;line-height:1.8 !important;
}
.fs-wrap a.j-name{
  color:var(--green) !important;font-weight:600 !important;text-decoration:none !important;
  background-image:linear-gradient(var(--cream),var(--cream));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s ease, color .25s ease;padding-bottom:1px;
}
.fs-wrap a.j-name:hover{background-size:100% 100%;color:var(--green-dark) !important;}

.fs-aim{
  position:relative;margin:38px 0;padding:30px 34px;
  background:linear-gradient(180deg,var(--cream-soft),#fff);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.fs-aim::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green);}
.fs-aim h3{
  font-family:'Fraunces',serif !important;font-weight:600 !important;font-size:20px !important;
  color:var(--green-dark) !important;margin:0 0 10px !important;
  display:flex;align-items:center;gap:10px;
}
.fs-aim h3 svg{flex-shrink:0}
.fs-aim p{margin:0 !important;font-size:15.5px !important;line-height:1.8 !important;color:var(--ink-soft) !important;}

.fs-divider{display:flex;align-items:center;gap:18px;margin:44px 0 26px;}
.fs-divider span{
  font-size:12px !important;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--green) !important;white-space:nowrap;
}
.fs-divider::before,.fs-divider::after{content:"";height:1px;flex:1;background:var(--line);}

.fs-tags{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:12px !important;list-style:none !important;margin:0 !important;padding:0 !important;
}
.fs-tags li{
  position:relative;padding:15px 18px 15px 44px !important;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  font-size:14.5px !important;font-weight:500;color:var(--green-dark) !important;line-height:1.4;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor:default;list-style:none !important;
}
.fs-tags li::before{
  content:"";position:absolute;left:18px;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border:2px solid var(--green);border-radius:50%;transition:background .25s ease;
}
.fs-tags li:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 10px 24px rgba(72,111,101,.12);}
.fs-tags li:hover::before{background:var(--cream)}


/* =========================================================
   2) SECTION POLICIES
   ========================================================= */
.sec-wrap{
  max-width:880px;margin:0 auto;
  font-family:'Outfit',system-ui,sans-serif;
  animation:fsRise .8s cubic-bezier(.2,.7,.2,1) both;
}
.sec-head{position:relative;padding-left:24px;margin-bottom:24px;}
.sec-head::before{
  content:"";position:absolute;left:0;top:5px;bottom:5px;
  width:4px;border-radius:4px;background:linear-gradient(180deg,var(--green),var(--cream));
}
.sec-kicker{
  font-size:12px !important;letter-spacing:.3em;text-transform:uppercase;
  color:var(--green) !important;font-weight:600;margin:0 0 6px !important;
}
.sec-head h2{
  font-family:'Fraunces',serif !important;font-weight:600 !important;
  font-size:clamp(24px,4vw,34px) !important;color:var(--green-dark) !important;
  margin:0 !important;letter-spacing:-.01em;
}
.sec-flags{
  display:flex !important;flex-wrap:wrap;gap:12px !important;
  list-style:none !important;margin:0 !important;padding:0 !important;
}
.sec-flags li{
  display:flex;align-items:center;gap:11px;flex:1 1 200px;
  padding:14px 20px !important;
  background:linear-gradient(180deg,var(--cream-soft),#fff);
  border:1px solid var(--line);border-radius:12px;
  font-size:15px !important;font-weight:500;color:var(--green-dark) !important;
  list-style:none !important;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sec-flags li:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 8px 22px rgba(72,111,101,.12);}
.sec-ico{
  flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:rgba(72,111,101,.1);border-radius:50%;
}
.sec-flags li:hover .sec-ico{background:var(--cream)}


/* =========================================================
   3) PEER REVIEW PROCESS
   ========================================================= */
.pr-wrap{
  max-width:880px;margin:0 auto;
  font-family:'Outfit',system-ui,sans-serif;color:var(--ink);
  animation:fsRise .9s cubic-bezier(.2,.7,.2,1) both;
}
.pr-head{position:relative;padding-left:26px;margin-bottom:28px;}
.pr-head::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:4px;border-radius:4px;background:linear-gradient(180deg,var(--green),var(--cream));
}
.pr-kicker{
  font-size:12px !important;letter-spacing:.32em;text-transform:uppercase;
  color:var(--green) !important;font-weight:600;margin:0 0 8px !important;
}
.pr-head h2{
  font-family:'Fraunces',serif !important;font-weight:600 !important;
  font-size:clamp(28px,5vw,42px) !important;line-height:1.05 !important;
  margin:0 !important;color:var(--green-dark) !important;letter-spacing:-.01em;
}
.pr-head h2 em{font-style:italic;color:var(--green) !important;}

.pr-wrap .pr-lead{
  font-size:16.5px !important;line-height:1.8 !important;
  color:var(--ink-soft) !important;margin:0 0 26px !important;
}
.pr-wrap .pr-lead strong{color:var(--green-dark) !important;}

/* Badge ringkasan */
.pr-badges{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px;}
.pr-badge{
  flex:1 1 160px;text-align:center;padding:16px 14px;
  background:linear-gradient(180deg,var(--cream-soft),#fff);
  border:1px solid var(--line);border-radius:12px;
  font-size:13.5px !important;color:var(--ink-soft) !important;font-weight:500;
}
.pr-badge strong{
  display:block;font-family:'Fraunces',serif !important;
  font-size:22px !important;color:var(--green) !important;margin-bottom:2px;
}

/* Divider berlabel (pakai gaya yang sama) */
.pr-divider{display:flex;align-items:center;gap:18px;margin:36px 0 22px;}
.pr-divider span{
  font-size:12px !important;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--green) !important;white-space:nowrap;
}
.pr-divider::before,.pr-divider::after{content:"";height:1px;flex:1;background:var(--line);}

/* Timeline langkah */
.pr-steps{
  list-style:none !important;margin:0 !important;padding:0 0 0 8px !important;
  position:relative;
}
.pr-steps::before{
  content:"";position:absolute;left:25px;top:14px;bottom:14px;
  width:2px;background:var(--line);
}
.pr-steps li{
  position:relative;display:flex;gap:18px;align-items:flex-start;
  padding:0 0 22px 0 !important;list-style:none !important;
}
.pr-steps li:last-child{padding-bottom:0 !important;}
.pr-num{
  position:relative;z-index:1;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--green);color:#fff !important;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:600;font-size:16px;
  box-shadow:0 0 0 5px #fff;
}
.pr-body{padding-top:3px;}
.pr-body h4{
  font-family:'Fraunces',serif !important;font-weight:600 !important;
  font-size:17px !important;color:var(--green-dark) !important;margin:0 0 4px !important;
}
.pr-body p{margin:0 !important;font-size:14.5px !important;line-height:1.65 !important;color:var(--ink-soft) !important;}

/* Catatan akhir */
.pr-note{
  display:flex;gap:14px;align-items:flex-start;
  margin:30px 0 0;padding:20px 24px;
  background:rgba(72,111,101,.06);
  border-left:4px solid var(--green);border-radius:0 12px 12px 0;
}
.pr-note svg{flex-shrink:0;margin-top:2px;}
.pr-note p{margin:0 !important;font-size:14.5px !important;line-height:1.7 !important;color:var(--ink-soft) !important;}


/* =========================================================
   RESPONSIF (HP)
   ========================================================= */
@media(max-width:560px){
  .fs-wrap .fs-lead{font-size:16px !important}
  .fs-aim{padding:24px 22px}
  .sec-flags li{flex:1 1 100%}
  .pr-badge{flex:1 1 100%}
}


/* =========================================================
   ===== MOBILE (<= 991px) — Educazione — Opsi (g) =========

   Banner utuh -> BAR MENU -> konten.
   Hamburger diberi bar sendiri, jadi tidak mungkin
   bertabrakan dengan banner.

   Mekanisme buka-tutup memakai JS bawaan tema:
     klik .pkp_site_nav_toggle
       -> .pkp_site_nav_menu dapat class --isOpen
       -> tombol dapat class --transform (ikon jadi X)
   Tidak ada JavaScript tambahan.

   Aturan tema yang dilawan di layar sempit:
     .pkp_site_name_wrapper { height: 40px }
     .pkp_site_name         { position:absolute; overflow:hidden }
     .pkp_site_name img     { max-height: 30px }
     .pkp_site_nav_toggle   { position:absolute; top:0; left:0; width:40px }

   Desktop TIDAK tersentuh.
   ========================================================= */
@media (max-width: 991px) {

    /* ---------- 1. Header tanpa celah ---------- */
    .pkp_structure_head {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    .pkp_head_wrapper {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ---------- 2. Wrapper jadi kolom: banner lalu bar menu ---------- */
    .pkp_site_name_wrapper {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ---------- 3. Banner: lepas absolute + overflow:hidden ---------- */
    .pkp_site_name {
        order: 1 !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        line-height: 0 !important;
    }

    .pkp_site_name a.is_img,
    .pkp_site_name .is_img {
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        line-height: 0 !important;
        font-size: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_site_name img,
    .pkp_site_name .is_img img,
    .pkp_site_name a img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        vertical-align: top !important;
        border: none !important;
    }

    /* ---------- 4. BAR MENU (hamburger) ---------- */
    button.pkp_site_nav_toggle {
        order: 2 !important;
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #31645B !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transform: none !important;
        flex-shrink: 0 !important;
        vertical-align: top !important;
        transition: background 0.25s ease !important;
    }

    button.pkp_site_nav_toggle:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Merespons saat disentuh */
    button.pkp_site_nav_toggle:hover,
    button.pkp_site_nav_toggle:active,
    button.pkp_site_nav_toggle.pkp_site_nav_toggle--transform {
        background: #2A564E !important;
    }

    /* Tulisan MENU di kiri bar */
    button.pkp_site_nav_toggle::before {
        content: "MENU" !important;
        position: absolute !important;
        top: 50% !important;
        left: 14px !important;
        transform: translateY(-50%) !important;
        color: #E2DBC4 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 1.8px !important;
        line-height: 1 !important;
    }

    /* Ikon hamburger digeser ke kanan bar */
    button.pkp_site_nav_toggle > span {
        left: auto !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-bottom-color: #E2DBC4 !important;
        transition: border-color 0.25s ease !important;
    }

    button.pkp_site_nav_toggle > span:before,
    button.pkp_site_nav_toggle > span:after {
        background: #E2DBC4 !important;
        transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                    top 0.3s cubic-bezier(.4,0,.2,1) !important;
    }

    /* ---------- 5. PANEL: tertutup secara bawaan ---------- */
    nav.pkp_site_nav_menu {
        display: none !important;
    }

    /* Terbuka saat hamburger diketuk */
    nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-bottom: 2px solid #34534D !important;
        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu--isOpen .pkp_navigation_primary_row,
    .pkp_site_nav_menu--isOpen .pkp_navigation_primary_wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* ---------- 6. Daftar menu vertikal ---------- */
    .pkp_site_nav_menu--isOpen #navigationPrimary {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu--isOpen #navigationPrimary > li {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pkp_site_nav_menu--isOpen #navigationPrimary > li > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 16px !important;
        background: transparent !important;
        color: #55605C !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        white-space: normal !important;
        border: none !important;
        border-left: 3px solid transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu--isOpen #navigationPrimary > li.current > a,
    .pkp_site_nav_menu--isOpen #navigationPrimary > li > a:hover,
    .pkp_site_nav_menu--isOpen #navigationPrimary > li > a:focus {
        background: #f4f7f6 !important;
        color: #34534D !important;
        border-left-color: #34534D !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* ---------- 7. Submenu menjorok ke dalam ---------- */
    .pkp_site_nav_menu--isOpen #navigationPrimary > li > ul {
        display: block !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        list-style: none !important;
    }

    .pkp_site_nav_menu--isOpen #navigationPrimary > li > ul > li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .pkp_site_nav_menu--isOpen #navigationPrimary > li > ul > li > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 9px 16px 9px 34px !important;
        background: transparent !important;
        color: #8a918e !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        text-align: left !important;
        text-transform: none !important;
        white-space: normal !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu--isOpen #navigationPrimary > li > ul > li > a:hover {
        background: #f4f7f6 !important;
        color: #34534D !important;
    }

    /* ---------- 8. Login / Dashboard / Logout di dasar panel ---------- */
    .pkp_site_nav_menu--isOpen .pkp_navigation_user_wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-top: 1px solid #e6eae9 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu--isOpen #navigationUser {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        list-style: none !important;
    }

    .pkp_site_nav_menu--isOpen #navigationUser > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pkp_site_nav_menu--isOpen #navigationUser > li > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 16px !important;
        background: transparent !important;
        color: #55605C !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        text-align: left !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        border: none !important;
        border-left: 3px solid transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu--isOpen #navigationUser > li > a:hover {
        background: #f4f7f6 !important;
        color: #34534D !important;
        border-left-color: #34534D !important;
    }

    /* ---------- 9. Konten rapat, tanpa garis abu-abu ---------- */
    .pkp_structure_content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        clear: both !important;
    }

    .pkp_structure_content::before,
    .pkp_structure_content::after {
        display: none !important;
        content: none !important;
        border: none !important;
    }

    .pkp_structure_main {
        padding: 10px 12px !important;
        margin-top: 0 !important;
    }

    .pkp_structure_main:first-child:last-child {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .cmp_breadcrumbs,
    .cmp_breadcrumbs ol {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ---------- 10. Cegah geser horizontal ---------- */
    html, body {
        overflow-x: hidden !important;
    }
}

/* =========================================================
   MAKE A SUBMISSION — perbaikan di HP (<= 991px)
   Teks tidak lagi pecah dua baris, panah sudah benar,
   denyut dimatikan agar tidak menguras baterai.
   Desktop TIDAK tersentuh.
   ========================================================= */
@media (max-width: 991px) {

    .pkp_block.block_make_submission {
        padding: 4px 0 14px !important;
    }

    .block_make_submission_link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: auto !important;
        max-width: 92% !important;
        margin: 0 auto !important;
        padding: 11px 26px !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        border-radius: 50px !important;
        animation: none !important;
        box-shadow: 0 4px 14px rgba(75, 116, 105, 0.3) !important;
    }

    .block_make_submission_link::after {
        content: "\2192" !important;
        margin-left: 4px !important;
        font-size: 15px !important;
        animation: none !important;
        transform: none !important;
    }

    .block_make_submission_link:active {
        transform: scale(0.98) !important;
    }
}


/* =========================================================
   ===== FORM PAGES — Login / Register / Search / Contact ===

   Selector diverifikasi dari template OJS 3.3:
     userLogin.tpl     -> .page_login    .cmp_form.login
     userRegister.tpl  -> .page_register .cmp_form.register
     search.tpl        -> .page_search   .cmp_form
     contact.tpl       -> .page_contact  .contact_section

   Semua aturan DIBATASI ke keempat halaman itu lewat
   .page_login / .page_register / .page_search / .page_contact
   pada <body>. Halaman lain tidak tersentuh sama sekali.
   Berlaku di HP dan desktop.
   ========================================================= */

/* ---------- 1. Judul halaman ---------- */
.page_login .page_title,
.page_register .page_title,
.page_search .page_title,
.page_contact .page_title {
    background: transparent !important;
    backdrop-filter: none !important;
    color: #31645B !important;
    font-weight: 800 !important;
    padding: 0 0 12px 0 !important;
    margin: 0 0 22px 0 !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    position: relative !important;
}

.page_login .page_title::after,
.page_register .page_title::after,
.page_search .page_title::after,
.page_contact .page_title::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 56px !important;
    height: 4px !important;
    background: #E1DAC2 !important;
    border-radius: 3px !important;
}

/* ---------- 2. Kartu pembungkus form ---------- */
.page_login .cmp_form,
.page_register .cmp_form,
.page_search .cmp_form {
    background: #ffffff !important;
    padding: 26px 24px !important;
    border: 1px solid #e6eae9 !important;
    border-top: 4px solid #31645B !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(49, 100, 91, 0.07) !important;
    max-width: 460px !important;
    margin: 0 auto 24px !important;
    box-sizing: border-box !important;
}

.page_search .cmp_form {
    max-width: 100% !important;
}

/* ---------- 3. Label ---------- */
.page_login .cmp_form .label,
.page_register .cmp_form .label,
.page_search .cmp_form .label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #31645B !important;
    font-style: normal !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
}

.page_login .cmp_form .required,
.page_register .cmp_form .required {
    color: #C0533F !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

/* ---------- 4. Kotak isian ---------- */
.page_login .cmp_form input[type="text"],
.page_login .cmp_form input[type="password"],
.page_login .cmp_form input[type="email"],
.page_register .cmp_form input[type="text"],
.page_register .cmp_form input[type="password"],
.page_register .cmp_form input[type="email"],
.page_register .cmp_form select,
.page_search .cmp_form input[type="text"],
.page_search .cmp_form input[type="search"],
.page_search .cmp_form select {
    display: block !important;
    width: 100% !important;
    padding: 11px 14px !important;
    background: #fbfcfc !important;
    color: #2f3a37 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border: 1px solid #dfe4e2 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}

.page_login .cmp_form input:focus,
.page_register .cmp_form input:focus,
.page_register .cmp_form select:focus,
.page_search .cmp_form input:focus,
.page_search .cmp_form select:focus {
    outline: none !important;
    background: #ffffff !important;
    border-color: #31645B !important;
    box-shadow: 0 0 0 3px rgba(49, 100, 91, 0.12) !important;
}

.page_login .cmp_form .fields > div,
.page_register .cmp_form .fields > div,
.page_search .cmp_form .fields > div {
    margin-bottom: 16px !important;
}

/* ---------- 5. Checkbox ---------- */
.page_login .cmp_form .checkbox input[type="checkbox"],
.page_register .cmp_form .optin input[type="checkbox"],
.page_register .cmp_form input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    accent-color: #31645B !important;
    vertical-align: -2px !important;
}

.page_login .cmp_form .checkbox label,
.page_register .cmp_form .optin label {
    font-size: 13px !important;
    color: #55605C !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ---------- 6. Tombol utama ---------- */
.page_login .cmp_form .buttons button,
.page_login .cmp_form .buttons input[type="submit"],
.page_register .cmp_form .buttons button,
.page_register .cmp_form .buttons input[type="submit"],
.page_search .cmp_form .buttons button,
.page_search .cmp_form .buttons input[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    background: #31645B !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    box-shadow: 0 3px 10px rgba(49, 100, 91, 0.22) !important;
    -webkit-appearance: none !important;
}

.page_login .cmp_form .buttons button:hover,
.page_register .cmp_form .buttons button:hover,
.page_search .cmp_form .buttons button:hover {
    background: #3F7A6E !important;
}

.page_login .cmp_form .buttons button:active,
.page_register .cmp_form .buttons button:active,
.page_search .cmp_form .buttons button:active {
    transform: scale(0.99) !important;
}

.page_login .cmp_form .buttons,
.page_register .cmp_form .buttons,
.page_search .cmp_form .buttons {
    display: block !important;
    margin-top: 20px !important;
    text-align: center !important;
}

/* ---------- 7. Tautan sekunder ---------- */
.page_login .cmp_form .buttons .register,
.page_register .cmp_form .buttons .login,
.page_login .cmp_form a[href*="lostPassword"] {
    display: inline-block !important;
    margin-top: 14px !important;
    color: #31645B !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #E1DAC2 !important;
    padding-bottom: 1px !important;
    transition: border-color 0.2s ease !important;
}

.page_login .cmp_form .buttons .register:hover,
.page_register .cmp_form .buttons .login:hover,
.page_login .cmp_form a[href*="lostPassword"]:hover {
    border-bottom-color: #31645B !important;
}

.page_login .cmp_form .password a {
    display: inline-block !important;
    margin-top: 7px !important;
    color: #7d8784 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #e6eae9 !important;
}

.page_login .cmp_form .password a:hover {
    color: #31645B !important;
    border-bottom-color: #31645B !important;
}

/* ---------- 8. Halaman Contact ---------- */
.page_contact .contact_section {
    background: #ffffff !important;
    padding: 20px 22px !important;
    margin-bottom: 16px !important;
    border: 1px solid #e6eae9 !important;
    border-left: 4px solid #31645B !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: 0 3px 14px rgba(49, 100, 91, 0.06) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.page_contact .contact_section:hover {
    transform: translateX(3px) !important;
    box-shadow: 0 8px 22px rgba(49, 100, 91, 0.11) !important;
}

.page_contact .contact_section h2,
.page_contact .contact_section .label {
    color: #31645B !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.page_contact .contact_section .name {
    display: block !important;
    color: #2f3a37 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
}

.page_contact .contact_section .affiliation,
.page_contact .contact_section .address,
.page_contact .contact_section .phone {
    display: block !important;
    color: #6b7370 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.page_contact .contact_section .email a,
.page_contact .contact_section a[href^="mailto"] {
    display: inline-block !important;
    margin-top: 6px !important;
    padding: 5px 13px !important;
    background: #eef2f1 !important;
    color: #31645B !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid #dfe4e2 !important;
    border-radius: 20px !important;
    word-break: break-all !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.page_contact .contact_section .email a:hover,
.page_contact .contact_section a[href^="mailto"]:hover {
    background: #31645B !important;
    color: #ffffff !important;
    border-color: #31645B !important;
}

/* ---------- 9. Hasil pencarian ---------- */
.page_search .search_advanced {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eef2f1 !important;
}

.page_search .search_results {
    margin-top: 24px !important;
}

/* ---------- 10. Penyesuaian layar sempit ---------- */
@media (max-width: 991px) {

    .page_login .cmp_form,
    .page_register .cmp_form,
    .page_search .cmp_form {
        padding: 20px 16px !important;
        border-radius: 10px !important;
    }

    .page_login .page_title,
    .page_register .page_title,
    .page_search .page_title,
    .page_contact .page_title {
        font-size: 22px !important;
        margin-bottom: 18px !important;
    }

    /* Font 16px mencegah iOS otomatis zoom saat mengetik */
    .page_login .cmp_form input,
    .page_register .cmp_form input,
    .page_register .cmp_form select,
    .page_search .cmp_form input,
    .page_search .cmp_form select {
        font-size: 16px !important;
    }

    .page_contact .contact_section {
        padding: 16px 16px !important;
    }
}


/* =========================================================
   ===== DESKTOP FIX (>= 992px) — hanya 2 hal ==============
   1. Menu Login yang mengambang di pojok kanan atas
   2. Ruang kosong berlebih di form Login & Register
   Navbar utama TIDAK disentuh.
   ========================================================= */
@media (min-width: 992px) {

    /* ---------- 1. Login jadi pill kecil ---------- */
    .pkp_navigation_user_wrapper {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 10px 24px 0 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    #navigationUser {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #navigationUser > li {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #navigationUser > li > a {
        display: block !important;
        margin: 0 !important;
        padding: 3px 10px !important;
        background: #E3DAC1 !important;
        color: #31645B !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        border: 1px solid #F3F0C0 !important;
        border-radius: 20px !important;
        box-shadow: none !important;
        transition: background 0.2s ease, color 0.2s ease !important;
    }

    #navigationUser > li > a:hover {
        background: #31645B !important;
        color: #ffffff !important;
        border-color: #31645B !important;
    }

    /* ---------- 2. Form lebih padat, ruang kosong dipangkas ---------- */
    .page_login .cmp_form {
        max-width: 420px !important;
        margin: 0 0 28px 0 !important;
        padding: 28px 30px !important;
    }

    .page_register .cmp_form {
        max-width: 620px !important;
        margin: 0 0 28px 0 !important;
        padding: 28px 32px !important;
    }

    /* Jarak antar isian dirapatkan */
    .page_login .cmp_form .fields > div,
    .page_register .cmp_form .fields > div {
        margin-bottom: 14px !important;
    }

    .page_register .cmp_form .fields > div:last-child {
        margin-bottom: 0 !important;
    }

    /* Register: dua kolom untuk isian pendek */
    .page_register .cmp_form .fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 20px !important;
    }

    /* Isian panjang tetap selebar penuh */
    .page_register .cmp_form .fields > .email,
    .page_register .cmp_form .fields > .username,
    .page_register .cmp_form .fields > .password,
    .page_register .cmp_form .fields > .password2,
    .page_register .cmp_form .fields > .country,
    .page_register .cmp_form .fields > .affiliation,
    .page_register .cmp_form .fields > .consent,
    .page_register .cmp_form .fields > .optin,
    .page_register .cmp_form .fields > .reviewer,
    .page_register .cmp_form .fields > .recaptcha_wrapper,
    .page_register .cmp_form .fields > h2,
    .page_register .cmp_form .fields > h3,
    .page_register .cmp_form .fields > p {
        grid-column: 1 / -1 !important;
    }

    /* Sub-judul di dalam form */
    .page_login .cmp_form h2,
    .page_register .cmp_form h2 {
        margin: 4px 0 16px !important;
        padding-bottom: 8px !important;
        color: #31645B !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid #eef2f1 !important;
    }

    .page_register .cmp_form h2 {
        margin-top: 18px !important;
    }

    .page_register .cmp_form .fields > h2:first-child {
        margin-top: 0 !important;
    }

    /* Tombol tidak perlu selebar penuh di desktop */
    .page_login .cmp_form .buttons,
    .page_register .cmp_form .buttons {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin-top: 22px !important;
        padding-top: 18px !important;
        border-top: 1px solid #eef2f1 !important;
        text-align: left !important;
    }

    .page_login .cmp_form .buttons button,
    .page_register .cmp_form .buttons button {
        width: auto !important;
        min-width: 150px !important;
        padding: 11px 30px !important;
    }

    .page_login .cmp_form .buttons .register,
    .page_register .cmp_form .buttons .login {
        margin-top: 0 !important;
    }
}


/* =========================================================
   ===== DESKTOP v2 (>= 992px) =============================
   1. Pill Login pindah ke baris navbar (tidak lagi
      menimpa ISSN di banner)
   2. Form Login jadi dua kolom, ruang kanan tidak kosong

   Ditumpuk di bawah blok DESKTOP FIX sebelumnya, jadi
   aturan di sini yang menang. Banner & navbar pill utuh.
   ========================================================= */
@media (min-width: 992px) {

    /* ---------- 1. Login sejajar navbar, ujung kanan ---------- */
    nav.pkp_site_nav_menu {
        position: relative !important;
    }

    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 50% !important;
        right: 24px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 5 !important;
    }

    /* ---------- 2. Form Login dua kolom ---------- */
    .page_login .cmp_form {
        max-width: 100% !important;
        margin: 0 0 28px 0 !important;
        padding: 30px 34px !important;
    }

    .page_login .cmp_form .fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .page_login .cmp_form .fields > .username {
        grid-column: 1 !important;
        margin-bottom: 0 !important;
    }

    .page_login .cmp_form .fields > .password {
        grid-column: 2 !important;
        margin-bottom: 0 !important;
    }

    /* Baris penuh */
    .page_login .cmp_form .fields > .remember,
    .page_login .cmp_form .fields > .checkbox,
    .page_login .cmp_form .pkp_form_error {
        grid-column: 1 / -1 !important;
        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }

    /* "Forgot your password?" menempel di bawah Password */
    .page_login .cmp_form .password a {
        margin-top: 6px !important;
        font-size: 12px !important;
    }

    /* ---------- 3. Baris penutup ---------- */
    .page_login .cmp_form .buttons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
        margin-top: 20px !important;
        padding-top: 18px !important;
        border-top: 1px solid #eef2f1 !important;
    }

    .page_login .cmp_form .buttons button {
        width: auto !important;
        min-width: 170px !important;
        padding: 12px 32px !important;
    }

    .page_login .cmp_form .buttons .register {
        margin-top: 0 !important;
    }
}


/* =========================================================
   ===== DESKTOP v3 (>= 992px) =============================
   1. Pill Login -> pojok KIRI ATAS banner (opsi a)
   2. Halaman Register dirapikan

   Catatan: judul seksi Register memakai <legend>,
   bukan <h2>. Itu sebabnya aturan h2 sebelumnya tidak
   berpengaruh.
   ========================================================= */
@media (min-width: 992px) {

    /* ---------- 1. Login di kiri atas banner ---------- */

    /* Batalkan anchor ke <nav> dari blok v2 */
    nav.pkp_site_nav_menu {
        position: static !important;
    }

    .pkp_head_wrapper {
        position: relative !important;
    }

    .pkp_navigation_user_wrapper {
        position: absolute !important;

        /* KANAN ATAS banner, tapi digeser TURUN supaya tidak
           menimpa P-ISSN / E-ISSN yang ada di ketinggian ~14-40px.
           Nilai 56px menaruhnya di bawah baris ISSN. */
        top: 13px !important;
        bottom: auto !important;

        /* Diikat ke TEPI KANAN banner, bukan ke lebar layar.
           Banner = gambar max 1651px, rata tengah.
           Tepi kanannya = (100% - lebar banner) / 2.
           Jadi posisinya konsisten di semua ukuran layar.
           Nilai 18px = jarak masuk dari tepi kanan banner. */
        right: calc((100% - min(100%, 1651px)) / 2 + 25px) !important;
        left: auto !important;

        transform: none !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 20 !important;
    }

    /* ---------- 2. REGISTER ---------- */

    .page_register .cmp_form {
        max-width: 100% !important;
        margin: 0 0 28px 0 !important;
        padding: 26px 30px !important;
    }

    /* Judul seksi (Profile / Login) */
    .page_register .cmp_form fieldset {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .page_register .cmp_form legend {
        display: block !important;
        width: 100% !important;
        margin: 18px 0 14px !important;
        padding: 0 0 8px 0 !important;
        color: #31645B !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid #eef2f1 !important;
    }

    .page_register .cmp_form fieldset:first-of-type legend {
        margin-top: 0 !important;
    }

    /* Grid dua kolom */
    .page_register .cmp_form .fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 26px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Bawaan: selebar penuh */
    .page_register .cmp_form .fields > div {
        grid-column: 1 / -1 !important;
        margin-bottom: 14px !important;
    }

    /* Isian pendek: setengah kolom */
    .page_register .cmp_form .fields > .given_name,
    .page_register .cmp_form .fields > .family_name,
    .page_register .cmp_form .fields > .country,
    .page_register .cmp_form .fields > .email,
    .page_register .cmp_form .fields > .username,
    .page_register .cmp_form .fields > .password,
    .page_register .cmp_form .fields > .password2 {
        grid-column: span 1 !important;
    }

    /* Persetujuan & reCAPTCHA tetap penuh */
    .page_register .cmp_form .fields > .optin,
    .page_register .cmp_form .fields > .recaptcha,
    .page_register .cmp_form .fields > .reviewer_interests,
    .page_register .cmp_form .fields > .reviewer_nocontext_interests,
    .page_register .cmp_form .fields > .affiliation {
        grid-column: 1 / -1 !important;
    }

    /* Kotak persetujuan diberi latar lembut */
    .page_register .cmp_form fieldset.consent .fields > .optin {
        padding: 12px 14px !important;
        margin-bottom: 10px !important;
        background: #f7faf9 !important;
        border: 1px solid #eef2f1 !important;
        border-radius: 8px !important;
    }

    .page_register .cmp_form .optin label {
        display: block !important;
        line-height: 1.6 !important;
    }

    /* ---------- 3. Baris penutup Register ---------- */
    .page_register .cmp_form .buttons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
        margin-top: 18px !important;
        padding-top: 18px !important;
        border-top: 1px solid #eef2f1 !important;
    }

    .page_register .cmp_form .buttons button {
        width: auto !important;
        min-width: 170px !important;
        padding: 12px 32px !important;
    }

    .page_register .cmp_form .buttons .login {
        margin-top: 0 !important;
    }
}

/* ---------- 4. Register di HP: satu kolom ---------- */
@media (max-width: 991px) {

    .page_register .cmp_form fieldset {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .page_register .cmp_form legend {
        display: block !important;
        width: 100% !important;
        margin: 16px 0 12px !important;
        padding: 0 0 7px 0 !important;
        color: #31645B !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: 0.7px !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid #eef2f1 !important;
    }

    .page_register .cmp_form fieldset:first-of-type legend {
        margin-top: 0 !important;
    }

    .page_register .cmp_form .fields {
        display: block !important;
    }

    .page_register .cmp_form .fields > div {
        margin-bottom: 14px !important;
    }

    .page_register .cmp_form fieldset.consent .fields > .optin {
        padding: 12px 13px !important;
        background: #f7faf9 !important;
        border: 1px solid #eef2f1 !important;
        border-radius: 8px !important;
    }
}


/* =========================================================
   ===== REVIEWERS — TABEL PADAT (Opsi B) ==================
   Dipakai bersama HTML baru berkelas .rv-table
   Desktop: 3 kolom (Name / Scopus ID / Affiliation)
   HP     : menumpuk jadi kartu, kepala kolom disembunyikan

   Semua selector diawali .rv- sehingga TIDAK mungkin
   mengenai bagian lain dari situs.
   ========================================================= */

.rv-table {
    width: 100%;
    margin: 0 0 28px 0;
    background: #ffffff;
    border: 1px solid #e6eae9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(49, 100, 91, 0.06);
    box-sizing: border-box;
}

/* ---------- Kepala kolom ---------- */
.rv-head {
    display: grid;
    grid-template-columns: 1.15fr 0.65fr 1.4fr;
    gap: 12px;
    padding: 10px 16px;
    background: #31645B;
}

.rv-head .rv-c {
    color: #E2DBC4;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* ---------- Baris ---------- */
.rv-row {
    display: grid;
    grid-template-columns: 1.15fr 0.65fr 1.4fr;
    gap: 12px;
    align-items: baseline;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f4f3;
    transition: background 0.18s ease;
}

.rv-row:nth-child(even) {
    background: #fbfcfc;
}

.rv-row:last-child {
    border-bottom: none;
}

.rv-row:hover {
    background: #f4f7f6;
}

.rv-c {
    min-width: 0;
    word-wrap: break-word;
}

/* ---------- Nama ---------- */
.rv-name {
    color: #31645B;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease;
}

a.rv-name:hover {
    border-bottom-color: #31645B;
}

/* ---------- Scopus ID ---------- */
.rv-id {
    color: #55605C;
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

a.rv-id:hover {
    color: #31645B;
    border-bottom-color: #E1DAC2;
}

/* ---------- Afiliasi ---------- */
.rv-c-aff {
    color: #55605C;
    font-size: 12px;
    line-height: 1.5;
}

/* =========================================================
   HP: kolom menumpuk jadi kartu
   ========================================================= */
@media (max-width: 767px) {

    .rv-head {
        display: none;
    }

    .rv-row {
        display: block;
        padding: 12px 14px;
    }

    .rv-c {
        display: block;
    }

    .rv-c-name {
        margin-bottom: 3px;
    }

    .rv-name {
        font-size: 13px;
    }

    /* Afiliasi naik ke atas, Scopus ID turun jadi pill */
    .rv-c-aff {
        order: 2;
        margin-bottom: 6px;
        font-size: 11px;
        color: #55605C;
    }

    .rv-c-id {
        margin-top: 6px;
    }

    .rv-id {
        display: inline-block;
        padding: 3px 10px;
        background: #eef2f1;
        color: #31645B;
        font-size: 10px;
        font-weight: 700;
        border: 1px solid #dfe4e2;
        border-radius: 12px;
    }

    a.rv-id:hover {
        background: #31645B;
        color: #ffffff;
        border-color: #31645B;
    }
}

/* ---------- Tablet: 2 kolom ---------- */
@media (min-width: 768px) and (max-width: 991px) {

    .rv-head,
    .rv-row {
        grid-template-columns: 1fr 1.2fr;
    }

    .rv-head .rv-c:nth-child(2) {
        display: none;
    }

    .rv-c-id {
        grid-column: 1;
        grid-row: 2;
        margin-top: 3px;
    }

    .rv-c-aff {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}


/* =========================================================
   ===== ARCHIVES — Opsi (E) ===============================
   Terbitan TERKINI disorot besar (kartu mendatar),
   terbitan LAMA dijejer kecil di bawahnya.

   Struktur OJS 3.3 (diverifikasi dari template):
     ul.issues_archive > li > div.obj_issue_summary
       a.cover > img
       h2 > a.title + div.series
       div.description

   Terbitan disusun terbaru dulu, jadi li:first-child
   selalu terbitan terkini. Murni CSS, HTML tidak disentuh.

   Menimpa blok "ARCHIVES - FINAL CORRECT v3" di atasnya.
   ========================================================= */

/* ---------- Wadah ---------- */
.issues_archive {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* =========================================================
   TERBITAN TERKINI — kartu lebar mendatar
   ========================================================= */
.issues_archive > li:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
    animation: none !important;
}

.issues_archive > li:first-child .obj_issue_summary {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 190px !important;
}

/* Sampul di kiri */
.issues_archive > li:first-child .obj_issue_summary a.cover {
    flex: 0 0 210px !important;
    width: 210px !important;
    height: auto !important;
    border-bottom: none !important;
    border-right: 1px solid #eef2f1 !important;
}

.issues_archive > li:first-child .obj_issue_summary a.cover img {
    height: 160px !important;
}

/* Teks di kanan */
.issues_archive > li:first-child .obj_issue_summary h2 {
    padding: 22px 26px 4px !important;
    gap: 8px !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 a.title {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #31645B !important;
}

/* Badge CURRENT ISSUE */
.issues_archive > li:first-child .obj_issue_summary h2 .series {
    order: 0 !important;
    background: #E1DAC2 !important;
    color: #31645B !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
}

.issues_archive > li:first-child .obj_issue_summary .description {
    padding: 0 26px 22px !important;
    font-size: 12.5px !important;
}

.issues_archive > li:first-child .obj_issue_summary .description p {
    -webkit-line-clamp: 3 !important;
    font-size: 12.5px !important;
}

/* Garis aksen kiri */
.issues_archive > li:first-child .obj_issue_summary {
    border-left: 5px solid #31645B !important;
}

.issues_archive > li:first-child:hover {
    transform: translateY(-3px) !important;
}

/* =========================================================
   TERBITAN LAMA — kartu kecil, empat per baris
   ========================================================= */
.issues_archive > li:not(:first-child) {
    border-radius: 10px !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary a.cover {
    height: 120px !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary a.cover img {
    height: 96px !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary h2 {
    padding: 11px 12px 6px !important;
    gap: 5px !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary h2 a.title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #31645B !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary h2 .series {
    font-size: 8.5px !important;
    padding: 2px 8px !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary .description {
    padding: 0 12px 12px !important;
    gap: 4px !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary .description p {
    font-size: 10.5px !important;
    -webkit-line-clamp: 2 !important;
}

.issues_archive > li:not(:first-child) .obj_issue_summary .description img {
    height: 12px !important;
    max-width: 17px !important;
}

/* =========================================================
   TABLET — dua kartu kecil per baris
   ========================================================= */
@media (max-width: 991px) {

    .issues_archive {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        flex: 0 0 160px !important;
        width: 160px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover img {
        height: 130px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 {
        padding: 18px 20px 4px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 a.title {
        font-size: 18px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary .description {
        padding: 0 20px 18px !important;
    }
}

/* =========================================================
   HP — semuanya satu kolom, terkini menumpuk
   ========================================================= */
@media (max-width: 640px) {

    .issues_archive {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary {
        flex-direction: column !important;
        min-height: 0 !important;
        border-left: none !important;
        border-top: 4px solid #31645B !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        flex: none !important;
        width: 100% !important;
        height: 130px !important;
        border-right: none !important;
        border-bottom: 1px solid #eef2f1 !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover img {
        height: 106px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 {
        padding: 14px 15px 5px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 a.title {
        font-size: 17px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary .description {
        padding: 0 15px 14px !important;
        font-size: 11.5px !important;
    }

    .issues_archive > li:not(:first-child) .obj_issue_summary a.cover {
        height: 130px !important;
    }

    .issues_archive > li:not(:first-child) .obj_issue_summary a.cover img {
        height: 106px !important;
    }

    .issues_archive > li:hover {
        transform: none !important;
    }
}


/* =========================================================
   ===== ARCHIVES — Opsi (E): terbitan terkini disorot =====

   Struktur OJS 3.3 (issue_summary.tpl):
     ul.issues_archive
       li  -> div.obj_issue_summary
                a.cover > img
                h2 > a.title + div.series
                div.description

   li PERTAMA = terbitan terbaru -> kartu besar melebar
   li BERIKUTNYA = arsip lama    -> kartu kecil 4 per baris

   Semua selector diawali .issues_archive sehingga tidak
   mungkin mengenai bagian lain situs.
   ========================================================= */

.issues_archive {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   TERBITAN TERKINI — kartu besar melebar
   ========================================================= */

.issues_archive > li:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 34px !important;
    border-radius: 14px !important;
    border: 1px solid #e6eae9 !important;
    box-shadow: 0 4px 22px rgba(49, 100, 91, 0.09) !important;
    animation: none !important;
}

.issues_archive > li:first-child:hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(49, 100, 91, 0.14) !important;
    border-color: rgba(49, 100, 91, 0.28) !important;
}

.issues_archive > li:first-child .obj_issue_summary {
    display: grid !important;
    grid-template-columns: 190px 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
}

/* Sampul di kiri */
.issues_archive > li:first-child .obj_issue_summary a.cover {
    height: 100% !important;
    min-height: 190px !important;
    border-bottom: none !important;
    border-right: 1px solid #eef2f1 !important;
    border-radius: 0 !important;
}

.issues_archive > li:first-child .obj_issue_summary a.cover img {
    height: 150px !important;
}

.issues_archive > li:first-child:hover a.cover img {
    transform: scale(1.04) !important;
}

/* Blok teks di kanan */
.issues_archive > li:first-child .obj_issue_summary h2 {
    padding: 22px 26px 0 !important;
    gap: 3px !important;
}

/* Badge CURRENT ISSUE */
.issues_archive > li:first-child .obj_issue_summary h2::before {
    content: "CURRENT ISSUE" !important;
    display: inline-block !important;
    width: fit-content !important;
    order: 0 !important;
    margin-bottom: 8px !important;
    padding: 3px 12px !important;
    background: #E1DAC2 !important;
    color: #31645B !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    border-radius: 12px !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 a.title {
    order: 1 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #31645B !important;
}

/* Panah ajakan, tetap bisa diklik karena di dalam <a> */
.issues_archive > li:first-child .obj_issue_summary h2 a.title::after {
    content: " \2192" !important;
    display: inline !important;
    margin-left: 6px !important;
    color: #8FA9A1 !important;
    transition: margin-left 0.2s ease !important;
}

.issues_archive > li:first-child:hover .obj_issue_summary h2 a.title::after {
    margin-left: 12px !important;
    color: #31645B !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 .series {
    order: 2 !important;
    background: transparent !important;
    color: #8a918e !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.7px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.issues_archive > li:first-child .obj_issue_summary .description {
    padding: 8px 26px 22px !important;
    gap: 7px !important;
}

.issues_archive > li:first-child .obj_issue_summary .description p {
    -webkit-line-clamp: 3 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

.issues_archive > li:first-child .obj_issue_summary .description img {
    height: 16px !important;
    max-width: 24px !important;
}

/* =========================================================
   ARSIP LAMA — kartu kecil
   ========================================================= */

.issues_archive > li:nth-child(n+2) {
    border-radius: 10px !important;
}

/* Label BACK ISSUES di atas baris kedua */
.issues_archive > li:nth-child(2) {
    position: relative !important;
}

.issues_archive > li:nth-child(2)::before {
    content: "BACK ISSUES" !important;
    position: absolute !important;
    top: -23px !important;
    left: 0 !important;
    color: #31645B !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
    white-space: nowrap !important;
    z-index: 2 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    height: 112px !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover img {
    height: 90px !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
    padding: 11px 12px 6px !important;
    gap: 3px !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 a.title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #31645B !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 .series {
    background: transparent !important;
    color: #8a918e !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    letter-spacing: 0.5px !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    padding: 0 12px 11px !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p {
    -webkit-line-clamp: 2 !important;
    font-size: 10px !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    height: 12px !important;
    max-width: 17px !important;
}

/* =========================================================
   Layar sempit
   ========================================================= */

/* Tablet: arsip lama 2 per baris */
@media (min-width: 768px) and (max-width: 991px) {

    .issues_archive {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .issues_archive > li:first-child .obj_issue_summary {
        grid-template-columns: 150px 1fr !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 a.title {
        font-size: 18px !important;
    }
}

/* HP: semua menumpuk satu kolom */
@media (max-width: 767px) {

    .issues_archive {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .issues_archive > li:first-child {
        margin-bottom: 30px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary {
        display: flex !important;
        flex-direction: column !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        min-height: 0 !important;
        height: 140px !important;
        border-right: none !important;
        border-bottom: 1px solid #eef2f1 !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover img {
        height: 118px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 {
        padding: 14px 16px 0 !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 a.title {
        font-size: 17px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary .description {
        padding: 7px 16px 16px !important;
    }

    .issues_archive > li:nth-child(2)::before {
        top: -21px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
        height: 130px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover img {
        height: 108px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary h2 a.title {
        font-size: 13px !important;
    }
}


/* =========================================================
   ===== ARCHIVES v2 — perbaikan =========================

   Temuan dari HTML asli:
   Terbitan yang BELUM diberi judul & deskripsi hanya punya
   dua anak (a.cover + h2). div.series tidak dibuat OJS, dan
   div.description kosong. Grid 2 kolom sebelumnya gagal
   karena itu.

   Solusi: pakai FLEX baris, bukan grid. Flex tidak peduli
   ada berapa anak, jadi tetap rapi baik terbitan itu
   lengkap maupun kosong.
   ========================================================= */

/* ---------- Kartu besar: flex baris ---------- */
.issues_archive > li:first-child .obj_issue_summary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    background: #ffffff !important;
}

/* Sampul: lebar tetap, latar hijau hanya di kotaknya */
.issues_archive > li:first-child .obj_issue_summary a.cover {
    flex: 0 0 200px !important;
    width: 200px !important;
    height: auto !important;
    min-height: 200px !important;
    align-self: stretch !important;
    border: none !important;
    border-right: 1px solid #eef2f1 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #2a4a44, #486F65) !important;
}

.issues_archive > li:first-child .obj_issue_summary a.cover img {
    height: 155px !important;
}

/* Blok teks: isi sisa ruang, rata tengah vertikal */
.issues_archive > li:first-child .obj_issue_summary h2 {
    flex: 1 1 260px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    padding: 24px 28px !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* Deskripsi ikut ke kolom kanan, di bawah judul */
.issues_archive > li:first-child .obj_issue_summary .description {
    flex: 1 1 100% !important;
    order: 3 !important;
    padding: 0 28px 22px !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* Kalau deskripsi kosong, jangan sisakan ruang */
.issues_archive > li:first-child .obj_issue_summary .description:empty {
    display: none !important;
    padding: 0 !important;
}

/* ---------- Kartu kecil: tinggi seragam ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
    flex: 1 1 auto !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description:empty {
    display: none !important;
    padding: 0 !important;
}

/* ---------- Label BACK ISSUES ---------- */
/* Dipindah ke li:nth-child(2) dengan ruang yang benar */
.issues_archive > li:first-child {
    margin-bottom: 40px !important;
}

.issues_archive > li:nth-child(2)::before {
    content: "BACK ISSUES" !important;
    display: block !important;
    position: absolute !important;
    top: -26px !important;
    left: 2px !important;
    color: #31645B !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    white-space: nowrap !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* ---------- Layar sempit ---------- */
@media (max-width: 767px) {

    .issues_archive > li:first-child .obj_issue_summary {
        flex-direction: column !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 150px !important;
        border-right: none !important;
        border-bottom: 1px solid #eef2f1 !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover img {
        height: 122px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 {
        flex: 1 1 auto !important;
        padding: 16px 18px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary .description {
        padding: 0 18px 16px !important;
    }
}


/* =========================================================
   ===== ARCHIVES v3 — rapikan sisa ========================
   1. Balok hijau di bawah sampul dihilangkan
   2. Kartu besar tidak lagi terlalu tinggi
   3. Label BACK ISSUES dipasang ulang
   ========================================================= */

/* ---------- 1 & 2. Sampul: tinggi ikut isi ---------- */
.issues_archive > li:first-child .obj_issue_summary a.cover {
    flex: 0 0 200px !important;
    width: 200px !important;
    min-height: 0 !important;
    height: 200px !important;
    align-self: flex-start !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-right: none !important;
    background: linear-gradient(135deg, #2a4a44, #486F65) !important;
}

.issues_archive > li:first-child .obj_issue_summary a.cover img {
    height: 160px !important;
    max-height: 160px !important;
    width: auto !important;
    max-width: 85% !important;
}

/* Kartu besar tidak dipaksa tinggi */
.issues_archive > li:first-child .obj_issue_summary {
    align-items: flex-start !important;
    min-height: 0 !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 {
    align-self: center !important;
    padding: 20px 28px !important;
}

/* ---------- 3. Label BACK ISSUES ---------- */
/* Dipasang pada UL, bukan pada LI, supaya tidak
   terpengaruh overflow:hidden milik kartu. */
.issues_archive {
    position: relative !important;
    overflow: visible !important;
}

.issues_archive > li:first-child {
    margin-bottom: 42px !important;
    overflow: visible !important;
}

.issues_archive > li:nth-child(2) {
    position: relative !important;
    overflow: visible !important;
}

.issues_archive > li:nth-child(2)::before {
    content: "BACK ISSUES" !important;
    display: block !important;
    position: absolute !important;
    top: -24px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    color: #31645B !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    pointer-events: none !important;
    animation: none !important;
}

/* ---------- HP ---------- */
@media (max-width: 767px) {

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 160px !important;
        align-self: stretch !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover img {
        height: 128px !important;
        max-height: 128px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 {
        align-self: stretch !important;
        padding: 16px 18px !important;
    }
}


/* =========================================================
   ===== ARCHIVES v4 — balok hijau menggantung ============

   Penyebab: <div class="description"> pada terbitan yang
   belum diberi deskripsi TIDAK benar-benar kosong. Isinya
   berupa spasi dan ganti baris:

       <div class="description">
       </div>

   Selektor :empty hanya cocok bila elemen sama sekali tanpa
   isi, jadi aturan .description:empty tidak pernah aktif.
   Div itu tetap punya display:flex + flex:1 dari aturan lama,
   turun ke baris kedua, dan tampil sebagai balok hijau.

   Solusi: kunci tingginya menjadi nol lewat aturan yang
   tidak bergantung pada :empty.
   ========================================================= */

/* Kartu besar: description dinolkan total */
.issues_archive > li:first-child .obj_issue_summary .description {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Kalau deskripsi memang ada isinya, kembalikan tampilannya */
.issues_archive > li:first-child .obj_issue_summary .description > * {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

.issues_archive > li:first-child .obj_issue_summary .description p {
    margin: 0 !important;
    padding: 0 28px 22px !important;
    -webkit-line-clamp: 3 !important;
    color: #8a918e !important;
}

.issues_archive > li:first-child .obj_issue_summary .description img {
    height: 16px !important;
    max-width: 24px !important;
    margin: 0 3px 10px 28px !important;
}

/* Kartu kecil: perlakuan sama */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    min-height: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description > * {
    font-size: 10px !important;
    line-height: 1.5 !important;
}

/* Sampul: pastikan gradasi berhenti tepat di kotaknya */
.issues_archive > li:first-child .obj_issue_summary a.cover {
    height: 200px !important;
    max-height: 200px !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

/* Kartu besar tidak lagi membungkus ke baris kedua */
.issues_archive > li:first-child .obj_issue_summary {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 {
    flex: 1 1 auto !important;
    align-self: center !important;
}

@media (max-width: 767px) {

    .issues_archive > li:first-child .obj_issue_summary {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        height: 160px !important;
        max-height: 160px !important;
        align-self: stretch !important;
    }

    .issues_archive > li:first-child .obj_issue_summary .description p {
        padding: 0 18px 16px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary .description img {
        margin-left: 18px !important;
    }
}


/* =========================================================
   ===== ARCHIVES v5 — buang latar hijau ==================

   Latar gradasi hijau pada a.cover tidak punya fungsi:
   sampul jurnal sudah berlatar hijau sendiri. Gradasi itulah
   sumber balok menggantung dan ekor hijau selama ini.
   Dibuang, bukan ditambal.

   Sekalian: judul dan badge tidak lagi pecah jadi
   beberapa baris.
   ========================================================= */

/* ---------- Latar hijau dibuang dari SEMUA sampul ---------- */
.issues_archive .obj_issue_summary a.cover {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ---------- Sampul kartu besar ---------- */
.issues_archive > li:first-child .obj_issue_summary a.cover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 190px !important;
    width: 190px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    align-self: center !important;
    padding: 20px 0 20px 20px !important;
    overflow: visible !important;
}

.issues_archive > li:first-child .obj_issue_summary a.cover img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(49, 100, 91, 0.18) !important;
    filter: none !important;
}

/* ---------- Kolom teks: cukup lebar, tidak pecah ---------- */
.issues_archive > li:first-child .obj_issue_summary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-self: center !important;
    padding: 24px 28px !important;
}

.issues_archive > li:first-child .obj_issue_summary h2::before {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    padding: 4px 13px !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 a.title {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 a.title::after {
    white-space: nowrap !important;
}

/* ---------- Sampul kartu kecil ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    padding: 12px 12px 6px !important;
    background: transparent !important;
    overflow: visible !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 12px rgba(49, 100, 91, 0.15) !important;
    filter: none !important;
}

.issues_archive > li:nth-child(n+2):hover .obj_issue_summary a.cover img {
    transform: scale(1.03) !important;
}

/* ---------- HP ---------- */
@media (max-width: 767px) {

    .issues_archive > li:first-child .obj_issue_summary {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 220px !important;
        align-self: center !important;
        padding: 20px 20px 0 !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 {
        align-self: stretch !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px 18px 20px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2::before {
        align-self: center !important;
    }
}


/* =========================================================
   ===== ARCHIVES v6 — kunci lebar & habisi sisa hijau ====
   Judul pecah 3 baris karena kolom teks tidak pernah benar
   benar melebar. Kali ini lebarnya dipaksa dengan width,
   bukan flex-basis. Latar hijau dimatikan di SEMUA elemen
   dalam kartu, termasuk li dan description.
   ========================================================= */

/* ---------- Habisi latar hijau di mana pun ---------- */
.issues_archive > li,
.issues_archive > li .obj_issue_summary,
.issues_archive > li .obj_issue_summary a.cover,
.issues_archive > li .obj_issue_summary h2,
.issues_archive > li .obj_issue_summary .description {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
}

/* description dinolkan total di kartu besar */
.issues_archive > li:first-child .obj_issue_summary .description {
    display: none !important;
}

/* ---------- Kartu besar: lebar dipaksa eksplisit ---------- */
.issues_archive > li:first-child .obj_issue_summary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 22px 26px !important;
    gap: 26px !important;
}

.issues_archive > li:first-child .obj_issue_summary a.cover {
    display: flex !important;
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
}

.issues_archive > li:first-child .obj_issue_summary a.cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 18px rgba(49, 100, 91, 0.20) !important;
}

/* KUNCI: kolom teks diberi lebar nyata, bukan sekadar flex */
.issues_archive > li:first-child .obj_issue_summary h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 320px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
}

.issues_archive > li:first-child .obj_issue_summary h2::before {
    content: "CURRENT ISSUE" !important;
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 14px !important;
    white-space: nowrap !important;
    background: #E1DAC2 !important;
    color: #31645B !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    line-height: 1.4 !important;
    border-radius: 12px !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 a.title {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #31645B !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.issues_archive > li:first-child .obj_issue_summary h2 a.title::after {
    content: " \2192" !important;
    display: inline !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
}

/* ---------- HP: judul boleh membungkus ---------- */
@media (max-width: 767px) {

    .issues_archive > li:first-child .obj_issue_summary {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary a.cover {
        flex: 0 0 auto !important;
        width: 160px !important;
        max-width: 160px !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 {
        align-items: center !important;
        min-width: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .issues_archive > li:first-child .obj_issue_summary h2 a.title {
        font-size: 17px !important;
        white-space: normal !important;
    }
}


/* =========================================================
   ===== ARCHIVES v7 — kembalikan deskripsi & bendera =====

   Penyebab teks & bendera mengecil: pada v4 saya memberi
   font-size:0 dan line-height:0 pada .description untuk
   membunuh balok hijau, lalu mengembalikannya lewat
   .description > * . Tapi teks "This issue has been..."
   BUKAN anak langsung .description, jadi tetap mewarisi 0.

   Trik itu tidak diperlukan lagi: balok hijau sudah tidak
   ada. Jadi font-size:0 dicabut total di sini.
   ========================================================= */

.issues_archive > li .obj_issue_summary .description,
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: #8a918e !important;
    background: #ffffff !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 0 14px 14px !important;
    margin: 0 !important;
}

/* Semua turunan ikut ukuran normal, sedalam apa pun */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description * {
    font-size: 11px !important;
    line-height: 1.55 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p {
    margin: 0 !important;
    padding: 0 !important;
    color: #8a918e !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    display: -webkit-box !important;
    overflow: hidden !important;
}

/* Bendera kembali ke ukuran wajar */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    display: inline-block !important;
    width: auto !important;
    height: 15px !important;
    max-width: 22px !important;
    max-height: 15px !important;
    margin: 0 3px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    font-size: 11px !important;
}

/* Kartu besar tetap tanpa deskripsi (Vol. 3 No. 2 masih kosong) */
.issues_archive > li:first-child .obj_issue_summary .description {
    display: none !important;
}


/* =========================================================
   ===== ARCHIVES v8 — bendera negara (opsi 2) ============
   Garis tipis + bayangan halus. Naik sedikit saat kartu
   disentuh. Tanpa animasi yang berjalan sendiri.
   ========================================================= */

/* Baris bendera jadi flex, jaraknya rata */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

/* Tiap bendera */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    display: inline-block !important;
    width: auto !important;
    height: 15px !important;
    max-height: 15px !important;
    max-width: 23px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    border: 1px solid #dfe4e2 !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(49, 100, 91, 0.10) !important;
    filter: none !important;
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1),
                box-shadow 0.22s ease,
                border-color 0.22s ease !important;
}

/* Naik sedikit saat kartu disentuh */
.issues_archive > li:nth-child(n+2):hover .obj_issue_summary .description img {
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 3px 8px rgba(49, 100, 91, 0.20) !important;
    border-color: #b8c6c1 !important;
}

/* Bendera yang disentuh langsung naik lebih tinggi */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
    transform: translateY(-4px) scale(1.14) !important;
    box-shadow: 0 5px 12px rgba(49, 100, 91, 0.28) !important;
    border-color: #31645B !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Tanpa efek naik di HP (tidak ada hover) */
@media (max-width: 767px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
        height: 16px !important;
        max-height: 16px !important;
        max-width: 24px !important;
        transition: none !important;
    }

    .issues_archive > li:nth-child(n+2):hover .obj_issue_summary .description img,
    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
        transform: none !important;
    }
}

/* Hormati pengaturan "kurangi gerakan" di perangkat */
@media (prefers-reduced-motion: reduce) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
        transition: none !important;
    }

    .issues_archive > li:nth-child(n+2):hover .obj_issue_summary .description img,
    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
        transform: none !important;
    }
}


/* =========================================================
   ===== ARCHIVES v9 — bendera besar + animasi idle =======

   Temuan dari HTML asli:
   - Bendera berada di dalam <p> pertama di .description
   - Di bawahnya ada sampah: &nbsp; &nbsp; <p>&nbsp;</p>
     yang menciptakan celah kosong besar
   - Sebagian gambar bendera GAGAL MUAT (404) sehingga hanya
     tampil sebagai kotak kosong. Itu masalah file di server,
     bukan CSS.
   ========================================================= */

/* ---------- Rapatkan celah, buang sampah ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    padding: 0 14px 14px !important;
    margin: 0 !important;
}

/* Paragraf kosong (&nbsp;) disembunyikan */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:empty,
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Paragraf berisi bendera: jadi baris rapat */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* ---------- Bendera diperbesar ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    display: inline-block !important;
    width: auto !important;
    height: 22px !important;
    max-height: 22px !important;
    max-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    border: 1px solid #dfe4e2 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(49, 100, 91, 0.12) !important;
    filter: none !important;
    object-fit: contain !important;
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1),
                box-shadow 0.22s ease,
                border-color 0.22s ease !important;
}

/* ---------- ANIMASI IDLE: bergoyang bergantian ---------- */
@keyframes rvFlagIdle {
    0%, 88%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    91% {
        transform: translateY(-3px) rotate(-4deg);
    }
    94% {
        transform: translateY(-3px) rotate(4deg);
    }
    97% {
        transform: translateY(-1px) rotate(-2deg);
    }
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    animation: rvFlagIdle 5s ease-in-out infinite !important;
    transform-origin: center bottom !important;
}

/* Tiap bendera bergoyang bergiliran, tidak serempak */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(1) {
    animation-delay: 0s !important;
}
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(2) {
    animation-delay: 0.35s !important;
}
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(3) {
    animation-delay: 0.7s !important;
}
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(4) {
    animation-delay: 1.05s !important;
}
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(5) {
    animation-delay: 1.4s !important;
}

/* Saat disentuh: goyangan berhenti, bendera naik */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
    animation-play-state: paused !important;
    transform: translateY(-4px) scale(1.12) !important;
    box-shadow: 0 5px 14px rgba(49, 100, 91, 0.28) !important;
    border-color: #31645B !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ---------- Teks deskripsi ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: #8a918e !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ---------- HP: bendera tetap besar, animasi dimatikan ---------- */
@media (max-width: 767px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
        height: 24px !important;
        max-height: 24px !important;
        max-width: 36px !important;
        animation: none !important;
        transition: none !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
        transform: none !important;
    }
}

/* ---------- Hormati "kurangi gerakan" ---------- */
@media (prefers-reduced-motion: reduce) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
        animation: none !important;
        transition: none !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
        transform: none !important;
    }
}


/* =========================================================
   ===== ARCHIVES v10 — Back issues jadi BARIS =============

   Kolom 4 terlalu sempit: judul pecah 5 baris, bendera dan
   deskripsi terdorong keluar pandangan. Sekarang tiap
   terbitan dapat baris penuh.

   Susunan: sampul | judul+volume+deskripsi | bendera
   ========================================================= */

/* ---------- Wadah: satu kolom, jadi tiap li = satu baris ---------- */
.issues_archive {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

.issues_archive > li:first-child {
    width: 100% !important;
    margin-bottom: 40px !important;
}

/* ---------- Back issue = baris penuh ---------- */
.issues_archive > li:nth-child(n+2) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    border: 1px solid #e6eae9 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(49, 100, 91, 0.05) !important;
    overflow: visible !important;
    animation: none !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.issues_archive > li:nth-child(n+2):hover {
    transform: translateX(3px) !important;
    box-shadow: 0 6px 20px rgba(49, 100, 91, 0.12) !important;
    border-color: rgba(49, 100, 91, 0.26) !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    height: auto !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
}

/* ---------- Sampul kecil di kiri ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    display: flex !important;
    flex: 0 0 66px !important;
    width: 66px !important;
    max-width: 66px !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 9px rgba(49, 100, 91, 0.16) !important;
    transition: transform 0.25s ease !important;
}

.issues_archive > li:nth-child(n+2):hover .obj_issue_summary a.cover img {
    transform: scale(1.05) !important;
}

/* ---------- Judul + volume di tengah ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 a.title {
    order: 1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #31645B !important;
    white-space: normal !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 .series {
    order: 2 !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.7px !important;
    color: #8a918e !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---------- Deskripsi: teks kiri, bendera kanan ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Teks deskripsi */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #8a918e !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    order: 1 !important;
}

/* Baris bendera: kolom sendiri di kanan */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img) {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    order: 2 !important;
}

/* Buang sampah &nbsp; */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:empty,
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description br {
    display: none !important;
}

/* ---------- Bendera ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    flex: 0 0 auto !important;
    height: 21px !important;
    max-height: 21px !important;
    max-width: 32px !important;
    width: auto !important;
    margin: 0 !important;
    border: 1px solid #dfe4e2 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(49, 100, 91, 0.12) !important;
    background: #ffffff !important;
    object-fit: contain !important;
}

/* ---------- HP: kembali menumpuk ---------- */
@media (max-width: 767px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 13px 14px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
        flex: 0 0 56px !important;
        width: 56px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
        flex: 1 1 auto !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
        flex: 1 1 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img) {
        order: 1 !important;
        flex-wrap: wrap !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
        order: 2 !important;
    }

    .issues_archive > li:nth-child(n+2):hover {
        transform: none !important;
    }
}


/* =========================================================
   ===== ARCHIVES v11 — Cara 1 =============================
   Baris atas : sampul + judul + volume
   Baris bawah: bendera (besar), lalu deskripsi UTUH
                melebar penuh dari kiri ke kanan

   Deskripsi tidak lagi dipotong.
   ========================================================= */

/* ---------- Kartu jadi dua baris ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 16px !important;
    width: 100% !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
}

/* ---------- Sampul ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    display: flex !important;
    flex: 0 0 62px !important;
    width: 62px !important;
    max-width: 62px !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    order: 1 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 9px rgba(49, 100, 91, 0.16) !important;
}

/* ---------- Judul + volume ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 2 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 a.title {
    order: 1 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #31645B !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 .series {
    order: 2 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.7px !important;
    color: #8a918e !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---------- Deskripsi: baris kedua, lebar penuh ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    order: 3 !important;
}

/* Bendera di ATAS deskripsi */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    order: 1 !important;
}

/* Teks deskripsi UTUH, tidak dipotong */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
    color: #8a918e !important;
    order: 2 !important;
    -webkit-line-clamp: none !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description strong,
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description em {
    color: #55605C !important;
    font-size: inherit !important;
}

/* Buang sampah &nbsp; */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:empty,
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description br {
    display: none !important;
}

/* DICABUT: aturan :not(:has(p)) ternyata menyembunyikan
   SEMUA deskripsi, bukan hanya yang kosong. Terbukti dari
   Console: DESCRIPTION display: none. */

/* ---------- Bendera diperbesar ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    flex: 0 0 auto !important;
    height: 26px !important;
    max-height: 26px !important;
    max-width: 40px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dfe4e2 !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 6px rgba(49, 100, 91, 0.14) !important;
    object-fit: contain !important;
    transform-origin: center bottom !important;
    animation: rvFlagIdle 5s ease-in-out infinite !important;
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1),
                box-shadow 0.22s ease,
                border-color 0.22s ease !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
    animation-play-state: paused !important;
    transform: translateY(-5px) scale(1.12) !important;
    box-shadow: 0 6px 16px rgba(49, 100, 91, 0.28) !important;
    border-color: #31645B !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ---------- HP ---------- */
@media (max-width: 767px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary {
        padding: 14px !important;
        gap: 0 12px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
        flex: 0 0 54px !important;
        width: 54px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary h2 a.title {
        font-size: 13.5px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
        gap: 9px !important;
        margin-top: 11px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
        height: 24px !important;
        max-height: 24px !important;
        max-width: 36px !important;
        animation: none !important;
        transition: none !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
        font-size: 11px !important;
    }
}


/* =========================================================
   ===== ARCHIVES v12 =====================================
   1. Sampul lurus dengan bendera & deskripsi di bawahnya
   2. Animasi idle dicabut. Bendera hanya bereaksi saat hover.
   ========================================================= */

/* ---------- 1. Semua elemen mulai dari garis kiri yang sama ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    padding: 18px 20px !important;
    margin: 0 !important;
    gap: 0 16px !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    align-self: center !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img),
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ---------- 2. Animasi idle DICABUT ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img,
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(1),
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(2),
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(3),
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(4),
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:nth-of-type(5) {
    animation: none !important;
    animation-name: none !important;
    animation-delay: 0s !important;
    transform: none !important;
}

/* Hanya bereaksi saat disentuh */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
    height: 26px !important;
    max-height: 26px !important;
    max-width: 40px !important;
    transform-origin: center bottom !important;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1),
                box-shadow 0.25s ease,
                border-color 0.25s ease !important;
}

/* Kartu disentuh: semua bendera naik sedikit */
.issues_archive > li:nth-child(n+2):hover .obj_issue_summary .description img {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(49, 100, 91, 0.20) !important;
    border-color: #c3d0cb !important;
}

/* Bendera itu sendiri disentuh: naik lebih tinggi & miring sedikit */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
    transform: translateY(-6px) scale(1.14) rotate(-3deg) !important;
    box-shadow: 0 8px 18px rgba(49, 100, 91, 0.30) !important;
    border-color: #31645B !important;
    position: relative !important;
    z-index: 3 !important;
}

/* ---------- HP ---------- */
@media (max-width: 767px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary {
        padding: 15px 16px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img {
        height: 24px !important;
        max-height: 24px !important;
        max-width: 36px !important;
        transition: none !important;
    }

    .issues_archive > li:nth-child(n+2):hover .obj_issue_summary .description img,
    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description img:hover {
        transform: none !important;
        box-shadow: 0 2px 6px rgba(49, 100, 91, 0.14) !important;
        border-color: #dfe4e2 !important;
    }
}


/* =========================================================
   ===== ARCHIVES v13 — buang ruang kosong ================

   HTML deskripsi Anda berisi sampah dari editor OJS:
       &nbsp;
       &nbsp;
       <p>&nbsp;</p>

   <p>&nbsp;</p> TIDAK kosong: isinya karakter spasi
   non-breaking. Jadi p:empty tidak pernah menangkapnya,
   dan paragraf itu tetap memakan tinggi.

   Solusi: paragraf TERAKHIR di dalam .description dinolkan
   tingginya, karena isinya selalu sampah ini.
   ========================================================= */

/* Paragraf terakhir (sampah &nbsp;) dinolkan */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description > p:last-child:not(:has(img)) {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

/* Paragraf yang HANYA berisi spasi: tinggi nol */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:empty,
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description br {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Deskripsi: tidak ada ruang sisa di bawah */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description > *:last-child {
    margin-bottom: 0 !important;
}

/* Kartu: padding bawah wajar, tidak menganga */
.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    padding-bottom: 18px !important;
}

/* Teks deskripsi tetap utuh */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.65 !important;
}


/* =========================================================
   ===== ARCHIVES v14 — sampul lurus & celah hilang =======

   HTML kartu ini ternyata BERSIH: hanya 2 paragraf
   (bendera + teks). Tidak ada sampah &nbsp;.

   Penyebab sebenarnya:
   .obj_issue_summary memakai align-items:center. Karena
   kartunya flex-wrap dua baris, "center" memusatkan sampul
   dan judul terhadap tinggi baris, menyisakan ruang di bawah
   dan menggeser sampul.

   Solusi: align-items:flex-start, dan semua offset kiri
   dinolkan tegas.
   ========================================================= */

.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- Sampul: tanpa offset apa pun ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    flex: 0 0 62px !important;
    width: 62px !important;
    max-width: 62px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    text-indent: 0 !important;
    order: 1 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Judul: sejajar puncak sampul ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
    flex: 1 1 auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
    min-width: 0 !important;
    order: 2 !important;
}

/* ---------- Deskripsi: baris kedua, mulai dari tepi kiri ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
    order: 3 !important;
}

/* ---------- Tidak ada sisa ruang di bawah ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description > p:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- HP ---------- */
@media (max-width: 767px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary {
        padding: 15px 16px !important;
        column-gap: 12px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
        flex: 0 0 54px !important;
        width: 54px !important;
        max-width: 54px !important;
    }
}


/* =========================================================
   ===== ARCHIVES v15 — perbaikan dua bug =================

   Terbukti dari Console:
     DESCRIPTION display: none   <- BUG
     cover kiri: 133, summary kiri: 81, padding: 20px
     (81 + 20 = 101, bukan 133 -> ada 32px tak terjelaskan)

   BUG 1: aturan .description:not(:has(p)) yang saya pasang
          untuk menyembunyikan deskripsi KOSONG ternyata
          menyembunyikan SEMUA deskripsi. Dicabut.

   BUG 2: 32px sisanya berasal dari padding/margin pada <li>
          yang belum pernah saya nolkan.
   ========================================================= */

/* ---------- BUG 1: kembalikan deskripsi ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    order: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ---------- BUG 2: li tidak boleh punya offset ---------- */
.issues_archive > li,
.issues_archive > li:nth-child(n+2) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    list-style: none !important;
    list-style-position: outside !important;
    box-sizing: border-box !important;
}

.issues_archive > li::marker {
    content: none !important;
}

/* Sisa aturan lama yang mungkin memberi ::before pada li */
.issues_archive > li:nth-child(n+2)::before {
    content: none !important;
    display: none !important;
}

/* Label BACK ISSUES tetap ada di li ke-2 */
.issues_archive > li:nth-child(2)::before {
    content: "BACK ISSUES" !important;
    display: block !important;
    position: absolute !important;
    top: -24px !important;
    left: 0 !important;
    color: #31645B !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* ---------- Sampul: benar-benar di tepi kiri padding ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    padding: 18px 20px !important;
    box-sizing: border-box !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    flex: 0 0 62px !important;
    width: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
    order: 1 !important;
}

/* ---------- Bendera & teks di dalam deskripsi ---------- */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    order: 1 !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
    color: #8a918e !important;
    order: 2 !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:empty {
    display: none !important;
}


/* =========================================================
   ===== ARCHIVES v16 — deskripsi sejajar judul (opsi A) ==

   Sampul jadi jangkar di kiri. Judul, bendera, dan deskripsi
   semuanya berbaris rapi dalam satu kolom di kanannya.

   Hitungan: sampul 62px + gap 16px = 78px
   Jadi .description diberi margin-left 78px.
   ========================================================= */

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 100% !important;
    /* DICABUT: angka tetap 78px selalu meleset karena lebar
       sampul berbeda-beda. Diganti grid di blok v17. */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    order: 3 !important;
}

/* Bendera: baris pertama di dalam deskripsi */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    order: 1 !important;
}

/* Teks: baris kedua, utuh */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
    color: #8a918e !important;
    order: 2 !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
}

/* Judul: titik acuan sejajarnya */
.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
    align-self: flex-start !important;
    order: 2 !important;
}

/* Sampul: jangkar kiri */
.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    flex: 0 0 62px !important;
    width: 62px !important;
    max-width: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
    order: 1 !important;
}

/* ---------- HP: sampul lebih kecil, hitungan menyesuaikan ---------- */
@media (max-width: 767px) {

    /* sampul 54px + gap 12px = 66px */
    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
        width: calc(100% - 66px) !important;
        max-width: calc(100% - 66px) !important;
        margin: 11px 0 0 66px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
        flex: 0 0 54px !important;
        width: 54px !important;
        max-width: 54px !important;
    }
}

/* ---------- HP sempit: deskripsi kembali rata kiri ---------- */
@media (max-width: 480px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 0 0 !important;
    }
}


/* =========================================================
   ===== ARCHIVES v17 — sejajar TANPA angka tetap =========

   Masalah sebelumnya: margin-left:78px adalah angka TETAP,
   dihitung dari asumsi sampul = 62px. Kenyataannya lebar
   sampul berbeda-beda, jadi jorokan selalu meleset.

   Solusi: pakai GRID dua kolom sungguhan.
     kolom 1 = sampul
     kolom 2 = judul + volume + bendera + deskripsi

   Semua isi kolom 2 otomatis sejajar, berapa pun lebar
   sampulnya. Tidak ada angka yang bisa meleset.
   ========================================================= */

.issues_archive > li:nth-child(n+2) .obj_issue_summary {
    display: grid !important;
    grid-template-columns: 62px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Sampul: kolom 1, membentang dua baris */
.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 62px !important;
    max-width: 62px !important;
    min-width: 62px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    order: 0 !important;
    align-self: start !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 9px rgba(49, 100, 91, 0.16) !important;
}

/* Judul + volume: kolom 2, baris 1 */
.issues_archive > li:nth-child(n+2) .obj_issue_summary h2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3px !important;
    flex: none !important;
    order: 0 !important;
    align-self: start !important;
}

/* Deskripsi: kolom 2, baris 2 -> otomatis sejajar judul */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    flex: none !important;
    order: 0 !important;
    box-sizing: border-box !important;
}

/* Bendera */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:has(img) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    order: 1 !important;
}

/* Teks deskripsi */
.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:not(:has(img)) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
    color: #8a918e !important;
    order: 2 !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
}

.issues_archive > li:nth-child(n+2) .obj_issue_summary .description p:empty {
    display: none !important;
}

/* ---------- HP ---------- */
@media (max-width: 767px) {

    .issues_archive > li:nth-child(n+2) .obj_issue_summary {
        grid-template-columns: 54px 1fr !important;
        column-gap: 12px !important;
        row-gap: 11px !important;
        padding: 15px 16px !important;
    }

    .issues_archive > li:nth-child(n+2) .obj_issue_summary a.cover {
        width: 54px !important;
        max-width: 54px !important;
        min-width: 54px !important;
    }
}