/* ==========================================================
   USU / TALENTA CUSTOM OJS SIDEBAR
   UNIVERSITAS SUMATERA UTARA VISUAL STYLE
   ========================================================== */

.talenta-custom-sidebar {

    /* ======================================================
       USU BRAND COLORS
       ====================================================== */

    --usu-green: #5CB733;
    --usu-green-mid: #529A3D;
    --usu-green-dark: #487C46;

    --usu-yellow: #F6AE01;
    --usu-orange: #F28800;
    --usu-orange-dark: #EB680D;

    --usu-green-soft: #F3F8F1;

    --usu-text: #31513A;
    --usu-text-dark: #27452F;

    --usu-border: #DDE8D9;

    --usu-white: #FFFFFF;


    /* ======================================================
       SIDEBAR BASE
       ====================================================== */

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--usu-text);
}


/* ==========================================================
   BOX SIZING
   ========================================================== */

.talenta-custom-sidebar *,
.talenta-custom-sidebar *::before,
.talenta-custom-sidebar *::after {

    box-sizing: border-box;

}


/* ==========================================================
   LINKS
   ========================================================== */

.talenta-custom-sidebar a {

    text-decoration: none !important;

}


/* ==========================================================
   PUBLISHER CARD
   ========================================================== */

.talenta-custom-sidebar .talenta-publisher-card {

    width: 100%;

    margin: 0 0 18px 0;

    padding: 15px;

    background: var(--usu-white);

    border: 1px solid var(--usu-border);

    border-radius: 9px;

    box-shadow:
        0 3px 12px rgba(72, 124, 70, 0.10);

}


/* ==========================================================
   PUBLISHER TITLE
   ========================================================== */

.talenta-custom-sidebar .talenta-section-label {

    margin: 0;

    color: var(--usu-green-dark);

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}


/* ==========================================================
   USU DECORATIVE LINE
   ========================================================== */

.talenta-custom-sidebar .talenta-title-line {

    width: 72px;

    height: 3px;

    margin-top: 7px;

    margin-bottom: 12px;

    background:
        linear-gradient(
            to right,

            var(--usu-yellow) 0 32%,

            var(--usu-orange) 32% 48%,

            var(--usu-green) 48% 100%
        );

    border-radius: 3px;

}


/* ==========================================================
   PUBLISHER LOGO
   ========================================================== */

.talenta-custom-sidebar .talenta-publisher-logo {

    width: 100%;

    text-align: center;

    overflow: hidden;

}


.talenta-custom-sidebar .talenta-publisher-logo img {

    display: block;

    width: 100%;

    max-width: 250px;

    height: auto;

    margin: 0 auto;

}


/* ==========================================================
   MENU CARD
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-card {

    width: 100%;

    margin: 0 0 18px 0;

    padding: 0;

    background: var(--usu-white);

    border: 1px solid var(--usu-border);

    border-radius: 9px;

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(72, 124, 70, 0.10);

}


/* ==========================================================
   MENU HEADER
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-header {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 44px;

    padding: 0 13px;

    background:
        linear-gradient(
            135deg,
            var(--usu-green-dark),
            var(--usu-green-mid),
            var(--usu-green)
        );

    color: #FFFFFF !important;

    font-size: 13.5px;

    line-height: 1.2;

    font-weight: 700;

}


/* ==========================================================
   GOLD / ORANGE LEFT ACCENT
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-header::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--usu-yellow),
            var(--usu-orange)
        );

}


/* ==========================================================
   HEADER LEFT
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-header-left {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

}


/* ==========================================================
   HEADER ICON
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 23px;

    min-width: 23px;

    color: #FFFFFF !important;

    font-size: 15px;

    text-align: center;

}


/* ==========================================================
   HEADER TEXT
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-header-left > span:last-child {

    color: #FFFFFF !important;

}


/* ==========================================================
   HEADER CHEVRON
   ========================================================== */

.talenta-custom-sidebar .talenta-chevron {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #FFFFFF !important;

    font-size: 12px;

    opacity: 0.95;

}


