/* ===== Sidebar Smooth Modern Style ===== */

.pkp_structure_sidebar .pkp_block {
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #f8fbff 100%
    );
    
    border: 1px solid rgba(13, 110, 253, 0.08);
    border-radius: 22px;

    padding: 24px;

    box-shadow:
        0 10px 30px rgba(13, 110, 253, 0.06),
        0 2px 8px rgba(0,0,0,0.04);

    transition: all .35s ease;
}

.pkp_structure_sidebar .pkp_block:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(13, 110, 253, 0.12),
        0 4px 12px rgba(0,0,0,0.05);
}

/* ===== Sidebar Title ===== */

.pkp_structure_sidebar .pkp_block .title {
    font-size: 1.6rem;
    font-weight: 700;

    color: #0A2647;

    margin-bottom: 20px;
    padding-bottom: 12px;

    border-bottom: 2px solid rgba(13, 110, 253, 0.08);
}

/* ===== Button Menu ===== */

.pkp_structure_sidebar .pkp_block .content a.btn {

    border-radius: 16px;

    border: 1px solid rgba(13,110,253,.15);

    background: rgba(13,110,253,.03);

    color: #0A2647;

    font-weight: 600;

    padding: 12px 18px;

    transition: all .3s ease;

    backdrop-filter: blur(4px);

    width: 100%;

    /* TAMBAHAN */
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* ===== Hover Button ===== */

.pkp_structure_sidebar .pkp_block .content a.btn:hover {
    background: linear-gradient(
        135deg,
        #0d6efd 0%,
        #0A58CA 100%
    );

    color: #ffffff;

    border-color: transparent;

    transform: translateX(4px);

    box-shadow:
        0 10px 24px rgba(13, 110, 253, 0.25);
}

/* ===== Space Between Buttons ===== */

.pkp_structure_sidebar .pkp_block .content p {
    margin-bottom: 12px !important;
}


/* ===== Bootstrap Layout OJS ===== */

.pkp_structure_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
}

/* =========================================================
   OJS IJISSE - MODERN LAYOUT + SIDEBAR COL-LG-3
========================================================= */

/* =========================================================
   MAIN CONTENT LAYOUT
========================================================= */

.pkp_structure_content > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

/* =========================================================
   MAIN CONTENT = col-lg-9
========================================================= */

.pkp_structure_content > .row > .col-lg-9 {

    flex: 0 0 75%;
    max-width: 75%;
    width: 75%;

    padding-right: 24px !important;
    padding-left: 24px !important;

    box-sizing: border-box;
}

/* =========================================================
   SIDEBAR = col-lg-3
========================================================= */

.pkp_structure_sidebar.left {

    flex: 0 0 25%;
    max-width: 25%;
    width: 25%;

    padding-left: 10px;
    padding-right: 24px;

    box-sizing: border-box;

    position: sticky;
    top: 20px;

    align-self: flex-start;
}

/* =========================================================
   SIDEBAR BLOCK
========================================================= */

.pkp_structure_sidebar .pkp_block {

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #f8fbff 100%
    );

    border: 1px solid rgba(13, 110, 253, 0.08);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 28px;

    box-shadow:
        0 10px 30px rgba(13,110,253,.05),
        0 2px 8px rgba(0,0,0,.04);

    transition: all .35s ease;
}

/* =========================================================
   SIDEBAR HOVER
========================================================= */

.pkp_structure_sidebar .pkp_block:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(13,110,253,.10),
        0 4px 12px rgba(0,0,0,.06);
}

/* =========================================================
   SIDEBAR TITLE
========================================================= */

.pkp_structure_sidebar .pkp_block .title {

    font-size: 1.5rem;
    font-weight: 700;

    color: #0A2647;

    margin-bottom: 20px;
    padding-bottom: 12px;

    border-bottom: 2px solid rgba(13,110,253,.08);
}

/* =========================================================
   SIDEBAR BUTTON
========================================================= */

.pkp_structure_sidebar .pkp_block .content a.btn {

    border-radius: 16px;

    border: 1px solid rgba(13,110,253,.15);

    background: rgba(13,110,253,.03);

    color: #0A2647;

    font-weight: 600;

    padding: 12px 18px;

    transition: all .3s ease;

    backdrop-filter: blur(4px);

    width: 100%;
}

