/*
 * OJS 3 ULTIMATE MASTER STYLESHEET - TRIKONOMIKA EDITION
 * Version: 2.0 (Full Production Ready)
 * Theme: Luxury Minimalist (Deep Blue & Gold)
 * Purpose: Commercial Template / Ready-to-Use CSS
 * Author: [Your Name/Brand]
 */

/* --- 0. ASSET IMPORTS --- */
/* Mengimpor font Montserrat dari Google Fonts untuk digunakan pada seluruh elemen teks */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* ==========================================================================
   1. GLOBAL VARIABLES & CORE SETUP
   ========================================================================== */
:root {
    /* BRAND COLORS - Variabel utama agar pembeli template mudah mengubah warna dasar jurnal mereka */
    --primary: #003851;      /* Deep Blue */
    --primary-hover: #002638;
    --gold: #c5a059;         /* Accent Gold */
    --gold-soft: #e2c996;
    
    /* NEUTRAL COLORS - Standar warna netral untuk teks dan background */
    --white: #ffffff;
    --bg-gray: #f9f9f9;
    --text-main: #222222;
    --text-soft: #555555;
    --border-light: #eeeeee;
    
    /* SYSTEM SETTINGS - Pengaturan umum untuk tipografi, animasi, dan bentuk elemen */
    --font-main: 'Montserrat', sans-serif;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --radius: 15px;
    --radius-sm: 4px;
    
    /* [SARAN OPTIMASI]: Shadow di bawah ini menggunakan rgba hardcoded. 
       Akan lebih maintainable jika base color RGB-nya dijadikan variabel, misal: --shadow-color: 0, 0, 0; */
    --shadow: 0 10px 10px rgba(0, 0, 0, 0.250);
    
    /* Variabel untuk background pattern titik-titik (polkadot) */
    --dot-bg: radial-gradient(#e0e0e0 0.8px, transparent 0.8px);
    --dot-size: 24px 24px;
}

/* Styling dasar untuk struktur dokumen HTML */
html, body {
    background-color: var(--bg-gray);
    background-image: var(--dot-bg);
    background-size: var(--dot-size);
    background-attachment: fixed;
    font-family: var(--font-main);
    color: var(--text-main);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* Membuat teks lebih halus di layar Mac/iOS */
}

/* Styling global untuk tautan (hyperlink) */
a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

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

/* Styling global untuk semua level heading (Judul) */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Styling global untuk paragraf */
p {
    text-align: justify;
    margin-bottom: 1.5em;
    font-size: 1rem;
}

/* ==========================================================================
   2. HEADER & NAVIGATION (FULL MAPPING)
   ========================================================================== */
/* Menghilangkan padding, border, dan background default header bawaan OJS */
.pkp_structure_head {
    padding: 0;
    border: none;
    background: transparent;
}

/* Wadah untuk nama/logo situs jurnal */
.pkp_site_name_wrapper {
    padding: 0;
    width: 100%;
}

/* Memastikan gambar logo tampil penuh, responsif, dan memiliki gaya yang konsisten */
/* [SARAN OPTIMASI]: Penggunaan !important pada max-height dan width dapat menyulitkan pembeli 
   jika mereka ingin menggunakan logo berukuran kecil. Pertimbangkan untuk menggunakan struktur CSS specificity yang lebih kuat alih-alih !important */
.pkp_site_name img {
    width: 100% !important;
    max-height: none !important;
    display: block;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

/* Navigation User (Login/Register) - Area menu pengguna di pojok atas */
.pkp_navigation_user_wrapper {
    background: transparent;
    padding: 8px 60px;
}

.pkp_navigation_user {
    display: flex;
    justify-content: flex-end;
    gap: 25px;
    list-style: none;
}

/* Teks tautan pada menu pengguna */
/* [SARAN OPTIMASI]: Ada pemanggilan var(--primary-color) dan var(--font-luxury) yang BELUM ada di :root. 
   Sebaiknya disesuaikan menjadi var(--primary) dan var(--font-main) agar tidak error. Penggunaan !important juga sebaiknya dihindari. */
.pkp_navigation_user li a {
    color: var(--primary-color) !important; 
    font-family: var(--font-luxury);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    transition: var(--transition);
}

/* Navigation Primary (Main Menu) - Wadah utama navigasi website */
/* [SARAN OPTIMASI]: Sekali lagi, hindari !important jika memungkinkan agar template scalable */
.pkp_navigation_primary_wrapper {
    background: transparent !important;
    padding: 5px 60px !important;
    display: flex;
    justify-content: center;
}

/* Kotak background untuk menu navigasi */
.pkp_site_nav_menu {
    border-radius: 15px;
    box-shadow: var(--shadow);
}

/* Teks menu navigasi utama */
.pkp_navigation_primary li a {
    color: var(--white) !important;
    font-weight: 600;
    padding: 15px 25px !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

/* Efek garis bawah (underline) animasi saat menu di-hover */
.pkp_navigation_primary li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 3px;
    background-color: var(--gold);
    transform: scaleX(0);
    transition: var(--transition);
}

.pkp_navigation_primary li a:hover::after {
    transform: scaleX(1);
}

/* Menyembunyikan fungsi pencarian bawaan OJS */
/* [SARAN OPTIMASI]: Menyembunyikan fitur pencarian sepenuhnya mungkin akan dikomplain oleh pengguna (author/reviewer). 
   Saran untuk revisi nanti adalah mendesain ulang kolom search, bukan menyembunyikannya. */
.pkp_search_wrapper, 
.pkp_search, 
.pkp_search_desktop {
    display: none !important;
}

/* ==========================================================================
   3. STRUCTURAL LAYOUT
   ========================================================================== */
/* Area halaman utama (pembungkus seluruh konten OJS) */
.pkp_structure_page {
    padding: 0;
    padding-bottom: 20px;
}

/* Kotak konten utama (tempat artikel, issue, halaman statis berada) */
/* [SARAN OPTIMASI]: !important pada padding dan margin-top bisa diatasi dengan menargetkan class hierarki yang lebih spesifik */
.pkp_structure_main {
    background: var(--white);
    padding: 40px !important;
    margin-top: 0 !important;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    max-width: 1150px;
    border: none !important;
}

/* Pengaturan Flexbox untuk menyelaraskan konten utama dan sidebar */
.pkp_structure_content::before,
.pkp_structure_content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Clearfix kuno untuk mencegah layout rusak (berguna untuk kompatibilitas struktur tabel OJS lama) */
/* [SARAN OPTIMASI]: Karena sudah menggunakan display: flex di class atasnya, trik clearfix (clear: both) ini redundant dan bisa dihapus di masa depan */
.pkp_structure_content::after {
    content: "";
    display: table;
    clear: both;
}

/* Menghilangkan elemen pseudo bawaan OJS yang sering merusak layout kustom */
.pkp_structure_main::before,
.pkp_structure_main::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Area Sidebar samping (tempat blok informasi tambahan) */
.pkp_structure_sidebar {
    padding: 0;
    padding-left: 10px;
}

/* Gaya untuk penunjuk lokasi halaman (Breadcrumbs) */
/* [SARAN OPTIMASI]: !important pada margin tidak perlu jika ditulis secara tepat */
.cmp_breadcrumbs {
    max-width: 1150px;
    margin: 0 auto 20px !important;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.cmp_breadcrumbs a { color: var(--gold); }

/* ==========================================================================
   4. HOMEPAGE SPECIFIC
   ========================================================================== */
/* Blok teks 'Tentang Kami' di halaman depan */
.pkp_page_index .homepage_about {
    margin-bottom: 50px;
    border-left: 4px solid var(--gold);
    padding-left: 30px;
}

.homepage_about h2 {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* Jarak untuk bagian pengumuman (Announcements) */
.cmp_announcements {
    margin-top: 40px;
}

/* Kotak ringkasan pengumuman */
.obj_announcement_summary {
    background: var(--bg-gray);
    padding: 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

/* ==========================================================================
   5. ARCHIVES & ISSUE LISTINGS
   ========================================================================== */
/* Wadah grid untuk daftar edisi (Issues) sebelumnya */
.issues_media_list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* Kotak kartu untuk setiap edisi jurnal */
.obj_issue_summary {
    flex: 1 1 300px; /* Lebar fleksibel, minimum 300px */
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: var(--transition);
}

/* Efek saat kartu edisi di-hover */
.obj_issue_summary:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

/* Memastikan cover edisi proporsional */
.obj_issue_summary .cover img {
    width: 100%;
    height: auto;
}

/* Area teks judul pada kartu edisi */
.obj_issue_summary .title {
    padding: 15px;
    font-size: 1.1rem;
    text-align: center;
    background: var(--primary);
    color: var(--white);
}

/* ==========================================================================
   6. ARTICLE LISTINGS (TOC & LISTS)
   ========================================================================== */
/* Container Utama untuk menampung kartu artikel (Table of Content) */
.section .articles, 
.obj_issue_toc .sections .section {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antar kartu */
    margin-top: 10px;
}

/* Kotak kartu untuk setiap ringkasan artikel */
.obj_article_summary {
    background: var(--white);
    border-radius: var(--radius); /* Menggunakan variabel radius 15px */
    padding: 25px;
    padding-left: 35px;
    margin-bottom: 5px; /* Spasi bawah kecil untuk shadow */
    border: 1px solid rgba(0, 0, 0, 0.05); /* [SARAN OPTIMASI]: Pertimbangkan memindahkan nilai rgba ini ke :root variable */
    box-shadow: var(--shadow); /* Shadow awal tipis */
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Aksen Garis Emas Samping (Muncul saat hover dengan animasi memanjang) */
.obj_article_summary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--gold);
    transform: scaleY(0);
    transition: var(--transition);
    transform-origin: bottom;
}

/* EFEK HOVER ELEGAN - Membuat kartu artikel terangkat */
/* [SARAN OPTIMASI]: Warna shadow hardcoded rgba(0, 56, 81, 0.12) dan rgba(197, 160, 89, 0.2). Sebaiknya ubah warna ini ke CSS Variable. */
.obj_article_summary:hover {
    transform: translateY(-10px); /* Kartu mengangkat ke atas */
    box-shadow: 0 20px 50px rgba(0, 56, 81, 0.12); /* Shadow mendalam */
    border-color: rgba(197, 160, 89, 0.2); /* Border sedikit berubah emas */
}

.obj_article_summary:hover::before {
    transform: scaleY(1); /* Garis emas muncul memanjang */
}

/* Penataan Judul Artikel di daftar/katalog */
.obj_article_summary .title {
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 15px;
    display: block;
    transition: var(--transition);
}

.obj_article_summary:hover .title {
    color: var(--gold); /* Judul berubah warna saat kartu di-hover */
}

/* Penataan nama-nama Penulis */
.obj_article_summary .authors {
    color: var(--text-soft);
    font-family: var(--font-main);
    font-weight: 500;
    font-style: normal; /* Menghilangkan italic bawaan OJS agar lebih modern/clean */
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ikon dekoratif kecil sebelum nama penulis (Opsional secara visual) */
.obj_article_summary .authors::before {
    content: "—";
    color: var(--gold);
    font-weight: bold;
}

/* Tombol unduh file PDF/Galley - Gaya Pill Luxury */
/* [SARAN OPTIMASI]: !important kembali digunakan di sini, bisa menjadi sulit jika pembeli ingin mengganti warna tombol secara spesifik */
.obj_galley_link {
    align-self: flex-start; /* Tombol tidak melebar penuh (menyesuaikan konten) */
    background: var(--primary) !important;
    color: var(--white) !important;
    padding: 10px 30px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px; /* Bentuk pill (lonjong) yang luxury */
    border: 2px solid var(--primary);
    box-shadow: 0 4px 15px rgba(0, 56, 81, 0.2); /* [SARAN OPTIMASI]: Nilai shadow hardcoded */
    transition: var(--transition);
}

.obj_galley_link:hover {
    background: var(--gold) !important;
    border-color: var(--gold);
    color: var(--white) !important;
    transform: scale(1.05); /* Sedikit membesar saat hover */
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.4); /* [SARAN OPTIMASI]: Nilai shadow hardcoded */
}

/* Tambahan: Metadata seperti DOI atau Tanggal rilis (Jika diaktifkan di OJS) */
/* [SARAN OPTIMASI]: Warna #999 hardcoded. Lebih baik panggil var(--text-soft) untuk konsistensi. */
.obj_article_summary .date_published {
    font-size: 0.8rem;
    color: #999; 
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================================
   7. ARTICLE DETAIL PAGE (ABSTRACT VIEW)
   ========================================================================== */
/* Gaya judul utama artikel saat dibuka secara detail (halaman Abstrak) */
.pkp_page_article .obj_article_details .page_title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 20px;
}

/* Kotak teks abstrak */
.item.abstract {
    margin-top: 40px;
}

/* Heading bagian Abstrak */
.item.abstract h3 {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 15px;
}

/* Blok informasi DOI dan Keywords */
.item.doi, .item.keywords {
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-gray);
    border-radius: var(--radius-sm);
}

/* Blok How to Cite (Kutipan) */
.item.citation {
    border: 1px solid var(--gold);
    padding: 20px;
    margin-top: 30px;
}

/* ==========================================================================
   8. SIDEBAR BLOCKS
   ========================================================================== */
/* Kotak blok pada sidebar (seperti Custom Block, Information, Language Toggle) */
.pkp_block {
    background: var(--white);
    margin-bottom: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

/* Judul setiap blok sidebar */
.pkp_block .title {
    background: var(--primary);
    color: var(--white);
    padding: 10px 15px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Isi dari blok sidebar */
.pkp_block .content {
    padding: 10px 15px;
}

/* ==========================================================================
   9. FOOTER SECTION
   ========================================================================== */
/* Pembungkus luar area footer */
.pkp_structure_footer_wrapper {
    background: transparent !important; 
    clear: both;
    display: block;
}

/* Area utama kotak footer */
.pkp_structure_footer {
    /* RESET & LAYOUT FIX */
    clear: both;
    width: 100%;
    display: block;
    z-index: 10;
    margin-top: 40px;
    
    /* BOX STYLING (Luxury Blue Box) */
    /* [SARAN OPTIMASI]: #0C3752 ditulis manual. Sebaiknya gunakan var(--primary) agar warna otomatis mengikuti preferensi template pembeli. */
    background: #0C3752; /* Deep Blue Trikonomika */
    color: white;
    padding: 20px 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 1160px; /* Sesuai keinginan Anda */
    /* [SARAN OPTIMASI]: !important pada margin bisa diatasi dengan hierarki CSS yang benar */
    margin: 40px auto !important; /* Membuat seluruh blok footer Center */
}

/* 9.1. PKP Content (Main Container for Custom HTML) - Tempat deskripsi jurnal/alamat ditulis */
.pkp_footer_content {
    max-width: 1160px;
    /* [SARAN OPTIMASI]: Terlalu banyak penggunaan !important */
    margin: 0 auto !important;
    padding: 0 40px !important;
    color: var(--white); /* Diubah ke putih karena background footer biru */
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left; /* Kolom di dalam tetap rata kiri */
}

/* Link di dalam footer content */
.pkp_footer_content a {
    color: var(--gold);
    font-weight: 600;
    text-decoration: underline;
    transition: var(--transition);
}

.pkp_footer_content a:hover {
    color: var(--white);
}

/* 9.2. PKP Navigation Footer - Deretan menu di bagian bawah halaman */
.pkp_navigation_footer {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 auto 40px;
    gap: 25px;
    flex-wrap: wrap;
}

/* Teks tautan pada menu footer */
.pkp_navigation_footer li a {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--white); /* Diubah agar terlihat di background biru */
    transition: var(--transition);
}

.pkp_navigation_footer li a:hover {
    color: var(--gold);
}

/* 9.3. Hide PKP Brand for Luxury look - Menyembunyikan teks/logo bawaan OJS di bawah footer */
.pkp_brand_footer { display: none; }

/* 9.4. Custom Layout Inside Footer (Address, Tools, License) - Jika pengelola jurnal menggunakan blok HTML kustom */
.custom_footer_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

/* Kolom-kolom di dalam footer grid kustom */
.footer_col {
    flex: 1;
    min-width: 280px; /* Agar layout tetap proporsional dan otomatis turun ke bawah (wrap) jika layar sempit */
}

/* Label/Judul untuk setiap kolom kustom footer */
.footer_col_label {
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    display: block;
    border-bottom: 1px solid rgba(197, 160, 89, 0.3); /* [SARAN OPTIMASI]: Nilai RGB hardcoded */
    padding-bottom: 5px;
}

/* Tools Styling (Mendeley, Turnitin, Grammarly) - Area tautan/logo alat bantu jurnal */
.footer_tools_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Gaya baris per logo alat bantu */
.tool_item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 6px;
}

/* Trik cerdas untuk mengubah logo/ikon pihak ketiga (warna hitam/berwarna) menjadi siluet putih semua */
.tool_item img {
    height: 24px;
    filter: brightness(0) invert(1); /* Membuat logo tool jadi putih */
}

/* Map & License - Ukuran Embed Google Maps dan Lisensi (CC) */
.footer_map iframe {
    width: 100%;
    height: 140px;
    border-radius: var(--radius);
}

.footer_license_img {
    margin: 15px 0;
    display: block;
}

/* Responsive Fix - Penyesuaian margin footer pada layar monitor yang lebih kecil (Tablet/Laptop kecil) */
@media (max-width: 1160px) {
    .pkp_structure_footer {
        /* [SARAN OPTIMASI]: Penggunaan !important kembali berulang. */
        margin: 40px 20px !important;
        width: auto;
    }
}

/* ==========================================================================
   10. UI COMPONENTS (Buttons, Forms, Pagination)
   ========================================================================== */
/* Komponen standar Tombol bawaan OJS */
.cmp_button {
    background: var(--primary);
    border: none;
    padding: 12px 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.cmp_button:hover { background: var(--gold); }

/* Komponen Navigasi Halaman (Halaman 1, 2, 3...) */
.cmp_pagination {
    margin-top: 50px;
    text-align: center;
}

/* Penanda halaman yang sedang aktif */
.cmp_pagination .current {
    background: var(--gold);
    color: white;
    padding: 5px 12px;
}

/* Komponen standar Input Form (Boks Teks) OJS */
.textField, .textArea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
}