/* ============================================================
   ============================================================
   PT. RYE EDUKASI KREATIVA PUBLIKASI
   JOURNAL PORTAL
   SUPER PREMIUM WHITE & GOLD
   OJS MULTI JOURNAL

   VERSION : SUPER PREMIUM
   SCOPE   : SITE INDEX ONLY

   IMPORTANT
   ------------------------------------------------------------
   This stylesheet ONLY targets:

       body:has(.page_index_site)

   Individual journals remain untouched.
   ============================================================
   ============================================================ */


/* ============================================================
   01. FONT
   ============================================================ */

@import url(
    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'
);


/* ============================================================
   02. DESIGN VARIABLES
   ============================================================ */

body:has(.page_index_site) {

    --rye-gold:
        #c89b3c;

    --rye-gold-dark:
        #96701b;

    --rye-gold-deep:
        #765511;

    --rye-gold-light:
        #e6cb72;

    --rye-gold-pale:
        #faf7ee;

    --rye-gold-ultra:
        #fdfbf6;

    --rye-text:
        #222222;

    --rye-text-2:
        #3d3d3d;

    --rye-muted:
        #777777;

    --rye-border:
        #e5dfd1;

    --rye-border-light:
        #eee9de;

    --rye-bg:
        #f7f6f2;

    --rye-white:
        #ffffff;

}


/* ============================================================
   03. GLOBAL BODY
   ============================================================ */

body:has(.page_index_site) {

    margin: 0 !important;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;

    color:
        var(--rye-text);

    background:
        var(--rye-bg) !important;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


/* ============================================================
   04. MAIN STRUCTURE
   ============================================================ */

body:has(.page_index_site)
.pkp_structure {

    background:
        var(--rye-bg) !important;

}


/* ============================================================
   05. PREMIUM HEADER
   ============================================================ */

body:has(.page_index_site)
.pkp_structure_head {

    position:
        relative !important;

    background:
        #ffffff !important;

    border:
        none !important;

    box-shadow:
        0 8px 35px
        rgba(0,0,0,.065) !important;

    z-index:
        100 !important;

}


/* Premium gold line */

body:has(.page_index_site)
.pkp_structure_head::after {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #806016 0%,
            #b18725 18%,
            #d4af37 35%,
            #f0d878 50%,
            #d4af37 65%,
            #b18725 82%,
            #806016 100%
        );

}


/* ============================================================
   06. HEADER CONTAINER
   ============================================================ */

body:has(.page_index_site)
.pkp_head_wrapper {

    position:
        relative !important;

    width:
        100% !important;

    max-width:
        1240px !important;

    height:
        145px !important;

    min-height:
        145px !important;

    margin:
        0 auto !important;

    padding:
        0 25px !important;

    box-sizing:
        border-box !important;

}


/* ============================================================
   07. LOGO WRAPPER
   ============================================================ */

body:has(.page_index_site)
.pkp_site_name_wrapper {

    position:
        static !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        145px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

}


/* ============================================================
   08. RYE LOGO AREA
   ============================================================ */

body:has(.page_index_site)
.pkp_site_name {

    position:
        absolute !important;

    top:
        50% !important;

    left:
        25px !important;

    right:
        25px !important;

    width:
        auto !important;

    height:
        120px !important;

    min-height:
        120px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        translateY(-50%) !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;

    overflow:
        visible !important;

    z-index:
        30 !important;

}


/* ============================================================
   09. LOGO LINK
   ============================================================ */

body:has(.page_index_site)
.pkp_site_name a {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    text-decoration:
        none !important;

}


/* ============================================================
   10. RYE LOGO IMAGE
   ============================================================ */

body:has(.page_index_site)
.pkp_site_name img {

    display:
        block !important;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        720px !important;

    max-height:
        125px !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    filter:
        none !important;

    transition:
        transform .35s ease;

}


/* Subtle logo hover */

body:has(.page_index_site)
.pkp_site_name img:hover {

    transform:
        scale(1.015);

}


/* ============================================================
   11. TEXT BRAND FALLBACK
   ============================================================ */

body:has(.page_index_site)
.pkp_site_name .is_text {

    color:
        var(--rye-text) !important;

    font-size:
        24px !important;

    font-weight:
        800 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

}


