/* =========================================================
   OJS CUSTOM STYLE - REVISI V32 (SIDEBAR PINDAH KE KANAN)
   1. Layout: Mengubah posisi sidebar dari kiri ke kanan (order dibalik).
   2. Background: Tetap mempertahankan batik sogan khas layout lama.
   3. Thumbnail & Elemen Lain: Efek live kedap-kedip hijau tetap aktif.
========================================================= */

/* 1. ANIMASI LIVE PULSE & TEKS KEDAP-KEDIP HIJAU */
@keyframes greenDotBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px #22c55e, 0 0 20px #22c55e;
        transform: scale(1);
    }
    50% {
        opacity: 0.2;
        box-shadow: 0 0 2px #22c55e;
        transform: scale(0.85);
    }
}

@keyframes greenTextBlink {
    0%, 100% {
        color: #15803d !important;
        text-shadow: 0 0 8px rgba(34, 197, 94, 0.8), 0 0 15px rgba(34, 197, 94, 0.4) !important;
        opacity: 1;
    }
    50% {
        color: #166534 !important;
        text-shadow: none !important;
        opacity: 0.35;
    }
}

/* Animasi Kedap-Kedip Khusus Thumbnail Artikel */
@keyframes thumbLiveBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.8), 0 0 25px rgba(34, 197, 94, 0.4);
        border-color: #22c55e !important;
        transform: scale(1);
    }
    50% {
        opacity: 0.65;
        box-shadow: 0 0 4px rgba(34, 197, 94, 0.3);
        border-color: #94a3b8 !important;
        transform: scale(0.985);
    }
}

/* 2. BACKGROUND UTAMA (BATIK SOGAN) */
html, body {
    background-color: #1e130c !important;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(212, 163, 89, 0.16) 0%, rgba(212, 163, 89, 0.16) 8%, transparent 9%),
        radial-gradient(circle at 0% 0%, rgba(212, 163, 89, 0.14) 0%, rgba(212, 163, 89, 0.14) 8%, transparent 9%),
        radial-gradient(circle at 100% 0%, rgba(212, 163, 89, 0.14) 0%, rgba(212, 163, 89, 0.14) 8%, transparent 9%),
        radial-gradient(circle at 0% 100%, rgba(212, 163, 89, 0.14) 0%, rgba(212, 163, 89, 0.14) 8%, transparent 9%),
        radial-gradient(circle at 100% 100%, rgba(212, 163, 89, 0.14) 0%, rgba(212, 163, 89, 0.14) 8%, transparent 9%),
        radial-gradient(ellipse at 50% 20%, rgba(180, 115, 60, 0.12) 0%, transparent 20%),
        radial-gradient(ellipse at 50% 80%, rgba(180, 115, 60, 0.12) 0%, transparent 20%),
        linear-gradient(45deg, rgba(160, 95, 45, 0.18) 25%, transparent 25%, transparent 75%, rgba(160, 95, 45, 0.18) 75%),
        linear-gradient(-45deg, rgba(160, 95, 45, 0.18) 25%, transparent 25%, transparent 75%, rgba(160, 95, 45, 0.18) 75%) !important;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
    background-size: 45px 45px, 45px 45px, 45px 45px, 45px 45px, 45px 45px, 45px 45px, 45px 45px, 45px 45px, 45px 45px !important;
    background-attachment: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_page,
.pkp_structure_body {
    background: transparent !important;
}

/* 3. HEADER FULL WIDTH */
.pkp_structure_head,
header.pkp_structure_head,
.pkp_head_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 2px solid #d4a359 !important;
    overflow: hidden !important;
}

.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_head_wrapper .pkp_site_name_wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    background: #ffffff !important;
}

.pkp_site_name_wrapper img,
.pkp_site_name img,
header img,
.pkp_head_wrapper img,
.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    object-fit: fill !important;
}

.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper,
.pkp_head_wrapper .nav {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* 4. LAYOUT UTAMA (SIDEBAR DIPINDAHKAN KE KANAN) */
.pkp_structure_content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    max-width: 1220px !important;
    margin: 30px auto !important;
    padding: 0 15px !important;
    background: transparent !important;
}