/* =========================================================
   BUTTON HOVER
========================================================= */

.pkp_structure_sidebar .pkp_block .content a.btn:hover {

    background: linear-gradient(
        135deg,
        #0d6efd 0%,
        #0A58CA 100%
    );

    color: #ffffff;

    border-color: transparent;

    transform: translateX(4px);

    box-shadow:
        0 10px 24px rgba(13,110,253,.25);
}

/* =========================================================
   BUTTON SPACING
========================================================= */

.pkp_structure_sidebar .pkp_block .content p {

    margin-bottom: 12px !important;
}

/* =========================================================
   TEMPLATE IMAGE
========================================================= */

.pkp_structure_sidebar img {

    border-radius: 18px;

    transition: .3s ease;
}

.pkp_structure_sidebar img:hover {

    transform: scale(1.02);
}

/* =========================================================
   MAIN ARTICLE CONTENT
========================================================= */

.homepage_about {

    background: #ffffff;

    border-radius: 24px;

    padding: 35px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.04);

    margin-bottom: 40px;
}

/* =========================================================
   RESPONSIVE TABLE
========================================================= */

.responsive-table {

    width: 100%;
    border-collapse: collapse;
}

.responsive-table td {

    vertical-align: top;
    padding: 12px;
}

.responsive-table img {

    max-width: 260px;
    border-radius: 18px;
}

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

@media (max-width: 991px) {

    .pkp_structure_content > .row {

        flex-direction: column;
    }

    .pkp_structure_content > .row > .col-lg-9 {

        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;

        padding: 15px !important;
    }

    .pkp_structure_sidebar.left {

        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;

        padding: 15px;

        position: relative;
        top: unset;
    }

    .responsive-table td {

        display: block;
        width: 100%;
    }

    .responsive-table img {

        max-width: 100%;
        margin-bottom: 20px;
    }
}

/* =========================================================
   FULL WIDTH LAYOUT MODERN
========================================================= */

.pkp_structure_page {
    max-width: 96% !important;
    width: 96% !important;

    margin: 0 auto !important;
}

/* Container utama OJS */

.pkp_structure_content {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    gap: 35px;

    align-items: flex-start;
}

/* =========================================================
   MAIN CONTENT LEBIH BESAR
========================================================= */

.pkp_structure_content > .row > .col-lg-9 {

    flex: 0 0 78% !important;
    max-width: 78% !important;
    width: 78% !important;

    padding-right: 20px !important;
    padding-left: 0 !important;
}

/* =========================================================
   SIDEBAR LEBIH PROPORSIONAL
========================================================= */