/* ============================================================
   12. NAVIGATION LAYER
   ============================================================ */

body:has(.page_index_site)
.pkp_site_nav_menu {

    position:
        absolute !important;

    top:
        0 !important;

    left:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        none !important;

    z-index:
        80 !important;

    pointer-events:
        none;

}


body:has(.page_index_site)
.pkp_site_nav_menu a {

    pointer-events:
        auto;

}


/* ============================================================
   13. PRIMARY NAVIGATION
   ============================================================ */

body:has(.page_index_site)
.pkp_navigation_primary_row {

    position:
        static !important;

    height:
        100% !important;

}


/* ============================================================
   14. PRIMARY NAVIGATION WRAPPER
   ============================================================ */

body:has(.page_index_site)
.pkp_navigation_primary_wrapper {

    position:
        absolute !important;

    top:
        50% !important;

    right:
        245px !important;

    left:
        auto !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        translateY(-50%) !important;

    background:
        transparent !important;

    border:
        none !important;

    z-index:
        90 !important;

}


/* ============================================================
   15. PRIMARY MENU
   ============================================================ */

body:has(.page_index_site)
.pkp_navigation_primary {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        4px;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;

}


/* ============================================================
   16. PRIMARY MENU ITEM
   ============================================================ */

body:has(.page_index_site)
.pkp_navigation_primary > li {

    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

}


/* ============================================================
   17. PRIMARY MENU LINK
   ============================================================ */

body:has(.page_index_site)
.pkp_navigation_primary > li > a {

    position:
        relative;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        40px;

    padding:
        8px 16px !important;

    color:
        #3c3c3c !important;

    background:
        transparent !important;

    border:
        none !important;

    border-radius:
        8px;

    font-size:
        12.5px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap;

    transition:
        all .25s ease;

}


/* Hover */

body:has(.page_index_site)
.pkp_navigation_primary > li > a:hover {

    color:
        var(--rye-gold-dark) !important;

    background:
        var(--rye-gold-pale) !important;

}


/* Gold underline */

body:has(.page_index_site)
.pkp_navigation_primary > li > a::after {

    content:
        "";

    position:
        absolute;

    bottom:
        3px;

    left:
        50%;

    width:
        0;

    height:
        2px;

    border-radius:
        5px;

    background:
        var(--rye-gold);

    transform:
        translateX(-50%);

    transition:
        width .25s ease;

}


body:has(.page_index_site)
.pkp_navigation_primary > li > a:hover::after {

    width:
        55%;

}


/* ============================================================
   18. USER MENU
   ============================================================ */

body:has(.page_index_site)
.pkp_navigation_user_wrapper {

    position:
        absolute !important;

    top:
        50% !important;

    right:
        25px !important;

    left:
        auto !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        translateY(-50%) !important;

    background:
        transparent !important;

    border:
        none !important;

    text-align:
        right !important;

    z-index:
        120 !important;

}


/* User list */

body:has(.page_index_site)
.pkp_navigation_user {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        7px;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;

}


/* User item */

body:has(.page_index_site)
.pkp_navigation_user > li {

    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

}


/* Login/Register */

body:has(.page_index_site)
.pkp_navigation_user > li > a {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        38px;

    padding:
        8px 15px !important;

    color:
        #414141 !important;

    background:
        #ffffff !important;

    border:
        1px solid #d8c99f !important;

    border-radius:
        22px !important;

    font-size:
        11.5px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    white-space:
        nowrap;

    text-decoration:
        none !important;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.035);

    transition:
        all .25s ease;

}


/* Login */

body:has(.page_index_site)
.pkp_navigation_user a[href*="login"] {

    color:
        #454545 !important;

    background:
        #ffffff !important;

}


/* Register */

body:has(.page_index_site)
.pkp_navigation_user a[href*="register"] {

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #ad8220,
            #d4af37
        ) !important;

    border-color:
        #c49a2e !important;

    box-shadow:
        0 5px 15px
        rgba(180,139,37,.20);

}


/* Hover */

body:has(.page_index_site)
.pkp_navigation_user > li > a:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--rye-gold) !important;

}


/* Login hover */