.pkp_structure_main {
    order: 1 !important;
    flex: 1 !important;
    margin-left: 0 !important;
    margin-right: 25px !important;
    background-color: #faf8f5 !important;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(120, 100, 80, 0.025) 0%, rgba(120, 100, 80, 0.025) 10%, transparent 11%),
        radial-gradient(circle at 0% 0%, rgba(120, 100, 80, 0.025) 0%, rgba(120, 100, 80, 0.025) 10%, transparent 11%),
        radial-gradient(circle at 100% 0%, rgba(120, 100, 80, 0.025) 0%, rgba(120, 100, 80, 0.025) 10%, transparent 11%),
        radial-gradient(circle at 0% 100%, rgba(120, 100, 80, 0.025) 0%, rgba(120, 100, 80, 0.025) 10%, transparent 11%),
        radial-gradient(circle at 100% 100%, rgba(120, 100, 80, 0.025) 0%, rgba(120, 100, 80, 0.025) 10%, transparent 11%),
        radial-gradient(ellipse at 50% 30%, rgba(140, 120, 95, 0.02) 0%, rgba(140, 120, 95, 0.02) 20%, transparent 21%),
        radial-gradient(ellipse at 50% 70%, rgba(140, 120, 95, 0.02) 0%, rgba(140, 120, 95, 0.02) 20%, transparent 21%),
        radial-gradient(ellipse at 30% 50%, rgba(140, 120, 95, 0.02) 0%, rgba(140, 120, 95, 0.02) 20%, transparent 21%),
        radial-gradient(ellipse at 70% 50%, rgba(140, 120, 95, 0.02) 0%, rgba(140, 120, 95, 0.02) 20%, transparent 21%) !important;
    background-size: 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
    text-align: justify;
    line-height: 1.75;
}