/* ==========================================================
   MENU ITEMS
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-items {

    width: 100%;

    margin: 0;

    padding: 0;

    background: #FFFFFF;

}


/* ==========================================================
   MENU LINK
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-items a {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 39px;

    margin: 0;

    padding: 8px 11px;

    border: 0;

    border-bottom: 1px solid #E7EEE3;

    background: #FFFFFF;

    color: var(--usu-text) !important;

    font-size: 12.5px;

    line-height: 1.35;

    font-weight: 400;

    transition:
        background 0.2s ease,
        padding-left 0.2s ease,
        color 0.2s ease;

}


.talenta-custom-sidebar .talenta-menu-items a:last-child {

    border-bottom: none;

}


/* ==========================================================
   MENU ITEM ICON
   ========================================================== */

.talenta-custom-sidebar .talenta-item-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    min-width: 28px;

    margin-right: 3px;

    color: var(--usu-green-dark) !important;

    font-size: 14px;

    text-align: center;

}


/* ==========================================================
   MENU TEXT
   ========================================================== */

.talenta-custom-sidebar
.talenta-menu-items
a > span:nth-child(2) {

    color: var(--usu-text) !important;

}


/* ==========================================================
   RIGHT ARROW
   ========================================================== */

.talenta-custom-sidebar .talenta-item-arrow {

    margin-left: auto;

    color: #94AA91 !important;

    font-size: 11px;

}


/* ==========================================================
   HOVER EFFECT
   ========================================================== */

.talenta-custom-sidebar .talenta-menu-items a:hover {

    padding-left: 15px;

    background:
        linear-gradient(
            to right,
            #F3F8F1,
            #FFFFFF
        );

    color: var(--usu-green-dark) !important;

}


/* ==========================================================
   HOVER ICON
   ========================================================== */

.talenta-custom-sidebar
.talenta-menu-items
a:hover
.talenta-item-icon {

    color: var(--usu-orange) !important;

}


/* ==========================================================
   HOVER TEXT
   ========================================================== */

.talenta-custom-sidebar
.talenta-menu-items
a:hover
> span:nth-child(2) {

    color: var(--usu-green-dark) !important;

}


/* ==========================================================
   HOVER ARROW
   ========================================================== */

.talenta-custom-sidebar
.talenta-menu-items
a:hover
.talenta-item-arrow {

    color: var(--usu-orange) !important;

}


/* ==========================================================
   INFORMATION CARDS
   ========================================================== */

.talenta-custom-sidebar .talenta-info-card {

    position: relative;

    width: 100%;

    margin: 0 0 17px 0;

    padding: 12px;

    background: #FFFFFF;

    border: 1px solid var(--usu-border);

    border-radius: 9px;

    box-shadow:
        0 3px 12px rgba(72, 124, 70, 0.08);

    overflow: hidden;

}


/* ==========================================================
   BOTTOM BRAND STRIP
   ========================================================== */

.talenta-custom-sidebar
.talenta-info-card::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 5px;

    background:
        linear-gradient(
            to right,

            var(--usu-green-dark) 0 62%,

            var(--usu-green) 62% 78%,

            var(--usu-yellow) 78% 90%,

            var(--usu-orange) 90% 100%
        );

}


/* ==========================================================
   INFO TITLE
   ========================================================== */

.talenta-custom-sidebar .talenta-info-title {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--usu-green-dark) !important;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 700;

}


/* ==========================================================
   INFO ICON
   ========================================================== */

.talenta-custom-sidebar .talenta-info-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 21px;

    min-width: 21px;

    color: var(--usu-green-dark) !important;

    font-size: 14px;

    text-align: center;

}


/* ==========================================================
   SMALL DECORATIVE LINE
   ========================================================== */

.talenta-custom-sidebar .talenta-small-line {

    width: 45px;

    height: 2px;

    margin-top: 6px;

    margin-bottom: 9px;

    background:
        linear-gradient(
            to right,

            var(--usu-yellow),

            var(--usu-orange),

            var(--usu-green)
        );

}


