/* ==================================================================
   STYLESHEET OJS — CSS OLEH TIM LAKSEMANA TEAM
   ------------------------------------------------------------------
   Pengelola    : CSS OLEH LAKSEMANA TEAM
   Platform     : Open Journal Systems (OJS)
   Deskripsi    : Stylesheet terstruktur untuk tema OJS. Seluruh
                  pengaturan warna, font, ukuran, dan spacing
                  dikelola secara terpusat melalui variabel :root.
   ================================================================== */


/* ==================================================================
   02. VARIABEL GLOBAL (:root)
   ------------------------------------------------------------------
   Ubah nilai di sini untuk mengubah tampilan secara terpusat.
   ================================================================== */
:root {

    /* ---------- 02.1 WARNA UTAMA ---------- */
    --color-primary:          #036C3E;   /* Warna utama (navbar & footer) */
    --color-primary-hover:    #013812;   /* Warna hover untuk elemen primary */
    --color-link:             #014d18;   /* Warna tautan default */
    --color-link-hover:       #01942f;   /* Warna tautan ketika hover */
    --color-text:             #1a1a1a;   /* Warna teks utama */
    --color-text-light:       #ffffff;   /* Warna teks terang (footer, navbar) */
    --color-text-muted:       #e6e6e6;   /* Warna teks sekunder (hover copyright) */
    --color-background:       #ffffff;   /* Warna latar halaman */
    --color-background-alt:   #f1f1f1;   /* Warna latar alternatif (site-footer) */
    --color-border:           #e8ebef;   /* Warna border umum */

    /* ---------- 02.2 FONT ---------- */
    --font-body:              Arial, sans-serif;
    --font-heading:           Arial, sans-serif;
    --font-size-body:         15px;
    --font-size-small:        13px;
    --font-size-medium:       14px;
    --font-size-large:        16px;
    --font-size-heading:      24px;
    --font-size-footer-brand: 12px;

    /* ---------- 02.3 UKURAN ---------- */
    --header-height:          200px;
    --logo-max-height:        195px;
    --content-max-width:      1200px;
    --publisher-logo-height:  60px;
    --license-logo-width:     88px;
    --brand-logo-width:       55px;
    --favicon-width:          46px;

    /* ---------- 02.4 SPACING ---------- */
    --spacing-xs:             4px;
    --spacing-sm:             8px;
    --spacing-md:             16px;
    --spacing-lg:             24px;
    --spacing-xl:             32px;
    --spacing-block:          30px;
    --footer-gap:             30px;

    /* ---------- 02.5 BORDER & EFEK ---------- */
    --border-radius-sm:       5px;
    --border-radius-md:       8px;
    --border-width:           1px;
    --transition-default:     all 0.3s ease;
}


/* ==================================================================
   03. RESET & PENGATURAN DASAR
   ================================================================== */
.pkp_site_name_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==================================================================
   04. TIPOGRAFI & FONT
   ------------------------------------------------------------------
   Pengaturan dasar jenis dan ukuran font.
   ================================================================== */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}


/* ==================================================================
   05. HEADER & IDENTITAS WEBSITE
   ================================================================== */
.pkp_site_name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -7px;
    height: var(--header-height);
}

@media (min-width: 992px) {
    .pkp_site_name {
        padding-bottom: 0 !important;
    }
}


/* ==================================================================
   06. LOGO & NAMA WEBSITE
   ================================================================== */
.pkp_site_name .is_img img {
    display: inline-block;
    max-height: var(--logo-max-height);
    max-width: 100%;
    width: auto;
    height: auto;
}


/* ==================================================================
   07. NAVBAR & MENU NAVIGASI
   ------------------------------------------------------------------
   Warna latar navbar menggunakan --color-primary.
   ================================================================== */
.pkp_navigation_primary.pkp_nav_list {
    max-width: 100%;
}

.pkp_navigation_primary_row {
    background: var(--color-primary);
}