body:has(.page_index_site)
.pkp_navigation_user a[href*="login"]:hover {

    color:
        var(--rye-gold-dark) !important;

    background:
        var(--rye-gold-pale) !important;

}


/* Register hover */

body:has(.page_index_site)
.pkp_navigation_user a[href*="register"]:hover {

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #8d6817,
            #b88f24
        ) !important;

}


/* ============================================================
   19. SEARCH
   ============================================================ */

body:has(.page_index_site)
.pkp_navigation_search_wrapper {

    display:
        none !important;

}


/* ============================================================
   20. MAIN CONTENT
   ============================================================ */

body:has(.page_index_site)
.pkp_structure_content {

    position:
        relative;

    background:
        var(--rye-bg) !important;

    padding:
        60px 25px 85px !important;

}


/* Subtle background decoration */

body:has(.page_index_site)
.pkp_structure_content::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        320px;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.075),
            transparent 60%
        );

}


/* ============================================================
   21. SITE INDEX
   ============================================================ */

body:has(.page_index_site)
.page_index_site {

    position:
        relative;

    z-index:
        2;

    max-width:
        1200px;

    margin:
        0 auto;

}


/* ============================================================
   22. JOURNAL SECTION TITLE
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > h2 {

    position:
        relative;

    margin:
        0 0 48px !important;

    color:
        #242424 !important;

    font-size:
        34px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.8px;

    text-align:
        center !important;

}


/* Small gold label above title */

body:has(.page_index_site)
.page_index_site
.journals > h2::before {

    content:
        "ACADEMIC PUBLISHING";

    display:
        block;

    margin:
        0 0 10px;

    color:
        #aa832b;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


/* Gold line */

body:has(.page_index_site)
.page_index_site
.journals > h2::after {

    content:
        "";

    display:
        block;

    width:
        72px;

    height:
        3px;

    margin:
        16px auto 0;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #9b751d,
            #d4af37,
            #9b751d
        );

}


/* ============================================================
   23. JOURNAL GRID
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul {

    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap:
        30px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;

}


/* ============================================================
   24. PREMIUM JOURNAL CARD
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li {

    position:
        relative;

    display:
        flex !important;

    flex-direction:
        column !important;

    min-height:
        585px;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden;

    background:
        #ffffff !important;

    border:
        1px solid var(--rye-border) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.065);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/* Hover */

body:has(.page_index_site)
.page_index_site
.journals > ul > li:hover {

    transform:
        translateY(-9px);

    border-color:
        var(--rye-gold) !important;

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.13);

}


/* ============================================================
   25. CARD GOLD TOP
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    z-index:
        20;

    background:
        linear-gradient(
            90deg,
            #94701c,
            #c89b3c,
            #f0d46d,
            #c89b3c,
            #94701c
        );

}


/* ============================================================
   26. JOURNAL BADGE
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li::after {

    content:
        "JOURNAL";

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    z-index:
        30;

    padding:
        6px 12px;

    color:
        #806219;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid #d4af37;

    border-radius:
        20px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.12);

}


/* ============================================================
   27. COVER AREA
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.thumb {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        335px;

    padding:
        30px;

    box-sizing:
        border-box;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfaf7 100%
        );

    border-bottom:
        1px solid #eee9de;

}


/* Decorative gold glow */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.thumb::before {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            rgba(212,175,55,0)
        );

    pointer-events:
        none;

}


/* ============================================================
   28. COVER IMAGE
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.thumb img {

    position:
        relative;

    z-index:
        3;

    display:
        block;

    width:
        195px !important;

    height:
        270px !important;

    max-width:
        195px !important;

    object-fit:
        cover !important;

    object-position:
        center center;

    border-radius:
        5px;

    box-shadow:
        0 16px 35px
        rgba(0,0,0,.20);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


/* Cover hover */

body:has(.page_index_site)
.page_index_site
.journals > ul > li:hover
.thumb img {

    transform:
        scale(1.045)
        translateY(-5px)
        rotate(-.8deg);

    box-shadow:
        0 23px 45px
        rgba(0,0,0,.25);

}


