/**
 *
 * Open Journal Systems
 * Copyright (c) 2013-2016 Simon Fraser University Library
 * Copyright (c) 2003-2016 John Willinsky
 * Copyright (c) Asosiasi Peneliti Informatika dan Komputer untuk Riset (PILAR)
 * Designed for Journal of Computer and Data Science (JCODA) (2025) oleh Setiawansyah
 * 
 * Credits:
 * Background pattern from subtlepatterns.com
 *
 **/
@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700|Merriweather:400,400i,700,700i');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css?v=3.2.0.3');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css?v=3.2.0.3');
@import url('https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css?v=3.2.0.3');

.journals ul .body .description a {display: inline;}

html,
body {
    font-family: "Nunito", sans-serif;
}

body * {
    font-family: inherit;
}
body {
    background-image: url(https://e-journal.pilar.or.id/public/site/images/background-PILAR2.png);
    background-size: 200px 200px;
}
a { text-decoration: none !important}

.pkp_site_name {margin: 0 0 -10px 0;}
.pkp_site_name > a {padding-top: 0; padding-bottom: 0;}
.pkp_site_name_wrapper {padding-left: 0; padding-right: 0; margin: 0;}
.pkp_site_name .is_img img {
    max-height: 100%;
    max-width: 100%;
    padding: 0;
}
.pkp_site_name .is_img{
    margin:0 !important;
}
.pkp_structure_head {
    background-color: #00a2ea;
    border-bottom: 1px solid #ddd;
}
.pkp_site_name_wrapper::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 20%;
    box-shadow: inset 8px 3px 20px 1px rgba(0, 0, 0, 0.75);
}
.pkp_navigation_user_wrapper {top: 0; padding:0;}
.pkp_navigation_user_wrapper .pkp_navigation_user {font-family: "Nunito", sans-serif; font-weight: normal;}
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile { font-family: "Nunito", sans-serif; background: #11030d; color:#fff }
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > a { font-family: "Nunito", sans-serif; font-weight: normal !important; padding-right: 10px; color:#fff}
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > ul.dropdown-menu { border-radius: 0 !important;}
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > ul.dropdown-menu > li > a { font-family: "Nunito", sans-serif; font-weight: normal !important;}
.pkp_navigation_user { background: #30318b; border-bottom: 2px solid #fff;} /* BG Profile */
.pkp_navigation_user > li > a, .pkp_navigation_user > li.in_focus > a, .pkp_navigation_user > li > a:hover, .pkp_navigation_user > li > a:focus { color: #fff; }

.pkp_navigation_primary_row {background: #30318b !important;} /* BG Navigation Menu */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li {padding: 0 !important;margin: 0 !important;}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {margin: 0 !important; padding: 0 10px !important; line-height: 40px !important; }
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li, .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {font-family: "Nunito", sans-serif; color: #FFFFFF !important; font-weight: normal !important}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {background: rgba(0,0,0,.3) !important}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul, .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover {border-radius: 0 !important; -webkit-border-radius: 0 !important; -o-border-radius: 0 !important;}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul { background: #00a2ea !important} /* ganti warna sub Menu */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li { border-bottom: solid 1px rgba(255,255,255,.35) !important;}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:last-child { border-bottom: none !important;}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper .pkp_search .search_controls a.headerSearchPrompt.search_prompt {font-family: "Nunito", sans-serif; color: #FFFFFF !important}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper .pkp_search.is_open input[type=text] {font-family: "Nunito", sans-serif;}
.pkp_navigation_primary { text-transform: capitalize each word; font-size: 17px;}

.pkp_structure_page {margin:auto; width: 1162px; padding-bottom: 0 !important; border-left: 1px solid gray; border-right: 1px solid gray; background: #fff; }
.pkp_structure_content { padding-top: 0; }
.pkp_structure_sidebar .pkp_block .title {font-family: "Nunito", sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family: Nunito, Merriweather, Playfair Display, Lora, serif !important;}


.page > h2:first-child {

    font-family: Nunito, Merriweather, Playfair Display, Lora, serif !important;
    font-size: 30px;
    font-weight: 700;

    background: linear-gradient(135deg,#30318b,#00a2ea);

    color: #fff !important;

    padding: 15px 20px;

    border-left: 5px solid #bc0fc0;

    border-radius: 0 6px 6px 0;

    box-shadow: 2px 2px 8px rgba(0,0,0,.15);

    margin-bottom: 20px;
}

.journal-description p {
    margin: 0 !important;
    text-align: justify !important;
}
.pkp_structure_main p {
    margin: 0 !important;
    text-align: justify !important;
}

 /* ===== SETIAWAN ===== */
.pilar-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 30px;
    line-height: 30px;
}

.pilar-marquee .pilar-track {
     position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation:
        pilar-scroll2 80s linear infinite,
        pilar-gradient2 5s ease infinite;

    font-weight: bold;
    background: linear-gradient(
        90deg,
        #ff0000,
        #ff9900,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #ff00ff,
        #ff0000
    );
    background-size: 400% 100%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes pilar-scroll {
    0% {
        left: 100%;
    }
    100% {
        left: -3000px;
    }
}
@keyframes pilar-scroll2 {
    0% {
        left: 100%;
    }
    100% {
        left: -3000px;
    }
}

@keyframes pilar-gradient2 {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 400% 50%;
    }
}

.test-gerak {
    animation: testputar 3s infinite linear;
    display:inline-block;
}

@keyframes testputar{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
 /* ===== SETIAWAN ===== */

.thestat {
    font-size: 15px;
    line-height: 25px;
    padding: 10px 0 0 0;
}

.cmp_article_list > li {
    margin-bottom: 15px;
    border-bottom: 1px dotted;
    padding-bottom: 15px;
}
.doi_icn{
    width: 16px;
}
.abs_icn {
    width: 15px;
    margin-top: -4px;
}
.pdf_icn {
    margin-top: -4px;
}
@media (max-width: 1000px) {
.pkp_structure_page {margin:auto; width: 100%; }
}

@media (min-width: 992px) {
    .pkp_structure_main {padding: 15px 30px 90px; }
}

.pkp_block {margin: 0 !important}
.pkp_block.block_make_submission .content {margin: 0 !important; padding: 0 !important; text-align: center !important}
.pkp_block.block_make_submission .content a { background: #00a2ea; line-height: 40px; font-family : Nunito, Merriweather, Playfair Display, Lora, serif; color: #FFFFFF}
.pkp_block.block_make_submission .content a:hover { background: rgba(0,0,0,0.25) !important;  color: #333333}

.obj_article_summary .item.doi .label {background: url(/public/journals/8/images/icon-doi.png) left center no-repeat;width: 25px !important; height:24px !important; color: transparent; text-indent: 100%;white-space: nowrap;overflow: hidden;}
.obj_article_summary .item.stats .abstract, .obj_article_summary .item.stats .galley {position:relative;}   
.obj_article_summary .item.stats .abstract {margin-left: 20px; margin-right: 10px;}   
.obj_article_summary .item.stats .galley {margin-left: 25px;}   
.obj_article_summary .item.stats .abstract:before { content: "\f080";  font-family: FontAwesome; left:-15px; position:absolute; top:0; }
.obj_article_summary .item.stats .galley:before { content: "\f1c1";  font-family: FontAwesome; left:-15px; position:absolute; top:0; }

.obj_issue_toc .sections:not(:first-child) {
    margin-top: 0;
}

.pkp_structure_footer_wrapper{border-bottom: none !important;}
.pkp_block {padding: 15px 10px;}

#customblock-Tools .content>.content div{width: 80% !important; margin: auto;}
#customblock-Tools .content>.content div a img{width: 100% !important;}
#customblock-Visitor_statistics .content>.content .supercounter,#customblock-Visitor_statistics .content>.content .statcounter {text-align:center;}
.sidebar-block{ background:#00a2ea; padding: 5px 2px 5px 10px; color : #fff; margin: 10px -10px;}

/*custom sidebar */
.block-title {
    background: #00a2ea; /*ganti Warna sidebar */
    padding: 7px 15px;
    margin: 10px -10px;
    font-size: 17px;
    font-weight: bold;
    color: white;
}
.sidebar-box-title {
    text-align: center;
    line-height: 20px !important;
    font-size: 16px;
}
.logo-pps {
    width: 70px;
}
.sidebar-box-text-desc {
    font-size: 13px;
    text-align:center;
}
.sidebar-box-issn {
    text-align: center;
}
.tmp-logo {
    width: 200px;
}

.cmp_announcements .obj_announcement_summary.full_width {width: 100% !important;}
.cmp_announcements .obj_announcement_summary .summary p {line-height: 1.3em; margin-top: 0 !important; margin-bottom: 1em !important;}

.img-indexby {
    width: 180px;
    border: 1px solid gray;
    border-radius: 5px;
    box-shadow: 1px 1px gray;
    margin: 0 5px 5px 0;
    padding: 5px;
}
.footer-link {
    padding-bottom: 10px;
}

.pkp_structure_footer {background: #090909; padding: 10px !important;} /*Ganti Warna Footer Ungu Muda */
.pkp_structure_footer .pkp_footer_content p {margin: 0}


.msubmission {
    background: no-repeat center;
    height: 64px;
    width: auto;
    background-size: auto 60px;
}

.mlink {
    text-align: center;
    padding-top: 15px;
    display: block;
    opacity: 0;
    font-size: 16pt;
}

/* =========================
   PILAR Accordion Sidebar
   ========================= */

.pilar-sidebar {
    margin-top: 5px;
}

.pilar-sidebar details {
    margin-bottom: 6px;
}

.pilar-sidebar summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    background: #30318b;
    color: #fff;
    padding: 10px 15px;
    border-left: 5px solid #bc0fc0;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px #c8c8c8;
    font-family: 'Nunito', 'Merriweather', Playfair Display, Lora, serif;
    font-size: 14px;
    font-weight: 600;
    transition: all .3s ease;
}



.pilar-sidebar summary:hover {
    background: #00a2ea;
}

.pilar-sidebar summary::-webkit-details-marker {
    display: none;
}

.pilar-sidebar summary::after {
    content: "+";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
}


.pilar-sidebar details[open] summary {
    background: #00a2ea;
}

.pilar-sidebar .submenu {
    background: #fafafa;
    border-left: 5px solid #bc0fc0;
    font-family: "Nunito", sans-serif;
    margin-left: 8px;
    margin-top: 2px;
}

.pilar-sidebar .submenu a {
    display: block;
    color: #333;
    padding: 9px 15px;
    border-bottom: 1px solid #e8e8e8;
    text-decoration: none !important;
    font-size: 13px;
    transition: all .3s ease;
}

.pilar-sidebar .submenu a:last-child {
    border-bottom: none;
}

.pilar-sidebar .submenu a:hover {
    background:#000 !important;
    color:#fff !important;
    
    padding-left:20px;
    transition:all .3s ease;
}

.pilar-sidebar .submenu a::before {
    
    color: #bc0fc0;
    margin-right: 8px;
}

.pilar-gradient {
    font-family: "Nunito", sans-serif;
    font-weight: bold;
    background: linear-gradient(
        90deg,
        #ff0000,
        #ff9900,
        #ffff00,
        #00cc66,
        #0099ff,
        #6633ff,
        #ff00cc,
        #ff0000
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pilarGradient 8s linear infinite;
}

@keyframes pilarGradient {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 400% center;
    }
}

.pilar-footer {
    font-family: "Nunito", sans-serif;
    font-weight: bold;
    animation: pilarColor 8s linear infinite;
}

@keyframes pilarColor {
    0%   { color: #ff0000; }
    15%  { color: #ff7f00; }
    30%  { color: #ffd700; }
    45%  { color: #00c853; }
    60%  { color: #00b0ff; }
    75%  { color: #3d5afe; }
    90%  { color: #aa00ff; }
    100% { color: #ff0000; }
}

#customblock-sidebar-menu .content {
    padding: 0 !important;
}

#customblock-sidebar-menu .title {
    display: none;
}

@media (max-width:768px) {
    .pilar-sidebar summary {
        font-size: 13px;
    }

    .pilar-sidebar .submenu a {
        font-size: 12px;
    }
}

.pilar-sidebar .submenu a i{
    width:20px;
    text-align:center;
    margin-right:8px;
    color:#00a2ea;
    font-size:13px;
}

.pilar-sidebar .submenu a:hover i{
    color:#bc0fc0;
}

/* =========================
   PILAR Accordion Sidebar
   ========================= */

.sidemenu li {
    background: #30318b; /*ganti BG MenuBar Ungu Tua*/
    margin: 5px 0;
    border-left: 5px solid #bc0fc0; /* Ganti BG border MenuBar Ungu Agak Tua*/
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px #c8c8c8;  /* Ganti warna sadow MenuBar ungu muda*/
    border-bottom: 1px solid white;
}
.sidemenu li:hover {
    background: #00a2ea;
}
.sidemenu li a {
    color: white;
    padding-left: 7px;
}
.pkp_block .title {
    background: #30318b; /*BG template dll */
	color: white;
    border-left: 5px solid #bc0fc0;
    padding: 5px;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px #bbb;
    border-bottom: 1px solid white;
}
#navigationPrimary li a {
    font-size: 13px;
}
/* styling table of content */
.cmp_article_list li:nth-child(2n+1) {
     background: transparent repeat scroll 0% 0% !important;
}
.cmp_article_list li:nth-child(2n) {
     background: transparent repeat scroll 0% 0% !important;
}
.cmp_article_list li {
    padding: 10px;
    margin: 10px 0;
    border-radius: 0rem 0rem 2rem 0rem;
    border-bottom: solid #bc0fc1; /*ganti Warna List Artikel atas */
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 2px 2px 8px 1px rgba(0,0,0,0); 
    box-shadow: .2rem .2rem .1rem #80077a; /*ganti Warna List Artikel bawah */
}
.galleys_links li {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
.obj_issue_toc .articles {
    margin-top: 0;
}
.pkp_footer_content {
  width: 100%;
  float: left;
}
.pkp_brand_footer {
  display:none;
}

.pkp_page_index .homepage_image {
  margin-top: -15px;
}
#customblock-sidebar-menu {
  padding-top: 5px;
}


.fas,
.far,
.fab,
.fa {
    font-family: "Font Awesome 5 Free" !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
}

.fas,
.fa {
    font-weight: 900 !important;
}

/* =========================
   MENU TERTUTUP
   ========================= */

.pilar-sidebar summary {
    background: #30318b;
    color: #fff;
    transition: all .3s ease;
}

/* Icon saat tertutup */

.pilar-sidebar summary::after {
    content: "+";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

/* =========================
   MENU TERBUKA
   ========================= */

.pilar-sidebar details[open] summary {
    background: #00a2ea;
    color: #fff;
    border-left: 5px solid #bc0fc0;
}

/* Icon saat terbuka */

.pilar-sidebar details[open] summary::after {
    content: "-";
    color: #fff;
}

/* Submenu tampil */

.pilar-sidebar details[open] .submenu {
    display: block;
    animation: fadeMenu .3s ease;
}

/* Hover */

.pilar-sidebar summary:hover {
    background: #198754;
}

/* Efek animasi */

@keyframes fadeMenu {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.footer-neon-rgb {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    animation:
        neonGlow 1.5s ease-in-out infinite alternate,
        colorShift 10s linear infinite;
}

@keyframes neonGlow {
    from {
        text-shadow:
            0 0 5px currentColor,
            0 0 10px currentColor;
    }
    to {
        text-shadow:
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 30px currentColor,
            0 0 40px currentColor;
    }
}

@keyframes colorShift {
    0%   { color: #ff0000; }   /* Merah */
    10%  { color: #ff6600; }   /* Oranye */
    20%  { color: #ffd700; }   /* Emas */
    30%  { color: #00ff00; }   /* Hijau */
    40%  { color: #00ffff; }   /* Cyan */
    50%  { color: #0080ff; }   /* Biru */
    60%  { color: #0000ff; }   /* Biru Tua */
    70%  { color: #8a2be2; }   /* Ungu */
    80%  { color: #ff00ff; }   /* Magenta */
    90%  { color: #ff1493; }   /* Pink */
    100% { color: #ff0000; }   /* Kembali Merah */
}


.sekretariat-blink {
    text-align: center;
    font-weight: bold;
    animation:
        fadeInOut 4s infinite,
        colorShift 10s linear infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    25%, 75% { opacity: 1; }
}

@keyframes colorShift {
    0%   { color: #ff0000; }
    20%  { color: #ffd700; }
    40%  { color: #00ff00; }
    60%  { color: #00ffff; }
    80%  { color: #ff00ff; }
    100% { color: #ff0000; }
}


/* ======================================
   REFERENCES - CARD STYLE
   ====================================== */

.item.references {
    margin-top: 35px;
}

.item.references .label {
    font-size: 26px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #d9d9d9;
}

/* Container */
.item.references .value {
    background: transparent;
}

/* Setiap Referensi */
.item.references .value p {
    margin: 0 0 15px;
    padding: 18px 20px 18px 42px;

    /* Hanging Indent */
    text-indent: -22px;

    font-size: 15px;
    line-height: 1.8;
    color: #333;
    text-align: justify;

    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;

    box-shadow: 0 2px 6px rgba(0,0,0,.05);

    transition: all .25s ease;
}

/* Efek Hover */
.item.references .value p:hover{
    border-color: #bfbfbf;
    box-shadow: 0 5px 12px rgba(0,0,0,.10);
    transform: translateY(-2px);
}

/* Link DOI */
.item.references a{
    color:#0b65c2;
    text-decoration:none;
    font-weight:500;
    word-break:break-word;
}

.item.references a:hover{
    text-decoration:underline;
}



/* ======================================
   ABSTRACT - CARD STYLE
   ====================================== */

.item.abstract {
    margin-top: 30px;
}

.item.abstract .label {
    font-size: 26px;
    font-weight: 700;
    
    color: #30318b; 
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 2px solid #d9d9d9;
}

.item.abstract .value {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-left: 4px solid #30318b;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    line-height: 1.8;
    text-align: justify;
    transition: all .25s ease;
}

.item.abstract .value:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,.08);
}

.item.abstract .value p:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   JCODA FINAL TYPOGRAPHY
   SINGLE FONT: COURIER NEW
   All visible text follows the typewriter/monospace typography shown in the Abstract.
   ========================================================== */

html,
body,
body *,
button,
input,
textarea,
select,
option,
table,
table *,
header,
header *,
nav,
nav *,
main,
main *,
footer,
footer *,
aside,
aside *,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
li,
label,
th,
td {
    font-family: "Courier New", Courier, monospace !important;
}

/* Keep icon fonts intact */
.fas,
.far,
.fa {
    font-family: "Font Awesome 5 Free" !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
}

.material-icons {
    font-family: "Material Icons" !important;
}

/* Ensure article Abstract and all article text use the same font */
.pkp_page_article,
.pkp_page_article *,
.obj_article_details,
.obj_article_details *,
.item.abstract,
.item.abstract *,
.item.references,
.item.references *,
.item.abstract .label,
.item.abstract .value,
.item.references .label,
.item.references .value {
    font-family: "Courier New", Courier, monospace !important;
}

/* Navigation, sidebar, footer, buttons and forms */
.pkp_navigation_user,
.pkp_navigation_user *,
.pkp_navigation_primary,
.pkp_navigation_primary *,
.pkp_navigation_primary_row,
.pkp_navigation_primary_row *,
.pkp_structure_sidebar,
.pkp_structure_sidebar *,
.pkp_block,
.pkp_block *,
.pilar-sidebar,
.pilar-sidebar *,
.sidemenu,
.sidemenu *,
.pkp_structure_footer,
.pkp_structure_footer *,
button,
input,
textarea,
select {
    font-family: "Courier New", Courier, monospace !important;
}
/* ==========================================================
   FINAL OVERRIDE - FONT SAMA SEPERTI ABSTRACT
   Typewriter / monospace appearance
   ========================================================== */

html,
body,
body *,
body *::before,
body *::after,
button,
input,
textarea,
select,
option,
table,
table *,
header,
header *,
nav,
nav *,
main,
main *,
footer,
footer *,
aside,
aside *,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
li,
label,
th,
td {
    font-family: "Courier New", Courier, monospace !important;
}

/* Keep icon fonts working */
.fas,
.far,
.fa {
    font-family: "Font Awesome 5 Free" !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
}

.material-icons {
    font-family: "Material Icons" !important;
}


/* ==========================================
   ONLINE FIRST BOX
   ========================================== */

.obj_article_details .online-first-box {
    display: flex;
    align-items: center;
    gap: 15px;

    margin: 0;
    padding: 18px 20px;

    background: linear-gradient(
        135deg,
        #f0fff7 0%,
        #ffffff 100%
    );

    border: 1px solid #b7e4c7;
    border-left: 5px solid #198754;

    border-radius: 10px;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.obj_article_details .online-first-box:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10);
}


/* ICON */

.obj_article_details .online-first-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #198754;

    color: #ffffff;

    border-radius: 50%;

    font-size: 20px;
    font-weight: 700;

    box-shadow:
        0 4px 10px rgba(25, 135, 84, 0.25);
}


/* CONTENT */

.obj_article_details .online-first-content {
    min-width: 0;
}


/* LABEL */

.obj_article_details .online-first-label {
    margin-bottom: 4px;

    color: #198754;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* DATE */

.obj_article_details .online-first-date {
    color: #17202a;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;
}


/* DESCRIPTION */

.obj_article_details .online-first-description {
    margin-top: 2px;

    color: #6c757d;

    font-size: 12px;

    font-weight: 400;
}


/* MOBILE */

@media (max-width: 768px) {

    .obj_article_details .online-first-box {
        padding: 15px;

        gap: 12px;
    }

    .obj_article_details .online-first-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 17px;
    }

    .obj_article_details .online-first-date {
        font-size: 16px;
    }
}


/* ==========================================================
   PUBLISHED BOX - PURPLE
   OJS 3.5
   HANYA UNTUK PUBLISHED
   ========================================================== */

.obj_article_details .item.published {
    margin: 20px 0 !important;
    padding: 0 !important;
    background: linear-gradient(
        135deg,
        #30318b 0%,
        #5b2c83 50%,
        #8e2de2 100%
    ) !important;

    border: none !important;
    border-left: 5px solid #bc0fc0 !important;
    border-radius: 12px !important;

    box-shadow: 0 6px 18px rgba(48, 49, 139, 0.30) !important;

    overflow: hidden;

    transition: all 0.3s ease;
}

/* Hover */
.obj_article_details .item.published:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(48, 49, 139, 0.40) !important;
}

/* Bagian dalam */
.obj_article_details .item.published .sub_item {
    padding: 18px 22px !important;
}

/* Judul PUBLISHED */
.obj_article_details .item.published .label {
    display: block !important;

    margin: 0 0 7px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Icon kalender */
.obj_article_details .item.published .label::before {
    content: "\f133";

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;

    margin-right: 8px;

    color: #ffffff;
}

/* Tanggal */
.obj_article_details .item.published .value {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: transparent !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5;
}

/* Pastikan span tanggal putih */
.obj_article_details .item.published .value span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Versi artikel jangan ikut box utama */
.obj_article_details .item.published .versions {
    background: rgba(0, 0, 0, 0.10);
}

/* Mobile */
@media (max-width: 768px) {

    .obj_article_details .item.published {
        margin: 15px 0 !important;
        border-radius: 10px !important;
    }

    .obj_article_details .item.published .sub_item {
        padding: 15px 17px !important;
    }

    .obj_article_details .item.published .value {
        font-size: 16px !important;
    }
}


/* ==========================================================
   ISSUE DATE BOX
   PUBLISHED + ONLINE FIRST
   ========================================================== */

.issue-date-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;

    width: 100% !important;

    margin: 25px 0 30px 0 !important;
}


/* ==========================================================
   PUBLISHED
   ========================================================== */

.issue-date-row .published {
    flex: 1 1 50% !important;
    width: 50% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 18px 25px !important;

    min-height: 90px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background: linear-gradient(
        135deg,
        #30318b 0%,
        #5b2c83 50%,
        #00a2ea 100%
    ) !important;

    border: none !important;

    border-left: 5px solid #bc0fc0 !important;

    border-radius: 12px !important;

    box-shadow:
        0 6px 18px rgba(48, 49, 139, 0.30) !important;

    color: #ffffff !important;

    transition: all 0.3s ease;
}


/* Hover Published */

.issue-date-row .published:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(48, 49, 139, 0.40) !important;
}


/* Published label */

.issue-date-row .published .label {
    display: block !important;

    margin: 0 0 5px 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* Published icon */

.issue-date-row .published .label::before {
    content: "\f133";

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;

    margin-right: 10px;

    color: #ffffff;
}


/* Published date */

.issue-date-row .published .value {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 18px !important;
    font-weight: 700 !important;

    line-height: 1.4;
}


/* ==========================================================
   ONLINE FIRST
   ========================================================== */

.issue-date-row .obj_issue_online_first {
    flex: 1 1 50% !important;
    width: 50% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 18px 25px !important;

    min-height: 90px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background: linear-gradient(
        135deg,
        #fff200 0%,
        #ffd000 50%,
        #ffb700 100%
    ) !important;

    border: none !important;

    border-left: 5px solid #d39e00 !important;

    border-radius: 12px !important;

    box-shadow:
        0 6px 18px rgba(255, 193, 7, 0.30) !important;

    color: #111111 !important;

    transition: all 0.3s ease;
}


/* Hover Online First */

.issue-date-row .obj_issue_online_first:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(255, 193, 7, 0.40) !important;
}


/* Online First label */

.issue-date-row .obj_issue_online_first .label {
    display: block !important;

    margin: 0 0 5px 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #111111 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* Online First icon */

.issue-date-row .obj_issue_online_first .label::before {
    content: "\f133";

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;

    margin-right: 10px;

    color: #111111;
}


/* Online First date */

.issue-date-row .obj_issue_online_first .value {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color: #111111 !important;

    font-size: 18px !important;
    font-weight: 700 !important;

    line-height: 1.4;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .issue-date-row {
        flex-direction: column !important;

        gap: 12px !important;

        margin-top: 20px !important;
    }

    .issue-date-row .published,
    .issue-date-row .obj_issue_online_first {
        width: 100% !important;
        flex: 1 1 100% !important;

        min-height: 80px !important;

        padding: 16px 20px !important;
    }

    .issue-date-row .published .value,
    .issue-date-row .obj_issue_online_first .value {
        font-size: 16px !important;
    }

}

.publication-dates{display:flex!important;gap:20px!important;margin:10px 0!important;padding:8px 15px!important;border:1px solid #ddd!important;border-radius:8px!important;background:#fff!important;box-shadow:0 2px 5px rgba(0,0,0,.08)!important}.publication-date{flex:1!important;min-height:auto!important;padding:4px 10px!important;border:0!important;border-left:3px solid #198754!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:10px!important;font-family:inherit!important;font-size:14px!important}.publication-date.schedule-publication{border-left-color:#38359b!important}.publication-label,.publication-value{font-family:inherit!important;font-size:14px!important;line-height:1.4!important;margin:0!important;white-space:nowrap!important}.online-first .publication-label{color:#198754!important}.online-first .publication-value{color:#198754!important;font-weight:bold!important}.schedule-publication .publication-label{color:#38359b!important}.schedule-publication .publication-value{color:#38359b!important;font-weight:bold!important}