.pkp_structure_sidebar.left {

    flex: 0 0 22% !important;
    max-width: 22% !important;
    width: 22% !important;

    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* =========================================================
   HERO / HEADER SECTION FULL WIDTH
========================================================= */

.homepage_image,
.homepage_about,
.page_index_journal {

    width: 100% !important;
    max-width: 100% !important;
}

/* =========================================================
   ABOUT JOURNAL CARD
========================================================= */

.homepage_about {

    padding: 45px !important;

    border-radius: 28px;

    font-size: 1.05rem;
    line-height: 1.9;
}

/* =========================================================
   TITLE BIAR BESAR
========================================================= */

.homepage_about h2,
.page h1 {

    font-size: 2.4rem !important;
    font-weight: 800;
}

/* =========================================================
   SIDEBAR BUTTON FULL WIDTH
========================================================= */

.pkp_structure_sidebar .pkp_block .content a.btn {

    width: 100%;

    padding: 15px 20px;

    font-size: 15px;
}

/* =========================================================
   IMAGE RESPONSIVE
========================================================= */

.responsive-table img {

    width: 100%;
    max-width: 320px;

    height: auto;
}

/* =========================================================
   MONITOR BESAR (1920px+)
========================================================= */

@media (min-width: 1600px) {

    .pkp_structure_page {

        max-width: 1800px !important;
    }

    .homepage_about {

        padding: 55px !important;
    }

    .homepage_about h2 {

        font-size: 2.8rem !important;
    }
}

/* =========================================================
   TABLET & MOBILE
========================================================= */

@media (max-width: 991px) {

    .pkp_structure_page {

        width: 100% !important;
        max-width: 100% !important;

        padding: 0 15px;
    }

    .pkp_structure_content {

        flex-direction: column;
    }

    .pkp_structure_content > .row > .col-lg-9,
    .pkp_structure_sidebar.left {

        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .homepage_about {

        padding: 25px !important;
    }
}


.article-modern{
    font-family: 'Segoe UI', sans-serif;
}

.article-hero{
    background-image:url('https://ijisse.org/images/banner.png');
    background-size:cover;
    background-position:center;
    min-height:320px;
    border-radius:25px;
    overflow:hidden;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.article-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
}

.hero-overlay{
    position:relative;
    z-index:2;
    width:100%;
}

.hero-content{
    padding:50px;
}

.article-title{
    color:#fff;
    font-size:48px;
    font-weight:300;
    line-height:1.4;
    margin-bottom:15px;
}

.article-subtitle{
    color:rgba(255,255,255,0.85);
    font-size:20px;
}

.section-title{
    font-size:24px;
    font-weight:600;
    color:#1f2937;
}

.abstract-text{
    font-size:16px;
    line-height:1.9;
    color:#4b5563;
    text-align:justify;
}

.author-box{
    padding:15px;
    border-radius:15px;
    background:#f8fafc;
}

.reference-item{
    padding:15px;
    border-left:4px solid #0d6efd;
    background:#f8fafc;
    border-radius:10px;
    line-height:1.8;
}

.galleys_links .obj_galley_link{
    display:block;
    width:100%;
    text-align:center;
    padding:12px;
    border-radius:12px;
    background:#0d6efd;
    color:#fff !important;
    font-weight:600;
    text-decoration:none;
}

.galleys_links .obj_galley_link:hover{
    opacity:0.9;
}

@media(max-width:768px){

    .article-title{
        font-size:30px;
    }

    .hero-content{
        padding:30px;
    }

}


/* HERO */

.archive-hero{
    background-image:url('https://ijisse.org/images/banner.png');
    background-size:cover;
    background-position:center;
    min-height:320px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:40px;
}

.archive-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    padding:100px 20px;
}

.archive-title{
    color:#fff;
    font-size:52px;
    font-weight:300;
    margin-bottom:15px;
}

.archive-subtitle{
    color:rgba(255,255,255,0.85);
    font-size:20px;
}

/* ISSUE CARD */

.issue-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:all .3s ease;
    height:100%;
}

.issue-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.issue-cover{
    overflow:hidden;
}

.issue-cover img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:0.4s;
}

.issue-card:hover .issue-cover img{
    transform:scale(1.05);
}

.issue-content{
    padding:30px;
}

.issue-title{
    font-size:24px;
    font-weight:600;
    line-height:1.5;
    margin-bottom:15px;
}

.issue-title a{
    color:#111827;
    text-decoration:none;
}

.issue-title a:hover{
    color:#0d6efd;
}

.issue-description{
    color:#6b7280;
    line-height:1.8;
    margin-bottom:25px;
    text-align:justify;
}

.issue-footer{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.issue-date{
    color:#9ca3af;
    font-size:14px;
}

/* PAGINATION */

.cmp_pagination{
    margin-top:50px;
    text-align:center;
}

/* RESPONSIVE */

@media(max-width:768px){

    .archive-title{
        font-size:34px;
    }

    .archive-subtitle{
        font-size:16px;
    }

    .issue-cover img{
        height:240px;
    }

}


.issue-hero{
    background-image:url('https://ijisse.org/images/banner.png');
    background-size:cover;
    background-position:center;
    min-height:320px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:40px;
}

.issue-overlay{
    background:rgba(0,0,0,0.70);

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

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

    text-align:center;
}

.issue-overlay .container{
    position:relative;
    top:10px;
}

.issue-main-title{
    color:#fff;
    font-size:52px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:20px;
}

.issue-subtitle{
    color:#dfe6e9;
    font-size:20px;
    max-width:850px;
    margin:auto;
    line-height:1.8;
}

.issue-info-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,0.08);
}