/* ==========================================================
   CENTERED IMAGE
   ========================================================== */

.talenta-custom-sidebar .talenta-centered-image {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 3px 0 7px;

    text-align: center;

}


.talenta-custom-sidebar
.talenta-centered-image a {

    display: block;

    width: 100%;

    text-align: center;

}


.talenta-custom-sidebar
.talenta-centered-image img {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    margin: 0 auto;

    transition:
        transform 0.2s ease;

}


.talenta-custom-sidebar
.talenta-centered-image img:hover {

    transform: scale(1.02);

}
/* =========================================================
   ACCREDITATION CARD
   ========================================================= */

.talenta-accreditation-card {
    margin-top: 18px;
    padding: 18px;

    background: #ffffff;

    border: 1px solid var(--usu-border);
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(72, 124, 70, 0.08);

    overflow: hidden;
}


/* Card title */

.talenta-sidebar-card-title {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 15px;

    padding-bottom: 11px;

    color: var(--usu-green-dark);

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

    border-bottom: 1px solid var(--usu-border);
}


/* Small icon */

.talenta-sidebar-card-icon {
    display: flex;

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

    width: 25px;
    height: 25px;

    background: var(--usu-green);

    color: #ffffff;

    border-radius: 50%;

    font-size: 11px;
}


/* Accreditation content */

.talenta-accreditation-content {
    text-align: center;

    padding: 5px 0 3px;
}


/* SINTA logo */

.talenta-accreditation-image {
    display: block;

    width: 100%;
    max-width: 190px;
    height: auto;

    margin: 0 auto;

    border-radius: 8px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Hover */

.talenta-accreditation-image:hover {
    transform: scale(1.03);
    opacity: 0.9;
}


/* SINTA label */

.talenta-accreditation-label {
    display: inline-block;

    margin-top: 10px;

    padding: 5px 14px;

    background: var(--usu-soft-green);

    color: var(--usu-green-dark);

    border-radius: 20px;

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

    letter-spacing: 0.5px;
}

/* ==========================================================
   E-ISSN
   ========================================================== */

.talenta-custom-sidebar .talenta-issn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    max-width: 100%;

    margin: 4px auto 5px;

    padding: 8px 13px;

    background:
        linear-gradient(
            135deg,
            #F3F8F1,
            #EAF3E6
        );

    border: 1px solid #DDEAD7;

    border-radius: 6px;

    color: var(--usu-green-dark) !important;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.4px;

}


.talenta-custom-sidebar .talenta-issn-icon {

    margin-right: 9px;

    color: var(--usu-orange) !important;

    font-size: 13px;

}


/* ==========================================================
   STATISTICS
   ========================================================== */

.talenta-custom-sidebar .talenta-statistics {

    width: 100%;

    text-align: center;

}


.talenta-custom-sidebar
.talenta-statistics > a {

    display: block;

    width: 100%;

    margin: 0 0 7px 0;

    text-align: center;

}


.talenta-custom-sidebar
.talenta-statistics img {

    display: inline-block;

    width: auto;

    max-width: 100%;

    height: auto;

    margin: 0 auto;

}


/* ==========================================================
   VIEW MY STATS BUTTON
   ========================================================== */