/* ============================================================
   29. CARD BODY
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.body {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        21px 22px 23px;

    box-sizing:
        border-box;

}


/* ============================================================
   30. JOURNAL TITLE
   DESKTOP - SMALLER + 4 LINES
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.body h3 {

    display:
        -webkit-box;

    min-height:
        82px;

    max-height:
        82px;

    margin:
        0 0 12px !important;

    padding:
        0 3px !important;

    overflow:
        hidden;

    color:
        #202020 !important;

    font-size:
        14px !important;

    font-weight:
        750 !important;

    line-height:
        1.45 !important;

    text-align:
        center !important;

    letter-spacing:
        -.05px;

    -webkit-line-clamp:
        4;

    -webkit-box-orient:
        vertical;

    overflow-wrap:
        break-word;

}


/* Title link */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.body h3 a {

    display:
        -webkit-box;

    width:
        100%;

    overflow:
        hidden;

    color:
        #202020 !important;

    font-size:
        14px !important;

    font-weight:
        750 !important;

    line-height:
        1.45 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    -webkit-line-clamp:
        4;

    -webkit-box-orient:
        vertical;

}


/* Title hover */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.body h3 a:hover {

    color:
        var(--rye-gold-dark) !important;

}


/* ============================================================
   31. JOURNAL DESCRIPTION
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.description {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        0 0 18px;

    color:
        #737373;

    font-size:
        11.5px;

    line-height:
        1.65;

    text-align:
        center;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;

}


/* ============================================================
   32. BUTTON AREA
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links {

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin:
        auto 0 0 !important;

    padding:
        0 !important;

    list-style:
        none !important;

}


/* ============================================================
   33. BUTTON ITEM
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links li {

    margin:
        0 !important;

    padding:
        0 !important;

}


/* ============================================================
   34. VIEW JOURNAL
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links .view a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        9px 16px;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #b18725,
            #d4af37
        ) !important;

    border:
        1px solid #c49a2e !important;

    border-radius:
        8px;

    font-size:
        11.5px;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none !important;

    box-shadow:
        0 6px 14px
        rgba(180,139,37,.19);

    transition:
        all .25s ease;

}


/* Arrow */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links .view a::before {

    content:
        "↗";

    margin-right:
        7px;

    font-size:
        13px;

    font-weight:
        800;

}


/* View hover */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links .view a:hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #8f6b18,
            #b99127
        ) !important;

    box-shadow:
        0 10px 20px
        rgba(180,139,37,.29);

}


/* ============================================================
   35. CURRENT ISSUE
   ============================================================ */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links .current a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        9px 16px;

    color:
        #80651e !important;

    background:
        #faf7ed !important;

    border:
        1px solid #d7c58f !important;

    border-radius:
        8px;

    font-size:
        11.5px;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none !important;

    transition:
        all .25s ease;

}


/* Icon */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links .current a::before {

    content:
        "▣";

    margin-right:
        7px;

    font-size:
        10px;

}


/* Hover */

body:has(.page_index_site)
.page_index_site
.journals > ul > li
.links .current a:hover {

    color:
        #614c15 !important;

    background:
        #eee4c9 !important;

    transform:
        translateY(-2px);

}


/* ============================================================
   36. FOOTER
   ONLY RUMAH JURNAL
   ============================================================ */

body:has(.page_index_site)
.pkp_structure_footer_wrapper {

    margin-top:
        0 !important;

    background:
        #ffffff !important;

    border:
        none !important;

    box-shadow:
        0 -8px 30px
        rgba(0,0,0,.055);

}


/* Gold line */

body:has(.page_index_site)
.pkp_structure_footer_wrapper::before {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #8f6b18,
            #b18725,
            #d4af37,
            #e7cd72,
            #d4af37,
            #b18725,
            #8f6b18
        );

}


/* Footer container */

body:has(.page_index_site)
.pkp_structure_footer {

    max-width:
        1200px !important;

    margin:
        0 auto !important;

    padding:
        38px 25px 25px !important;

    background:
        #ffffff !important;

    box-sizing:
        border-box;

}


/* Footer content */

body:has(.page_index_site)
.pkp_footer_content {

    color:
        #666666 !important;

    font-size:
        12px;

    line-height:
        1.8;

    text-align:
        center;

}


/* Footer links */

