/* =========================================================
   Custom CSS for OJS 3.3.0.20 - Manuscript Theme
   Style: Universitas Terbuka (Corporate Blue & UT Yellow)
   Author/Customized For: FST UT Administrator
========================================================= */

:root {
    /* --- 1. PENGATURAN WARNA (COLORS) --- */
    --ut-blue: #003B70;         /* Biru utama UT */
    --ut-blue-dark: #00264D;    /* Biru gelap untuk efek hover */
    --ut-yellow: #FFD100;       /* Kuning utama UT */
    --ut-yellow-dark: #E6BC00;  /* Kuning gelap untuk efek hover/border */
    --bg-body: #F4F6F9;         /* Latar belakang luar (abu-abu sangat muda) */
    --bg-content: #FFFFFF;      /* Latar belakang kertas/naskah utama */
    --text-main: #2C3E50;       /* Teks paragraf utama */
    --text-light: #FFFFFF;      /* Teks di atas warna gelap (header/footer) */
    --text-muted: #6C757D;      /* Teks sekunder (tanggal, meta) */
    
    /* --- 2. PENGATURAN UKURAN (SIZING & TYPOGRAPHY) --- */
    /* Font family: Manuscript biasanya menggunakan Serif untuk kesan akademik klasik */
    --font-heading: 'Merriweather', 'Noto Serif', Georgia, serif; 
    --font-body: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Ukuran Teks Dasar */
    --size-base: 16px;          /* Ukuran font dasar paragraf */
    --size-h1: 2.2rem;          /* Ukuran Heading 1 (Judul Jurnal/Artikel) */
    --size-h2: 1.8rem;          /* Ukuran Heading 2 */
    --size-h3: 1.4rem;          /* Ukuran Heading 3 (Judul Blok Sidebar) */
    
    /* Spasi dan Padding */
    --padding-container: 30px;  /* Jarak spasi dalam kotak konten */
    --border-radius: 6px;       /* Tingkat kelengkungan sudut kotak/tombol */
}

/* =========================================================
   A. GLOBAL TYPOGRAPHY & BACKGROUND
========================================================= */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--ut-blue);
    font-weight: 700;
}

a {
    color: var(--ut-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: var(--ut-yellow-dark);
    text-decoration: underline;
}

/* Memastikan area naskah (Manuscript page) terlihat seperti kertas putih */
.pkp_structure_main {
    background-color: var(--bg-content);
    padding: var(--padding-container);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 25px;
    margin-bottom: 25px;
}

/* =========================================================
   B. HEADER & PRIMARY NAVIGATION (MENU UTAMA)
========================================================= */
.pkp_structure_head {
    background-color: var(--ut-blue);
    border-bottom: 5px solid var(--ut-yellow);
    padding: 1.5rem 0; /* Ukuran tinggi header */
}

.pkp_site_name_wrapper h1, 
.pkp_site_name_wrapper .is_text {
    color: var(--text-light) !important;
    font-size: var(--size-h1);
}

/* Area Menu Navigasi */
.pkp_navigation_primary {
    margin-top: 15px;
}

.pkp_navigation_primary > li > a {
    color: var(--text-light) !important; /* Warna teks menu */
    font-family: var(--font-body);
    font-size: 1rem; /* Ukuran font menu */
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: var(--border-radius);
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li[aria-expanded="true"] > a {
    background-color: var(--ut-yellow);
    color: var(--ut-blue) !important; /* Teks biru gelap saat di-hover */
}

/* Sub-menu Dropdown */
.pkp_navigation_primary ul {
    background-color: var(--ut-blue-dark);
    border-top: 3px solid var(--ut-yellow);
    padding: 10px 0;
}

.pkp_navigation_primary ul li a {
    color: var(--text-light) !important;
    font-size: 0.95rem;
    padding: 10px 20px;
}

.pkp_navigation_primary ul li a:hover {
    background-color: var(--ut-yellow);
    color: var(--ut-blue) !important;
}

/* =========================================================
   C. BUTTONS & INPUT (TOMBOL)
========================================================= */
.pkp_button, .cmp_button, button, .obj_galley_link {
    background-color: var(--ut-yellow);
    color: var(--ut-blue) !important;
    font-family: var(--font-body);
    font-size: 0.95rem; /* Ukuran teks tombol */
    font-weight: 700;
    padding: 10px 22px; /* Ukuran tinggi dan lebar tombol */
    border: none;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.pkp_button:hover, .cmp_button:hover, button:hover, .obj_galley_link:hover {
    background-color: var(--ut-yellow-dark);
    color: var(--ut-blue-dark) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
}

/* =========================================================
   D. SIDEBAR (BLOK MENU SAMPING)
========================================================= */
.pkp_structure_sidebar {
    padding-top: 25px;
}

.pkp_block {
    background-color: var(--bg-content);
    border: 1px solid #E5E7EB;
    border-top: 4px solid var(--ut-blue);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.pkp_block .title {
    color: var(--ut-blue);
    font-size: var(--size-h3);
    font-family: var(--font-heading);
    border-bottom: 2px solid var(--ut-yellow);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.pkp_block .content {
    font-size: 0.95rem; /* Ukuran font isi sidebar */
}

.pkp_block ul li {
    padding: 8px 0;
    border-bottom: 1px dashed #E5E7EB;
}

.pkp_block ul li:last-child {
    border-bottom: none;
}

.pkp_block ul li a {
    color: var(--text-main);
    font-weight: 500;
}

.pkp_block ul li a:hover {
    color: var(--ut-blue);
    padding-left: 5px; /* Efek indentasi */
}

/* =========================================================
   E. ARTICLE LIST (DAFTAR ARTIKEL DALAM ISSUE)
========================================================= */
.obj_article_summary {
    padding: 20px 0;
    border-bottom: 1px solid #E5E7EB;
}

.obj_article_summary .title {
    font-size: 1.25rem; /* Ukuran judul artikel di daftar isi */
    font-family: var(--font-heading);
    margin-bottom: 8px;
}

.obj_article_summary .title a {
    color: var(--ut-blue);
}

.obj_article_summary .authors {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 15px;
}

/* =========================================================
   F. FOOTER (BAGIAN BAWAH WEBSITE)
========================================================= */
.pkp_structure_footer {
    background-color: var(--ut-blue);
    color: var(--text-light);
    font-size: 0.95rem; /* Ukuran teks footer */
    padding: 40px 0; /* Ukuran area footer */
    margin-top: 60px;
    border-top: 5px solid var(--ut-yellow);
}

.pkp_structure_footer h2, 
.pkp_structure_footer h3 {
    color: var(--ut-yellow);
    font-size: var(--size-h3);
}

.pkp_structure_footer a {
    color: var(--ut-yellow);
}

.pkp_structure_footer a:hover {
    color: var(--text-light);
    text-decoration: underline;
}