.issue-cover-image img{
    width:100%;
    height:100%;
    min-height:450px;
    object-fit:cover;
}

.issue-content{
    padding:50px;
}

.issue-title{
    font-size:38px;
    font-weight:700;
    color:#212529;
    line-height:1.4;
    margin-bottom:25px;
}

.issue-description{
    color:#6c757d;
    font-size:17px;
    line-height:2;
}

.issue-meta{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.meta-item{
    background:#f8f9fa;
    padding:14px 20px;
    border-radius:50px;
    font-size:15px;
    color:#495057;
    display:flex;
    align-items:center;
    gap:10px;
}

.meta-item i{
    color:#0d6efd;
}

.toc-section{
    margin-top:60px;
}

.section-header{
    margin-bottom:35px;
}

.section-header h3{
    font-size:32px;
    font-weight:700;
    color:#212529;
}

.toc-wrapper{
    background:#fff;
    border-radius:24px;
    padding:40px;
    box-shadow:0 8px 30px rgba(0,0,0,0.06);
}

.page_issue .obj_article_summary{
    border-bottom:1px solid #eee;
    padding-bottom:30px;
    margin-bottom:30px;
}

.page_issue .obj_article_summary:last-child{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}

.page_issue .obj_article_summary .title a{
    font-size:24px;
    font-weight:700;
    color:#212529;
    text-decoration:none;
    line-height:1.6;
}

.page_issue .obj_article_summary .title a:hover{
    color:#0d6efd;
}

.page_issue .obj_article_summary .authors{
    color:#6c757d;
    margin-top:10px;
}

.page_issue .obj_article_summary .pages{
    margin-top:10px;
    font-weight:500;
    color:#0d6efd;
}

.page_issue .cmp_breadcrumbs{
    margin-bottom:35px;
}

@media(max-width:991px){

    .issue-main-title{
        font-size:38px;
    }

    .issue-subtitle{
        font-size:17px;
    }

    .issue-content{
        padding:35px;
    }

    .issue-title{
        font-size:28px;
    }

    .issue-cover-image img{
        min-height:300px;
    }

}

/* HERO */
.submission-hero{
    background-image:url('https://ijisse.org/images/banner.png');
    background-size:cover;
    background-position:center;
    min-height:350px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.submission-overlay{
    background:rgba(0,0,0,0.70);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.submission-main-title{
    color:#fff;
    font-size:56px;
    font-weight:700;
    margin-bottom:20px;
    position:relative;
    z-index:2;
}

.submission-subtitle{
    color:#dfe6e9;
    font-size:20px;
    line-height:1.8;
    max-width:850px;
    margin:auto;
    position:relative;
    z-index:2;
}

/* CARD */
.content-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,0.06);
    transition:0.3s;
}

.content-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 40px rgba(0,0,0,0.10);
}

.card-header-custom{
    background:linear-gradient(135deg,#0d6efd,#0b5ed7);
    padding:28px 35px;
}

.card-header-custom h2{
    color:#fff;
    margin:0;
    font-size:28px;
    font-weight:700;
}

.card-body-custom{
    padding:40px;
    color:#495057;
    font-size:17px;
    line-height:2;
}

/* NOTIFICATION */
.submission-info{
    font-size:17px;
    color:#495057;
    display:flex;
    align-items:center;
    line-height:1.8;
}

.submission-info i{
    font-size:22px;
}

/* TYPOGRAPHY */
.card-body-custom p{
    margin-bottom:20px;
}

.card-body-custom ul{
    padding-left:20px;
    margin-bottom:25px;
}

.card-body-custom li{
    margin-bottom:10px;
}

/* LINKS */
.page_submissions a{
    text-decoration:none;
}

.page_submissions a:hover{
    color:#0a58ca;
}

/* BREADCRUMBS */
.page_submissions .cmp_breadcrumbs{
    margin-bottom:35px;
}

/* RESPONSIVE */
@media(max-width:991px){

    .submission-main-title{
        font-size:38px;
    }

    .submission-subtitle{
        font-size:17px;
    }

    .card-header-custom{
        padding:24px;
    }

    .card-header-custom h2{
        font-size:22px;
    }

    .card-body-custom{
        padding:30px 25px;
        font-size:15px;
    }

}