#navigationPrimary a {
    color: var(--color-text-light);
    transition: var(--transition-default);
}

#navigationPrimary a:hover {
    color: var(--color-primary-hover);
}


/* ==================================================================
   08. TOMBOL & ELEMEN INTERAKTIF
   ================================================================== */
.cmp_manuscript_button,
.block_make_submission a,
.obj_galley_link {
    background: var(--color-primary);
    color: var(--color-text-light);
    transition: var(--transition-default);
}

.cmp_manuscript_button:hover,
.block_make_submission a:hover,
.obj_galley_link:hover {
    background: var(--color-primary-hover);
}

/* ==================================================================
   09. TAUTAN & EFEK HOVER
   ================================================================== */
a:link {
    color: var(--color-link);
}

a:visited {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

a:active {
    color: var(--color-link-hover);
}


/* ==================================================================
   10. TATA LETAK KONTEN UTAMA
   ================================================================== */
.pkp_structure_main p,
.main_content p,
.article-details p,
.obj_article_details p,
.abstract p,
.item.abstract,
.item.abstract p,
.description,
.description p,
.page p,
article p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}


/* ==================================================================
   11. SIDEBAR & BLOK OJS
   ================================================================== */
.pkp_block {
    padding: var(--spacing-block);
    padding-bottom: calc(var(--spacing-block) / 2);
}

.pkp_block .title {
    display: block;
}


/* ==================================================================
   12. JUDUL HALAMAN & JUDUL ARTIKEL
   ================================================================== */
.page_article .page_title,
.obj_article_details .page_title,
.article-details h1,
.article-details .page_title,
h1.page_title,
.main_content h1.page_title {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}


/* ==================================================================
   13. ABSTRAK & ISI ARTIKEL
   ------------------------------------------------------------------
   Pengaturan abstrak sudah termasuk dalam bagian 10 (konten utama).
   Bagian ini disediakan jika diperlukan styling khusus abstrak.
   ================================================================== */


/* ==================================================================
   14. TABEL, GAMBAR & ELEMEN PENDUKUNG
   ------------------------------------------------------------------
   Disediakan untuk pengembangan lanjutan jika diperlukan.
   ================================================================== */


/* ==================================================================
   15. FOOTER — TIGA KOLOM
   ------------------------------------------------------------------
   Footer utama dengan tata letak tiga kolom (Flexbox):
   Kolom 1 : Informasi Penerbit
   Kolom 2 : Informasi Lisensi
   Kolom 3 : Informasi Platform (PKP/OJS) & pengelola CSS
   ================================================================== */

/* ---------- 15.1 Pembungkus Footer ---------- */
.pkp_structure_footer_wrapper {
    background: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-text-light);
}

.site-footer {
    padding: 0 2rem;
    background: var(--color-primary);
    color: var(--color-text-light);
}

/* ---------- 15.2 Tata Letak Tiga Kolom ---------- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--footer-gap);
    padding: var(--spacing-lg) 0;
    flex-wrap: wrap;
}

/* ---------- 15.3 Kolom 1 — Informasi Penerbit ---------- */
.pkp_footer_content,
.publisher-info-left {
    flex: 1 1 320px;
    text-align: left;
    color: var(--color-text-light);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.publisher-logo {
    display: block;
    font-size: var(--font-size-body);
    margin-bottom: var(--spacing-sm);
}

.publisher-logo a {
    display: inline-block;
}

.publisher-logo img {
    height: var(--publisher-logo-height);
    width: auto;
    background-color: var(--color-background);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
}

.publisher-name {
    margin-bottom: 6px;
}

.publisher-name a {
    font-size: var(--font-size-large);
    font-weight: 700;
    color: var(--color-text-light);
    text-decoration: none;
    text-transform: uppercase;
}

.publisher-address {
    line-height: 1.6;
    font-size: var(--font-size-medium);
    color: var(--color-text-light);
}

.publisher-address a {
    color: var(--color-text-light);
    text-decoration: underline;
    font-size: var(--font-size-medium);
}

.publisher-address a:hover {
    color: var(--color-text-muted) !important;
}

/* ---------- 15.4 Kolom 2 — Informasi Lisensi ---------- */
.publisher-logo-right,
.license-info,
.footer-license {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--color-text-light);
    font-size: var(--font-size-medium);
    line-height: 1.5;
}