body:has(.page_index_site)
.pkp_footer_content a {

    color:
        #96731f !important;

    text-decoration:
        none !important;

}


body:has(.page_index_site)
.pkp_footer_content a:hover {

    color:
        #c89b3c !important;

}


/* Hide PKP branding ONLY on site index */

body:has(.page_index_site)
.pkp_brand_footer {

    display:
        none !important;

}


/* ============================================================
   37. DESKTOP LARGE
   ============================================================ */

@media (min-width: 1400px) {

    body:has(.page_index_site)
    .pkp_head_wrapper {

        max-width:
            1300px !important;

    }


    body:has(.page_index_site)
    .page_index_site {

        max-width:
            1250px;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul {

        gap:
            34px !important;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li {

        min-height:
            600px;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .thumb {

        min-height:
            345px;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .thumb img {

        width:
            200px !important;

        height:
            280px !important;

        max-width:
            200px !important;

    }

}


/* ============================================================
   38. TABLET
   ============================================================ */

@media (max-width: 1100px) {


    /* Header */

    body:has(.page_index_site)
    .pkp_head_wrapper {

        height:
            125px !important;

        min-height:
            125px !important;

        padding:
            0 20px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name_wrapper {

        min-height:
            125px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name {

        height:
            105px !important;

        min-height:
            105px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name img {

        max-width:
            590px !important;

        max-height:
            105px !important;

    }


    /* Primary menu */

    body:has(.page_index_site)
    .pkp_navigation_primary_wrapper {

        right:
            200px !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_primary > li > a {

        padding:
            7px 10px !important;

        font-size:
            11.5px !important;

    }


    /* User menu */

    body:has(.page_index_site)
    .pkp_navigation_user_wrapper {

        right:
            20px !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_user > li > a {

        min-height:
            35px;

        padding:
            7px 11px !important;

        font-size:
            10.5px !important;

    }


    /* Grid */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:
            25px !important;

    }


    /* Card */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li {

        min-height:
            575px;

    }

}


/* ============================================================
   39. MOBILE
   ============================================================ */

@media (max-width: 700px) {


    /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .pkp_head_wrapper {

        height:
            auto !important;

        min-height:
            205px !important;

        padding:
            0 12px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name_wrapper {

        height:
            115px !important;

        min-height:
            115px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name {

        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        width:
            100% !important;

        height:
            105px !important;

        min-height:
            105px !important;

        padding:
            8px 5px !important;

        margin:
            0 auto !important;

        transform:
            none !important;

        box-sizing:
            border-box !important;

    }


    body:has(.page_index_site)
    .pkp_site_name img {

        width:
            auto !important;

        height:
            auto !important;

        max-width:
            95% !important;

        max-height:
            90px !important;

        object-fit:
            contain !important;

    }


    /* --------------------------------------------------------
       NAVIGATION
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .pkp_site_nav_menu {

        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        height:
            auto !important;

        margin:
            0 !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_primary_wrapper {

        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        transform:
            none !important;

        margin:
            0 !important;

        text-align:
            center !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_primary {

        justify-content:
            center !important;

        flex-wrap:
            wrap !important;

        gap:
            3px !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_primary > li > a {

        min-height:
            34px;

        padding:
            6px 9px !important;

        font-size:
            10.5px !important;

    }


    /* --------------------------------------------------------
       USER MENU
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .pkp_navigation_user_wrapper {

        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        transform:
            none !important;

        margin:
            6px 0 10px !important;

        text-align:
            center !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_user {

        justify-content:
            center !important;

        flex-wrap:
            wrap !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_user > li > a {

        min-height:
            34px;

        padding:
            7px 12px !important;

        font-size:
            10.5px !important;

    }


    /* --------------------------------------------------------
       CONTENT
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .pkp_structure_content {

        padding:
            38px 15px 55px !important;

    }


    /* Heading */

    body:has(.page_index_site)
    .page_index_site
    .journals > h2 {

        font-size:
            27px !important;

        margin:
            0 0 32px !important;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > h2::before {

        font-size:
            8px;

        letter-spacing:
            1.6px;

    }


    /* --------------------------------------------------------
       GRID
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul {

        grid-template-columns:
            1fr !important;

        gap:
            22px !important;

    }


    /* --------------------------------------------------------
       CARD
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li {

        min-height:
            545px;

        border-radius:
            16px !important;

    }


    /* --------------------------------------------------------
       COVER
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .thumb {

        min-height:
            295px;

        padding:
            25px;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .thumb img {

        width:
            170px !important;

        height:
            235px !important;

        max-width:
            170px !important;

    }


    /* --------------------------------------------------------
       CARD BODY
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .body {

        padding:
            20px;

    }


    /* --------------------------------------------------------
       TITLE MOBILE
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .body h3 {

        min-height:
            72px;

        max-height:
            72px;

        font-size:
            15px !important;

        line-height:
            1.45 !important;

        -webkit-line-clamp:
            3;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .body h3 a {

        font-size:
            15px !important;

        -webkit-line-clamp:
            3;

    }


    /* --------------------------------------------------------
       DESCRIPTION
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .description {

        font-size:
            11.5px;

    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    body:has(.page_index_site)
    .pkp_structure_footer {

        padding:
            32px 18px 20px !important;

    }

}


/* ============================================================
   40. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {


    /* Header */

    body:has(.page_index_site)
    .pkp_head_wrapper {

        min-height:
            185px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name_wrapper {

        height:
            95px !important;

        min-height:
            95px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name {

        height:
            90px !important;

        min-height:
            90px !important;

        padding:
            5px !important;

    }


    body:has(.page_index_site)
    .pkp_site_name img {

        max-width:
            96% !important;

        max-height:
            78px !important;

    }


    /* Navigation */

    body:has(.page_index_site)
    .pkp_navigation_primary > li > a {

        min-height:
            32px;

        padding:
            5px 7px !important;

        font-size:
            10px !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_user > li > a {

        min-height:
            32px;

        padding:
            6px 10px !important;

        font-size:
            10px !important;

    }


    /* Content */

    body:has(.page_index_site)
    .pkp_structure_content {

        padding:
            32px 12px 45px !important;

    }


    /* Heading */

    body:has(.page_index_site)
    .page_index_site
    .journals > h2 {

        font-size:
            24px !important;

    }


    /* Card */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li {

        min-height:
            525px;

    }


    /* Cover */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .thumb {

        min-height:
            280px;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .thumb img {

        width:
            160px !important;

        height:
            220px !important;

        max-width:
            160px !important;

    }


    /* Title */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .body h3 {

        font-size:
            14.5px !important;

        min-height:
            70px;

        max-height:
            70px;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .body h3 a {

        font-size:
            14.5px !important;

    }


    /* Buttons */

    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .links {

        flex-direction:
            column;

        width:
            100%;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .links li {

        width:
            100%;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .links a {

        width:
            100%;

        box-sizing:
            border-box;

    }

}


/* ============================================================
   41. EXTRA SMALL DEVICE
   ============================================================ */

@media (max-width: 360px) {


    body:has(.page_index_site)
    .pkp_site_name img {

        max-width:
            94% !important;

        max-height:
            68px !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_primary > li > a {

        padding:
            4px 6px !important;

        font-size:
            9.5px !important;

    }


    body:has(.page_index_site)
    .pkp_navigation_user > li > a {

        padding:
            5px 8px !important;

        font-size:
            9.5px !important;

    }


    body:has(.page_index_site)
    .page_index_site
    .journals > ul > li
    .body h3 {

        font-size:
            14px !important;

    }

}


/* ============================================================
   42. ACCESSIBILITY / FOCUS
   ============================================================ */

body:has(.page_index_site)
a:focus-visible {

    outline:
        2px solid var(--rye-gold) !important;

    outline-offset:
        3px !important;

}


/* ============================================================
   43. FINAL PROTECTION
   ============================================================ */

/*
   DO NOT ADD GLOBAL SELECTORS BELOW THIS POINT.

   GOOD:

       body:has(.page_index_site)
       .pkp_site_name img

   BAD:

       .pkp_site_name img

   GOOD:

       body:has(.page_index_site)
       .pkp_navigation_user

   BAD:

       .pkp_navigation_user

   This prevents the Rumah Jurnal design from affecting
   individual journals.
*/


/* ============================================================
   END
   ============================================================ */