.pkp_structure_sidebar {
    order: 2 !important;
    flex: 0 0 270px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.pkp_structure_main:before,
.pkp_structure_main:after,
.pkp_structure_sidebar:before,
.pkp_structure_sidebar:after,
.pkp_structure_main hr,
.pkp_structure_main .separator,
.pkp_structure_main .divider,
.page > hr {
    display: none !important;
    border: none !important;
}

/* 5. MENU SIDEBAR */
.pkp_structure_sidebar .content a,
.pkp_structure_sidebar .block_custom .content a,
.pkp_structure_sidebar .pkp_block .content a,
.pkp_structure_sidebar ul.menu li a {
    display: block !important;
    background-color: #8b9bb4 !important;
    color: #ffffff !important;
    padding: 11px 15px !important;
    margin: 8px 0 !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(139, 155, 180, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.pkp_structure_sidebar .content a:hover,
.pkp_structure_sidebar .block_custom .content a:hover,
.pkp_structure_sidebar .pkp_block .content a:hover,
.pkp_structure_sidebar ul.menu li a:hover {
    background-color: #fef08a !important;
    color: #1e293b !important;
    box-shadow: 0 6px 18px rgba(254, 240, 138, 0.6) !important;
    transform: translateY(-2px) scale(1.02) !important;
    font-weight: 700 !important;
    border-color: #fde047 !important;
    text-shadow: none !important;
}

.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block_custom {
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .block_custom .title {
    color: #1e293b !important;
    font-weight: 700 !important;
    border-bottom: 2.5px solid #fde047 !important;
    padding-bottom: 6px !important;
    margin-bottom: 12px !important;
}

/* 6. THUMBNAIL ARTIKEL (SIDEBAR & KONTEN UTAMA) DIBUAT GAYA LIVE KEDAP-KEDIP */
.pkp_structure_sidebar .obj_issue_toc img,
.pkp_structure_sidebar .pkp_block_issue img,
.obj_article_details .item.cover_image img,
.obj_article_summary .cover_image img,
.article_details .cover_image img,
.item.cover_image img,
.pkp_structure_sidebar img[alt*="Cover"],
.pkp_structure_sidebar img[alt*="Journal"],
.pkp_structure_sidebar .block_custom img {
    border: 3px solid #22c55e !important;
    border-radius: 8px !important;
    padding: 3px !important;
    background: #ffffff !important;
    animation: thumbLiveBlink 1.5s infinite ease-in-out !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* 7. AUTHOR BERURUTAN KE BAWAH DENGAN TEKS & TITIK HIJAU KEDAP-KEDIP */
.authors,
.page_article .authors,
.obj_article_summary .authors,
.article-summary .authors,
.item.authors .value {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

.authors .author,
.page_article .authors .author,
.obj_article_summary .authors .author,
.authors .name {
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    animation: greenTextBlink 1.4s infinite ease-in-out !important;
}

.authors .author::before,
.page_article .authors .author::before,
.obj_article_summary .authors .author::before,
.item.authors .value::before {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    margin-right: 9px !important;
    animation: greenDotBlink 1.4s infinite ease-in-out !important;
}

/* 8. ABSTRAK: KEDAP-KEDIP HIJAU */
.item.abstract .label,
.obj_article_details .item.abstract h2,
.article-summary .abstract,
.page_article .abstract h3,
.page_article .item.abstract h2,
.item.abstract h2,
.item.abstract h3 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    animation: greenTextBlink 1.2s infinite ease-in-out !important;
}

.item.abstract .label::before,
.obj_article_details .item.abstract h2::before,
.page_article .abstract h3::before,
.page_article .item.abstract h2::before,
.item.abstract h2::before,
.item.abstract h3::before {
    content: '' !important;
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    animation: greenDotBlink 1.2s infinite ease-in-out !important;
}

/* 9. HOME ARCHIVE / BREADCRUMB */
.cmp_breadcrumbs,
.breadcrumb,
.pkp_breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    padding: 10px 18px !important;
    border-radius: 30px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(212, 163, 89, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.cmp_breadcrumbs::after,
.breadcrumb::after,
.pkp_breadcrumb::after {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    margin-left: auto !important;
    animation: greenDotBlink 1.4s infinite ease-in-out !important;
}

.cmp_breadcrumbs ol,
.breadcrumb ol,
.pkp_breadcrumb ol {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cmp_breadcrumbs li,
.breadcrumb li,
.pkp_breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.cmp_breadcrumbs li::before,
.breadcrumb li::before,
.pkp_breadcrumb li::before {
    content: '' !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    margin-right: 7px !important;
    animation: greenDotBlink 1.4s infinite ease-in-out !important;
}

.cmp_breadcrumbs a,
.breadcrumb a,
.pkp_breadcrumb a {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.cmp_breadcrumbs a:hover,
.breadcrumb a:hover,
.pkp_breadcrumb a:hover {
    color: #fde047 !important;
    text-shadow: 0 0 8px rgba(253, 224, 71, 0.6) !important;
}

/* 10. KARTU ARTIKEL & EFEK HOVER */
.obj_article_summary,
.obj_issue_toc .obj_article_summary,
.article-summary,
.article_summary {
    position: relative !important;
    background-color: #f3f3e6 !important;
    background-image: linear-gradient(rgba(255, 235, 59, 0.18), rgba(255, 235, 59, 0.18)) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 22px !important;
    border: 1.5px solid #dcdcdc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease-in-out !important;
}

.obj_article_summary:hover,
.obj_issue_toc .obj_article_summary:hover,
.article-summary:hover,
.article_summary:hover {
    background-color: #fefde8 !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 25px 6px rgba(255, 215, 0, 0.85), 
                0 0 12px 3px rgba(255, 235, 59, 0.95),
                0 6px 15px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-3px) !important;
}

/* 11. CLEANUP LOGO & BRANDING */
.pkp_structure_sidebar img[alt*="Google"],
.pkp_structure_sidebar img[alt*="Scholar"],
.pkp_structure_sidebar img[src*="google"],
.pkp_structure_sidebar img[src*="scholar"],
.pkp_structure_sidebar .block_indexing img,
.pkp_structure_sidebar .pkp_block_indexing img {
    background: transparent !important;
    padding: 0 !important;
    margin: 8px auto !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    filter: brightness(0.95) contrast(1.1) drop-shadow(0px 1px 2px rgba(0,0,0,0.15)) !important;
    animation: none !important;
}

.pkp_brand_footer,
footer a[href*="pkp.sfu.ca"],
footer img[alt*="PKP"] {
    display: none !important;
}

/* RESPONSIVE DESIGN */
@media(max-width: 900px) {
    .pkp_structure_content {
        display: block !important;
    }
    .pkp_structure_main {
        margin-right: 0;
        padding: 20px !important;
    }
    .pkp_structure_sidebar {
        margin-top: 25px;
        margin-right: 0 !important;
        width: 100%;
    }
}