.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: 5px 16px !important;
        background: #eef2f1 !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 #dfe4e2 !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: 12px !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;
    }
}