.talenta-custom-sidebar .talenta-view-stats {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: auto !important;

    min-width: 125px;

    padding: 8px 14px;

    background:
        linear-gradient(
            135deg,
            var(--usu-green-dark),
            var(--usu-green-mid)
        );

    color: #FFFFFF !important;

    border-radius: 5px;

    font-size: 11.5px;

    line-height: 1.2;

    font-weight: 600;

    text-decoration: none !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


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

.talenta-custom-sidebar
.talenta-view-stats:hover {

    background:
        linear-gradient(
            135deg,
            var(--usu-yellow),
            var(--usu-orange)
        ) !important;

    color: #FFFFFF !important;

    transform: translateY(-1px);

}


/* ==========================================================
   LAST CARD
   ========================================================== */

.talenta-custom-sidebar .talenta-last-card {

    margin-bottom: 0;

}


/* ==========================================================
   IMAGE PROTECTION
   ========================================================== */

.talenta-custom-sidebar img {

    border: 0 !important;

}


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

@media screen and (max-width: 768px) {

    .talenta-custom-sidebar {

        width: 100%;

        max-width: 100%;

    }


    .talenta-custom-sidebar
    .talenta-publisher-card,

    .talenta-custom-sidebar
    .talenta-menu-card,

    .talenta-custom-sidebar
    .talenta-info-card {

        border-radius: 7px;

    }


    .talenta-custom-sidebar
    .talenta-menu-header {

        min-height: 45px;

    }


    .talenta-custom-sidebar
    .talenta-menu-items a {

        min-height: 42px;

        padding-top: 9px;

        padding-bottom: 9px;

    }

}


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

@media screen and (max-width: 480px) {

    .talenta-custom-sidebar {

        font-size: 13px;

    }


    .talenta-custom-sidebar
    .talenta-publisher-card,

    .talenta-custom-sidebar
    .talenta-info-card {

        padding: 11px;

    }


    .talenta-custom-sidebar
    .talenta-menu-header {

        padding-left: 12px;

        padding-right: 12px;

    }


    .talenta-custom-sidebar
    .talenta-menu-items a {

        font-size: 12.5px;

    }

}
/* =========================================================
   TALENTA FRONT PAGE
   USU VISUAL IDENTITY
   ========================================================= */

.talenta-frontpage {
    --usu-green: #5CB733;
    --usu-green-mid: #529A3D;
    --usu-green-dark: #487C46;

    --usu-yellow: #F6AE01;
    --usu-orange: #F28800;
    --usu-orange-dark: #EB680D;

    --usu-soft: #F3F8F1;
    --usu-soft-green: #EAF4E7;

    --usu-text: #31513A;
    --usu-text-dark: #27452F;

    --usu-border: #DDE8D9;

    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 0 40px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--usu-text);
}


/* =========================================================
   JOURNAL HERO
   ========================================================= */

.talenta-journal-hero {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 45px;

    padding: 40px;

    background: #ffffff;

    border: 1px solid var(--usu-border);
    border-radius: 18px;

    box-shadow: 0 5px 20px rgba(72, 124, 70, 0.10);

    overflow: hidden;
}


/* Decorative green top */

.talenta-journal-hero::before {
    content: "";

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

    width: 100%;
    height: 7px;

    background: linear-gradient(
        90deg,
        var(--usu-green-dark),
        var(--usu-green-mid),
        var(--usu-green),
        var(--usu-yellow)
    );
}


/* =========================================================
   COVER
   ========================================================= */

.talenta-journal-cover {
    flex: 0 0 230px;

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

.talenta-journal-cover img {
    display: block;

    width: 210px;
    height: auto;

    border-radius: 8px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16);

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

.talenta-journal-cover img:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   JOURNAL INTRODUCTION
   ========================================================= */

.talenta-journal-intro {
    flex: 1;

    padding-top: 5px;
}

.talenta-journal-label {
    display: inline-block;

    padding: 6px 14px;

    margin-bottom: 12px;

    background: var(--usu-soft-green);

    color: var(--usu-green-dark);

    border-left: 4px solid var(--usu-yellow);

    border-radius: 4px;

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

    letter-spacing: 1.5px;
}

.talenta-journal-intro h1 {
    margin: 0;

    color: var(--usu-green-dark);

    font-size: 34px;
    line-height: 1.2;

    font-weight: 700;
}

.talenta-title-line {
    width: 90px;
    height: 4px;

    margin: 15px 0 22px;

    border-radius: 5px;

    background: linear-gradient(
        90deg,
        var(--usu-green),
        var(--usu-yellow)
    );
}

.talenta-journal-intro p {
    margin: 0 0 16px;

    color: #53645A;

    font-size: 15px;
    line-height: 1.8;

    text-align: justify;
}


/* =========================================================
   CONTENT CARDS
   ========================================================= */

.talenta-content-card {
    position: relative;

    margin-top: 25px;

    padding: 30px 35px;

    background: #ffffff;

    border: 1px solid var(--usu-border);
    border-radius: 16px;

    box-shadow: 0 4px 16px rgba(72, 124, 70, 0.07);

    overflow: hidden;
}


/* Left green accent */

.talenta-content-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: linear-gradient(
        to bottom,
        var(--usu-green),
        var(--usu-green-dark),
        var(--usu-yellow)
    );
}