.publisher-logo-right img,
.license-info img,
.footer-license img {
    width: var(--license-logo-width);
    height: auto;
    margin: 0;
    filter: none;
    transition: var(--transition-default);
}

.publisher-logo-right img:hover {
    transform: scale(1.05);
}

/* ---------- 15.5 Kolom 3 — Konten Manual ---------- */
.pkp_brand_footer {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--spacing-xs);
    flex: 1 1 220px;
    font-size: var(--font-size-footer-brand);
    color: var(--color-text-light);
    line-height: 1.4;
    text-align: right;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.pkp_brand_footer > a,
.pkp_brand_footer > span,
.pkp_brand_footer > p {
    display: block;
    margin: 0;
    line-height: 1.4;
    color: var(--color-text-light);
}

.pkp_brand_footer img {
    display: block;
    height: auto;
    width: var(--brand-logo-width);
    margin: 2px 0 0 auto;
}

.favicon {
    display: block;
    font-size: var(--font-size-body);
    color: var(--color-text-light);
}

.favicon img {
    width: var(--favicon-width);
    transition: var(--transition-default);
}

.favicon img:hover {
    transform: scale(1.05);
}

/* Sembunyikan logo bawaan OJS/PKP */
.pkp_brand_footer {
    display: none !important;
}
/* ---------- 15.6 Identitas Pengelola CSS ---------- */
.css-credit {
    display: block;
    font-size: var(--font-size-footer-brand);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
    text-align: right;
    letter-spacing: 0.5px;
}


/* ==================================================================
   16. FOOTER COPYRIGHT (BAWAH)
   ------------------------------------------------------------------
   Baris paling bawah, menggunakan warna yang sama dengan navbar.
   ================================================================== */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    padding: var(--spacing-sm) 2rem;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 -2rem;
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.15);
}

.copyright-footer {
    text-align: left;
    font-size: var(--font-size-small) !important;
    color: var(--color-text-light);
}

.copyright-footer a {
    color: var(--color-text-light);
}

.copyright-footer a:hover {
    color: var(--color-text-muted) !important;
}

.item.copyright p {
    font-size: var(--font-size-large);
}


/* ==================================================================
   17. TAMPILAN RESPONSIF (TABLET & PONSEL)
   ================================================================== */

/* ---------- 17.1 Tablet (<= 992px) ---------- */
@media (max-width: 992px) {
    .footer-top {
        gap: var(--spacing-lg);
    }

    .pkp_footer_content,
    .publisher-info-left,
    .publisher-logo-right,
    .license-info,
    .footer-license,
    .pkp_brand_footer {
        flex: 1 1 45%;
    }
}

/* ---------- 17.2 Ponsel (<= 768px) ---------- */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
    }

    .pkp_footer_content,
    .publisher-info-left,
    .publisher-logo-right,
    .license-info,
    .footer-license,
    .pkp_brand_footer {
        flex: 1 1 100%;
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }

    .pkp_brand_footer img,
    .css-credit {
        margin: var(--spacing-sm) 0 0 0;
        text-align: left;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ---------- 17.3 Mencegah Overflow Horizontal ---------- */
.site-footer,
.footer-top,
.footer-bottom {
    overflow-x: hidden;
}


/* ==================================================================
   18. PENYESUAIAN KHUSUS OJS
   ------------------------------------------------------------------
   Disediakan untuk override spesifik kelas bawaan OJS/PKP
   apabila diperlukan di kemudian hari.
   ================================================================== */

/* ==================================================================
   AKHIR FILE — CSS OLEH TIM LAKSEMANA TEAM
   ================================================================== */