/*
 * OJS – Warm Grainy Gradient Theme (Noise / Grainy Texture)
 * Based on "Thema OJS Matappa 2024 Fixed.css"
 *
 * REVISION: Full color palette changed to warm tones + noise texture.
 * All blue accents replaced with earthy/warm colors.
 */

/* =========================================================
   01. WARM NOISE COLOR SYSTEM
   ========================================================= */

:root {
    --wn-primary: #c97b5a;        /* earthy orange-brown */
    --wn-primary-deep: #a85e3a;   /* deeper brown */
    --wn-primary-soft: #e8b89d;   /* soft peach */

    --wn-amber: #dba074;
    --wn-rose: #d48c7c;
    --wn-cream: #f5ede3;

    --wn-bg: #f5ede3;
    --wn-bg-soft: #faf3ea;
    --wn-surface: rgba(255, 248, 240, .75);
    --wn-surface-strong: rgba(255, 248, 240, .90);
    --wn-surface-soft: rgba(255, 248, 240, .50);

    --wn-border: rgba(200, 170, 150, .55);
    --wn-border-warm: rgba(190, 140, 110, .25);

    --wn-text: #3d2a1e;
    --wn-text-soft: #6a4f3a;
    --wn-text-muted: #8b735c;

    --wn-shadow: 0 18px 45px rgba(100, 70, 40, .12);
    --wn-shadow-soft: 0 8px 24px rgba(100, 70, 40, .09);
    --wn-radius: 18px;
    --wn-radius-sm: 12px;

    --wn-glass-blur: blur(18px);
}

/* =========================================================
   02. GLOBAL BACKGROUND WITH NOISE (WARM GRADIENT)
   ========================================================= */