/* =========================================================
   CARD HEADING
   ========================================================= */

.talenta-card-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    padding-bottom: 14px;

    border-bottom: 1px solid var(--usu-border);
}

.talenta-card-heading h2 {
    margin: 0;

    color: var(--usu-green-dark);

    font-size: 22px;
    font-weight: 700;
}

.talenta-heading-icon {
    display: flex;

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

    width: 28px;
    height: 28px;

    background: var(--usu-green);

    color: #ffffff;

    border-radius: 50%;

    font-size: 10px;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.talenta-content-card p {
    margin: 0 0 15px;

    color: #53645A;

    font-size: 15px;
    line-height: 1.8;

    text-align: justify;
}

.talenta-content-card p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   JOURNAL INFORMATION
   ========================================================= */

.talenta-journal-info {
    width: 100%;

    border: 1px solid var(--usu-border);

    border-radius: 10px;

    overflow: hidden;
}


/* Individual row */

.talenta-info-row {
    display: grid;

    grid-template-columns: 34% 66%;

    border-bottom: 1px solid var(--usu-border);
}

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


/* Label */

.talenta-info-label {
    padding: 13px 16px;

    background: var(--usu-soft);

    color: var(--usu-green-dark);

    font-size: 14px;
    font-weight: 700;
}


/* Value */

.talenta-info-value {
    padding: 13px 16px;

    background: #ffffff;

    color: #53645A;

    font-size: 14px;
}


/* Hover */

.talenta-info-row:hover .talenta-info-label {
    background: var(--usu-soft-green);
}

.talenta-info-row:hover .talenta-info-value {
    background: #FCFEFB;
}


/* =========================================================
   BOTTOM ACCENT
   ========================================================= */

.talenta-frontpage-accent {
    height: 5px;

    margin-top: 25px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        var(--usu-green-dark),
        var(--usu-green-mid),
        var(--usu-green),
        var(--usu-yellow),
        var(--usu-orange)
    );
}


/* =========================================================
   RESPONSIVE / TABLET
   ========================================================= */

@media (max-width: 768px) {

    .talenta-frontpage {
        padding: 5px 10px 30px;
    }

    .talenta-journal-hero {
        flex-direction: column;

        align-items: center;

        gap: 25px;

        padding: 35px 25px;
    }

    .talenta-journal-cover {
        flex: none;
    }

    .talenta-journal-cover img {
        width: 190px;
    }

    .talenta-journal-intro {
        width: 100%;

        text-align: center;
    }

    .talenta-journal-intro h1 {
        font-size: 28px;
    }

    .talenta-title-line {
        margin-left: auto;
        margin-right: auto;
    }

    .talenta-journal-intro p {
        text-align: justify;
    }

    .talenta-content-card {
        padding: 25px 22px;
    }

    .talenta-info-row {
        grid-template-columns: 40% 60%;
    }
}


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

@media (max-width: 480px) {

    .talenta-journal-hero {
        padding: 30px 18px;
    }

    .talenta-journal-cover img {
        width: 160px;
    }

    .talenta-journal-intro h1 {
        font-size: 24px;
    }

    .talenta-content-card {
        padding: 22px 17px;
    }

    .talenta-card-heading h2 {
        font-size: 19px;
    }

    .talenta-info-row {
        display: block;
    }

    .talenta-info-label {
        padding-bottom: 7px;

        border-bottom: none;
    }

    .talenta-info-value {
        padding-top: 7px;
    }
}