html,
body {
    background:
        radial-gradient(circle at 12% 8%, rgba(220, 180, 140, .30), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(200, 150, 130, .25), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(180, 130, 100, .15), transparent 40%),
        linear-gradient(145deg, #f7ede3 0%, #efe4d8 50%, #e8dccc 100%) !important;
    background-attachment: fixed !important;
    color: var(--wn-text) !important;
}

/* Lapisan noise (grain) dengan opacity 0.12 */
html body {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E"),
        radial-gradient(circle at 12% 8%, rgba(220, 180, 140, .30), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(200, 150, 130, .25), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(180, 130, 100, .15), transparent 40%),
        linear-gradient(145deg, #f7ede3 0%, #efe4d8 50%, #e8dccc 100%) !important;
    background-blend-mode: overlay, normal, normal, normal, normal;
    background-attachment: fixed !important;
}

/* =========================================================
   03. HEADER – WARM GRADIENT + NOISE
   ========================================================= */

.pkp_structure_head {
    padding: 0 !important;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
        linear-gradient(
            135deg,
            rgba(180, 120, 80, .92),
            rgba(210, 160, 120, .80) 55%,
            rgba(180, 130, 110, .75)
        ) !important;
    background-blend-mode: overlay, normal;
    border-bottom: 1px solid rgba(255, 235, 220, .40) !important;
    box-shadow: 0 10px 35px rgba(120, 80, 50, .16);
}

.pkp_site_name_wrapper {
    background: rgba(255, 235, 220, .12) !important;
    border-bottom: 1px solid rgba(255, 235, 220, .20);
}

.pkp_site_name,
.pkp_site_name a,
.pkp_site_name .is_text {
    color: #fcf6ef !important;
    text-shadow: 0 2px 14px rgba(60, 40, 20, .25);
}

/* =========================================================
   04. NAVIGATION – WARM
   ========================================================= */

.pkp_navigation_primary_wrapper {
    background: rgba(255, 235, 220, .15) !important;
    border-top: 1px solid rgba(255, 235, 220, .20);
    border-bottom: 1px solid rgba(255, 235, 220, .22);
    backdrop-filter: var(--wn-glass-blur);
    -webkit-backdrop-filter: var(--wn-glass-blur);
}

.pkp_navigation_primary > li > a {
    color: rgba(255, 245, 235, .95) !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;
    background: rgba(255, 235, 220, .25) !important;
}

/* =========================================================
   05. FROSTED SURFACES WITH NOISE (WARM)
   ========================================================= */

.pkp_block,
.obj_article_summary,
.obj_issue_summary,
.obj_monograph_summary,
.cmp_notification,
.homepage_image img {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
        var(--wn-surface) !important;
    background-blend-mode: overlay, normal;
    border: 1px solid var(--wn-border) !important;
    border-radius: var(--wn-radius) !important;
    box-shadow: var(--wn-shadow-soft);
    backdrop-filter: var(--wn-glass-blur);
    -webkit-backdrop-filter: var(--wn-glass-blur);
    color: var(--wn-text) !important;
}

/* =========================================================
   06. BUTTONS – WARM GRADIENT + NOISE
   ========================================================= */

.cmp_manuscript_button,
.block_make_submission a,
.obj_galley_link {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
        linear-gradient(
            135deg,
            var(--wn-primary),
            var(--wn-primary-soft)
        ) !important;
    background-blend-mode: overlay, normal;
    color: #ffffff !important;
    border: 1px solid rgba(255, 235, 220, .40) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(160, 100, 60, .25);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cmp_manuscript_button:hover,
.block_make_submission a:hover,
.obj_galley_link:hover {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
        linear-gradient(
            135deg,
            var(--wn-primary-deep),
            var(--wn-primary)
        ) !important;
    background-blend-mode: overlay, normal;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(160, 100, 60, .30);
}

/* =========================================================
   07. TABLES – WARM HEADER
   ========================================================= */

thead th {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
        linear-gradient(
            135deg,
            rgba(180, 120, 80, .92),
            rgba(210, 160, 120, .80)
        ) !important;
    background-blend-mode: overlay, normal;
    color: #ffffff !important;
}

/* =========================================================
   08. FOOTER – WARM + NOISE
   ========================================================= */

.pkp_structure_footer_wrapper {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
        linear-gradient(
            135deg,
            rgba(180, 120, 80, .92),
            rgba(210, 160, 120, .80),
            rgba(180, 130, 110, .75)
        ) !important;
    background-blend-mode: overlay, normal;
    border-top: 1px solid rgba(255, 235, 220, .30);
}

.pkp_structure_footer,
.pkp_footer_content,
.pkp_brand_footer {
    color: rgba(255, 245, 235, .92) !important;
}

.pkp_structure_footer a,
.pkp_footer_content a,
.pkp_brand_footer a {
    color: #fcf6ef !important;
}

.pkp_structure_footer a:hover,
.pkp_footer_content a:hover,
.pkp_brand_footer a:hover {
    color: #ffefe0 !important;
}

/* =========================================================
   09. LINKS & HEADINGS – WARNA WARM
   ========================================================= */

a {
    color: var(--wn-primary-deep);
}
a:hover {
    color: var(--wn-primary);
}

h1, h2, h3, h4, h5, h6,
.pkp_page_title {
    color: var(--wn-text) !important;
}

.pkp_block .title,
.pkp_block h2,
.pkp_block h3 {
    color: var(--wn-text) !important;
}

/* =========================================================
   10. SIDEBAR BLOCKS (sudah diatur di atas)
   ========================================================= */

/* semua blok sudah pakai noise dan surface warm */

/* =========================================================
   11. HOMEPAGE IMAGE SCALING (tetap)
   ========================================================= */

.homepage_image {
    max-width: 220px !important;
    width: 100% !important;
    margin: 0 auto 25px auto !important;
    text-align: center !important;
    display: block !important;
}
.homepage_image img {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: var(--wn-radius) !important;
    border: 1px solid var(--wn-border) !important;
    box-shadow: var(--wn-shadow) !important;
    display: inline-block !important;
}
@media (min-width: 768px) {
    .page_index_journal .homepage_image {
        float: right !important;
        margin: 0 25px 20px 0 !important;
        text-align: right !important;
    }
    .page_index_journal .homepage_about {
        overflow: hidden !important;
    }
}

/* =========================================================
   12. RESPONSIVE & REDUCE MOTION
   ========================================================= */

@media (max-width: 991px) {
    .pkp_block { width: 100%; box-sizing: border-box; }
    .homepage_image { max-width: 200px !important; float: none !important; margin: 0 auto 20px auto !important; }
    .homepage_image img { max-width: 100% !important; width: auto !important; margin: 0 auto !important; }
    .homepage_about { width: 100%; }
}
@media (max-width: 600px) {
    .pkp_structure_head { box-shadow: 0 8px 24px rgba(120,80,50,.12); }
    .pkp_site_name_wrapper { padding-left: 1rem !important; padding-right: 1rem !important; }
    .pkp_structure_main { padding-left: 1rem !important; padding-right: 1rem !important; }
    .pkp_block, .pkp_page_index .journals > ul > li, .cmp_notification,
    .obj_issue_summary, .obj_article_summary { border-radius: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}/* =========================================================
   FORCE LOGO FULL WIDTH HEADER
   ========================================================= */

/* Pastikan container header tidak membatasi lebar */
.pkp_structure_head .container,
.pkp_head_wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Buat wrapper logo mengambil lebar penuh */
.pkp_site_name_wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name {
    width: 95% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.pkp_site_name .is_img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    /* Hilangkan batasan maksimum tinggi */
    max-height: none !important;
}

/* Jika ada pembatas dari tema default OJS */
.pkp_structure_content {
    max-width: 100% !important;
}

/* Hapus padding horizontal berlebih di header */
.pkp_structure_head {
    padding: 0 !important;
}