/* =========================================================
   DELI HUSADA OJS
   MODERN GRADIENT + ANIMATION
   LOGO UTUH + MOBILE RESPONSIVE
   OJS 3.3 MOBILE MENU
   LOGIN MODERN
   MENU ANIMATION
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {
    --dh-green-dark: #0f3d24;
    --dh-green: #166534;
    --dh-green2: #16a34a;
    --dh-green3: #22c55e;
    --dh-lime: #84cc16;
    --dh-yellow: #facc15;

    --dh-blue: #0ea5e9;
    --dh-cyan: #06b6d4;
    --dh-purple: #7c3aed;

    --dh-dark: #123524;
    --dh-text: #263238;
    --dh-white: #ffffff;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    max-width: 100%;
}

body {
    margin: 0;

    color: var(--dh-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.75;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(134,239,172,.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 10%,
            rgba(125,211,252,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(190,242,100,.12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #f6fff8 0%,
            #ffffff 50%,
            #f5fbff 100%
        );
}


/* =========================================================
   LINK
   ========================================================= */

a {
    color: var(--dh-green);

    transition:
        color .25s ease,
        transform .25s ease;
}

a:hover {
    color: var(--dh-blue);
    text-decoration: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.pkp_structure_head {
    position: relative;

    width: 100%;

    overflow: visible !important;

    background:
        linear-gradient(
            120deg,
            #0f3d24 0%,
            #166534 15%,
            #16a34a 30%,
            #22c55e 45%,
            #84cc16 60%,
            #facc15 72%,
            #22c55e 85%,
            #166534 100%
        ) !important;

    background-size: 400% 400% !important;

    animation:
        dhHeaderGradient
        12s
        ease
        infinite;

    box-shadow:
        0 7px 25px
        rgba(22,101,52,.22);

    z-index: 1000;
}


/* =========================================================
   HEADER GRADIENT
   ========================================================= */

@keyframes dhHeaderGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================================================
   HEADER CIRCLE
   ========================================================= */

.pkp_structure_head::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -170px;
    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.20),
            rgba(255,255,255,.02)
        );

    animation:
        dhBubbleOne
        9s
        ease-in-out
        infinite;

    pointer-events: none;

    z-index: 0;
}


.pkp_structure_head::after {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -120px;
    bottom: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.15),
            rgba(255,255,255,.02)
        );

    animation:
        dhBubbleTwo
        11s
        ease-in-out
        infinite;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   BUBBLE ANIMATION
   ========================================================= */

@keyframes dhBubbleOne {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(-35px,30px)
            scale(1.12);
    }
}


@keyframes dhBubbleTwo {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(35px,-25px)
            scale(1.12);
    }
}


/* =========================================================
   HEADER WRAPPER
   ========================================================= */

.pkp_head_wrapper {
    position: relative;

    z-index: 1001;

    overflow: visible !important;
}


/* =========================================================
   LOGO AREA
   ========================================================= */

.pkp_site_name {

    position: relative;

    z-index: 1005;

    width: 100% !important;

    margin: 0 !important;

    padding:
        6px 15px !important;

    box-sizing:
        border-box !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        visible !important;
}


/* =========================================================
   LOGO LINK
   ========================================================= */

.pkp_site_name a {

    display:
        flex !important;

    width:
        100% !important;

    height:
        auto !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        visible !important;

    color:
        #fff !important;

    text-decoration:
        none !important;
}


/* =========================================================
   LOGO GAMBAR UTUH
   ========================================================= */

.pkp_site_name img {

    display:
        block !important;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        90% !important;

    max-height:
        68px !important;

    min-width:
        0 !important;

    margin:
        0 auto !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    flex:
        0 1 auto !important;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(0,0,0,.16)
        );

    animation:
        dhLogoFloat
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   LOGO FLOAT
   ========================================================= */

@keyframes dhLogoFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-3px);
    }
}


/* =========================================================
   LOGO HOVER
   ========================================================= */

.pkp_site_name a:hover img {

    filter:
        drop-shadow(
            0 8px 15px
            rgba(0,0,0,.23)
        )
        drop-shadow(
            0 0 12px
            rgba(255,255,255,.25)
        );

    transform:
        scale(1.015);
}


/* =========================================================
   DESKTOP LOGO
   ========================================================= */

@media screen and (min-width:769px) {

    .pkp_site_name {

        min-height:
            80px !important;

        max-height:
            82px !important;
    }


    .pkp_site_name img {

        max-height:
            66px !important;

        max-width:
            760px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width:769px)
and (max-width:1200px) {

    .pkp_site_name {

        min-height:
            74px !important;

        max-height:
            76px !important;
    }


    .pkp_site_name img {

        max-height:
            60px !important;

        max-width:
            88% !important;
    }
}


/* =========================================================
   =========================================================
   MENU UTAMA DESKTOP
   =========================================================
   ========================================================= */

.pkp_navigation_primary,
.pkp_navigation_user {

    position:
        relative;

    z-index:
        1010;
}


/* =========================================================
   SETIAP ITEM MENU
   ========================================================= */

.pkp_navigation_primary > li {

    position:
        relative;

    isolation:
        isolate;
}


/* =========================================================
   MENU LINK
   ========================================================= */

.pkp_navigation_primary > li > a {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px 14px !important;

    margin:
        2px !important;

    border-radius:
        11px !important;

    color:
        #ffffff !important;

    font-weight:
        650;

    text-decoration:
        none !important;

    background:
        transparent !important;

    transition:
        color .28s ease,
        background .28s ease,
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        text-shadow .28s ease;

    will-change:
        transform;
}


/* =========================================================
   GARIS ANIMASI DI BAWAH MENU
   ========================================================= */

.pkp_navigation_primary > li > a::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        3px;

    width:
        0;

    height:
        3px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #fff700,
            #84cc16,
            #22c55e
        );

    background-size:
        250% 100%;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 7px
        rgba(255,255,255,.85),
        0 0 15px
        rgba(255,235,59,.65);

    opacity:
        0;

    transition:
        width .35s cubic-bezier(.2,.8,.2,1),
        opacity .25s ease;
}


/* =========================================================
   CAHAYA DI BELAKANG SETIAP MENU
   ========================================================= */

.pkp_navigation_primary > li::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        20px;

    height:
        20px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.30) 0%,
            rgba(255,235,59,.18) 35%,
            transparent 72%
        );

    transform:
        translate(-50%,-50%)
        scale(.2);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        opacity .35s ease;

    z-index:
        0;
}


/* =========================================================
   HOVER MENU
   ========================================================= */

.pkp_navigation_primary > li:hover::before {

    transform:
        translate(-50%,-50%)
        scale(6);

    opacity:
        1;
}


.pkp_navigation_primary > li > a:hover {

    color:
        #fff700 !important;

    background:
        rgba(255,255,255,.14) !important;

    transform:
        translateY(-3px)
        scale(1.025);

    text-shadow:
        0 0 5px rgba(255,255,255,.8),
        0 0 12px rgba(255,235,59,.85),
        0 0 20px rgba(255,193,7,.55);

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.12);
}


.pkp_navigation_primary > li > a:hover::after {

    width:
        68%;

    opacity:
        1;
}


/* =========================================================
   MENU AKTIF
   ========================================================= */

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {

    color:
        #fff700 !important;

    background:
        rgba(255,255,255,.17) !important;

    text-shadow:
        0 0 6px rgba(255,255,255,.8),
        0 0 14px rgba(255,235,59,.65);
}


.pkp_navigation_primary > li.current > a::after,
.pkp_navigation_primary > li > a[aria-current="page"]::after {

    width:
        58%;

    opacity:
        1;
}


/* =========================================================
   EFEK SAAT DITEKAN
   ========================================================= */

.pkp_navigation_primary > li > a:active {

    transform:
        translateY(0)
        scale(.97);

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.15);
}


/* =========================================================
   FOCUS KEYBOARD
   ========================================================= */

.pkp_navigation_primary > li > a:focus-visible {

    outline:
        none !important;

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.35),
        0 0 0 6px
        rgba(132,204,22,.35);
}


/* =========================================================
   USER MENU
   ========================================================= */

.pkp_navigation_user > li {

    position:
        relative;
}


.pkp_navigation_user > li > a {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    color:
        #ffffff !important;

    font-weight:
        600;

    border-radius:
        9px;

    transition:
        color .28s ease,
        background .28s ease,
        transform .28s ease,
        text-shadow .28s ease;
}


.pkp_navigation_user > li > a:hover {

    color:
        #fff700 !important;

    background:
        rgba(255,255,255,.13) !important;

    transform:
        translateY(-2px);

    text-shadow:
        0 0 6px rgba(255,255,255,.8),
        0 0 14px rgba(255,235,59,.75);
}


/* =========================================================
   LOGIN / REGISTER MENU
   ========================================================= */

.pkp_navigation_user > li > a::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        1px;

    width:
        0;

    height:
        2px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #fff700
        );

    transform:
        translateX(-50%);

    transition:
        width .3s ease;
}


.pkp_navigation_user > li > a:hover::after {

    width:
        60%;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.pkp_structure_content {

    background:
        transparent !important;
}


.pkp_structure_main {

    padding-top:
        30px;

    padding-bottom:
        50px;
}


/* =========================================================
   ABOUT
   ========================================================= */

.pkp_page_index .about {

    position:
        relative;

    overflow:
        hidden;

    padding:
        28px !important;

    border-radius:
        20px;

    border:
        1px solid
        rgba(34,197,94,.15);

    background:
        linear-gradient(
            135deg,
            rgba(220,252,231,.96),
            rgba(239,246,255,.96),
            rgba(254,249,195,.88),
            rgba(220,252,231,.96)
        );

    background-size:
        300% 300%;

    animation:
        dhAboutGradient
        12s
        ease
        infinite;

    box-shadow:
        0 15px 40px
        rgba(22,101,52,.10);
}


@keyframes dhAboutGradient {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }
}


/* =========================================================
   ABOUT DECORATION
   ========================================================= */

.pkp_page_index .about::after {

    content:
        "";

    position:
        absolute;

    width:
        110px;

    height:
        110px;

    right:
        -45px;

    bottom:
        -45px;

    border-radius:
        50%;

    background:
        rgba(34,197,94,.10);

    animation:
        dhAboutBubble
        8s
        ease-in-out
        infinite;

    pointer-events:
        none;
}


@keyframes dhAboutBubble {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.35)
            translate(-12px,-12px);
    }
}


/* =========================================================
   ARTICLE CARD
   ========================================================= */

.obj_article_summary,
.obj_issue_summary,
.pkp_block,
.current_issue,
.obj_issue_toc {

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

    border:
        1px solid
        rgba(22,101,52,.10);

    border-radius:
        18px;

    box-shadow:
        0 10px 30px
        rgba(22,101,52,.08);
}


.obj_article_summary {

    padding:
        23px !important;

    margin-bottom:
        20px !important;

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


.obj_article_summary:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(34,197,94,.25);

    box-shadow:
        0 20px 45px
        rgba(22,101,52,.16);
}


.obj_article_summary .title a,
.obj_issue_summary .title a {

    color:
        var(--dh-green);

    font-weight:
        700;
}


.obj_article_summary .title a:hover,
.obj_issue_summary .title a:hover {

    color:
        var(--dh-blue);
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4 {

    color:
        var(--dh-dark);

    font-weight:
        700;
}


/* =========================================================
   TITLE LINE
   ========================================================= */

.page_title::after,
.current_issue_title::after {

    content:
        "";

    display:
        block;

    width:
        75px;

    height:
        4px;

    margin-top:
        9px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #166534,
            #22c55e,
            #84cc16,
            #facc15,
            #0ea5e9
        );

    background-size:
        250% 100%;

    animation:
        dhTitleLine
        4s
        linear
        infinite;
}


@keyframes dhTitleLine {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            250% 0;
    }
}


/* =========================================================
   BUTTON
   ========================================================= */

.pkp_button,
a.pkp_button {

    position:
        relative;

    overflow:
        hidden;

    border:
        0 !important;

    border-radius:
        12px !important;

    color:
        #fff !important;

    font-weight:
        700;

    background:
        linear-gradient(
            135deg,
            #166534,
            #16a34a,
            #22c55e,
            #65a30d
        ) !important;

    background-size:
        180% 180% !important;

    box-shadow:
        0 8px 20px
        rgba(22,101,52,.18);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease,
        background-position .4s ease;
}


.pkp_button::before,
a.pkp_button::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        70%;

    height:
        100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .65s ease;

    pointer-events:
        none;
}


.pkp_button:hover,
a.pkp_button:hover {

    transform:
        translateY(-3px)
        scale(1.015);

    filter:
        brightness(1.04);

    background-position:
        100% 50% !important;

    box-shadow:
        0 14px 30px
        rgba(22,101,52,.25);
}


.pkp_button:hover::before,
a.pkp_button:hover::before {

    left:
        150%;
}


.pkp_button:active,
a.pkp_button:active {

    transform:
        translateY(1px)
        scale(.985);

    box-shadow:
        0 5px 12px
        rgba(22,101,52,.18);
}


/* =========================================================
   IMAGES
   ========================================================= */

img {
    max-width:
        100%;
}


.pkp_page_index .homepage_image img,
.obj_issue_summary .cover img {

    border-radius:
        16px;

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

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.pkp_page_index .homepage_image img:hover,
.obj_issue_summary .cover img:hover {

    transform:
        scale(1.025)
        translateY(-2px);

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


/* =========================================================
   SIDEBAR
   ========================================================= */

.pkp_block {

    padding:
        20px !important;

    margin-bottom:
        20px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.pkp_block:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(22,101,52,.13);
}


.pkp_block .title {

    color:
        var(--dh-green);

    font-weight:
        700;

    padding-bottom:
        10px;

    border-bottom:
        3px solid transparent;

    border-image:
        linear-gradient(
            90deg,
            #166534,
            #22c55e,
            #facc15
        ) 1;
}


/* =========================================================
   FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper {

    position:
        relative;

    overflow:
        hidden;

    color:
        #ecfdf5 !important;

    background:
        linear-gradient(
            120deg,
            #0f3d24,
            #166534,
            #0f766e,
            #075985,
            #166534
        ) !important;

    background-size:
        400% 400% !important;

    animation:
        dhFooterGradient
        14s
        ease
        infinite;
}


@keyframes dhFooterGradient {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


.pkp_structure_footer_wrapper a {

    color:
        #d9f99d !important;
}


.pkp_structure_footer_wrapper a:hover {

    color:
        #ffffff !important;
}


/* =========================================================
   LOGIN PAGE
   ========================================================= */

body.pkp_page_login {

    min-height:
        100vh !important;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(132,204,22,.30),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(250,204,21,.28),
            transparent 25%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(22,163,74,.25),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f0fdf4 0%,
            #dcfce7 35%,
            #ecfccb 65%,
            #fef9c3 100%
        ) !important;

    background-attachment:
        fixed !important;
}


body.pkp_page_login::before,
body.pkp_page_login::after {

    content:
        "";

    position:
        fixed;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        0;
}


body.pkp_page_login::before {

    width:
        320px;

    height:
        320px;

    top:
        -120px;

    left:
        -100px;

    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.20),
            rgba(132,204,22,.12)
        );

    filter:
        blur(5px);

    animation:
        dhLoginBubbleOne
        8s
        ease-in-out
        infinite;
}


body.pkp_page_login::after {

    width:
        380px;

    height:
        380px;

    right:
        -140px;

    bottom:
        -150px;

    background:
        linear-gradient(
            135deg,
            rgba(250,204,21,.20),
            rgba(34,197,94,.14)
        );

    filter:
        blur(5px);

    animation:
        dhLoginBubbleTwo
        10s
        ease-in-out
        infinite;
}


/* =========================================================
   LOGIN CONTAINER
   ========================================================= */

.pkp_page_login .page_login {

    position:
        relative !important;

    z-index:
        5 !important;

    width:
        100% !important;

    max-width:
        520px !important;

    margin:
        50px auto 70px auto !important;

    padding:
        0 20px !important;

    box-sizing:
        border-box !important;
}


.pkp_page_login .page_login form {

    position:
        relative !important;

    width:
        100% !important;

    box-sizing:
        border-box !important;

    padding:
        38px 38px 35px !important;

    background:
        rgba(255,255,255,.90) !important;

    border:
        1px solid
        rgba(255,255,255,.80) !important;

    border-radius:
        24px !important;

    box-shadow:
        0 25px 60px
        rgba(22,101,52,.18),
        0 8px 25px
        rgba(0,0,0,.08) !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;

    overflow:
        hidden !important;

    animation:
        dhLoginCard
        .8s
        ease
        both;
}


.pkp_page_login .page_login form::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        6px;

    background:
        linear-gradient(
            90deg,
            #166534,
            #16a34a,
            #84cc16,
            #facc15,
            #16a34a,
            #166534
        );

    background-size:
        300% 100%;

    animation:
        dhLoginGradient
        6s
        linear
        infinite;
}


.pkp_page_login .page_login h1 {

    position:
        relative;

    margin:
        0 0 30px !important;

    color:
        #14532d !important;

    font-size:
        30px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    text-align:
        center !important;
}


.pkp_page_login .page_login h1::after {

    content:
        "";

    display:
        block;

    width:
        70px;

    height:
        4px;

    margin:
        12px auto 0;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #166534,
            #84cc16,
            #facc15
        );

    animation:
        dhLoginLine
        3s
        ease-in-out
        infinite;
}


.pkp_page_login .page_login label {

    display:
        block !important;

    margin-bottom:
        8px !important;

    color:
        #166534 !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


.pkp_page_login .page_login input[type="text"],
.pkp_page_login .page_login input[type="email"],
.pkp_page_login .page_login input[type="password"] {

    width:
        100% !important;

    min-height:
        48px !important;

    box-sizing:
        border-box !important;

    padding:
        12px 15px !important;

    color:
        #16351f !important;

    background:
        rgba(255,255,255,.96) !important;

    border:
        1.5px solid
        #d1fae5 !important;

    border-radius:
        12px !important;

    outline:
        none !important;

    font-size:
        15px !important;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        background .25s ease !important;
}


.pkp_page_login .page_login input[type="text"]:focus,
.pkp_page_login .page_login input[type="email"]:focus,
.pkp_page_login .page_login input[type="password"]:focus {

    border-color:
        #22c55e !important;

    background:
        #fff !important;

    box-shadow:
        0 0 0 4px
        rgba(34,197,94,.12),
        0 8px 20px
        rgba(22,101,52,.08) !important;

    transform:
        translateY(-1px);
}


.pkp_page_login .page_login input::placeholder {

    color:
        #94a3b8 !important;
}


.pkp_page_login .page_login .fields {

    margin-bottom:
        20px !important;
}


.pkp_page_login .page_login input[type="checkbox"] {

    accent-color:
        #16a34a !important;
}


.pkp_page_login .page_login .remember {

    color:
        #64748b !important;

    font-size:
        13px !important;
}


.pkp_page_login .page_login a {

    color:
        #15803d !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;

    transition:
        color .2s ease,
        opacity .2s ease;
}


.pkp_page_login .page_login a:hover {

    color:
        #65a30d !important;

    text-decoration:
        underline !important;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.pkp_page_login .page_login button,
.pkp_page_login .page_login input[type="submit"] {

    position:
        relative !important;

    width:
        100% !important;

    min-height:
        52px !important;

    margin-top:
        12px !important;

    padding:
        13px 20px !important;

    overflow:
        hidden !important;

    border:
        0 !important;

    border-radius:
        14px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #14532d,
            #166534,
            #16a34a,
            #65a30d
        ) !important;

    background-size:
        180% 180% !important;

    box-shadow:
        0 8px 18px
        rgba(22,101,52,.20) !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    cursor:
        pointer !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease,
        background-position .4s ease !important;
}


.pkp_page_login .page_login button:hover,
.pkp_page_login .page_login input[type="submit"]:hover {

    transform:
        translateY(-3px) !important;

    filter:
        brightness(1.05) !important;

    background-position:
        100% 50% !important;

    box-shadow:
        0 14px 28px
        rgba(22,101,52,.28) !important;
}


.pkp_page_login .page_login button:active,
.pkp_page_login .page_login input[type="submit"]:active {

    transform:
        translateY(1px)
        scale(.985) !important;
}


/* =========================================================
   LOGIN ERROR
   ========================================================= */

.pkp_page_login .page_login .pkp_form_error,
.pkp_page_login .page_login .form_error {

    padding:
        11px 14px !important;

    margin-bottom:
        18px !important;

    color:
        #991b1b !important;

    background:
        rgba(254,226,226,.92) !important;

    border:
        1px solid
        #fecaca !important;

    border-radius:
        10px !important;

    font-size:
        13px !important;
}


/* =========================================================
   LOGIN ANIMATION
   ========================================================= */

@keyframes dhLoginCard {

    from {
        opacity:
            0;

        transform:
            translateY(25px)
            scale(.98);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes dhLoginGradient {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }
}


@keyframes dhLoginLine {

    0%,
    100% {
        width:
            55px;

        opacity:
            .8;
    }

    50% {
        width:
            90px;

        opacity:
            1;
    }
}


@keyframes dhLoginBubbleOne {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(35px,25px)
            scale(1.08);
    }
}


@keyframes dhLoginBubbleTwo {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(-30px,-25px)
            scale(1.06);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width:768px) {

    html,
    body {

        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            hidden !important;
    }


    /* HEADER */

    .pkp_structure_head {

        width:
            100% !important;

        max-width:
            100% !important;

        min-height:
            64px !important;

        height:
            auto !important;

        overflow:
            visible !important;

        position:
            relative !important;

        z-index:
            10000 !important;
    }


    .pkp_head_wrapper {

        position:
            relative !important;

        width:
            100% !important;

        min-height:
            64px !important;

        overflow:
            visible !important;

        z-index:
            10001 !important;
    }


    /* LOGO */

    .pkp_site_name {

        width:
            100% !important;

        height:
            64px !important;

        min-height:
            64px !important;

        padding:
            4px 58px !important;

        box-sizing:
            border-box !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        overflow:
            hidden !important;
    }


    .pkp_site_name a {

        width:
            100% !important;

        height:
            100% !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        overflow:
            hidden !important;
    }


    .pkp_site_name img {

        max-width:
            100% !important;

        max-height:
            52px !important;

        object-fit:
            contain !important;

        animation:
            dhMobileLogo
            5s
            ease-in-out
            infinite;
    }


    @keyframes dhMobileLogo {

        0%,
        100% {
            transform:
                translateY(0);
        }

        50% {
            transform:
                translateY(-2px);
        }
    }


    /* HAMBURGER */

    .pkp_site_nav_toggle {

        position:
            absolute !important;

        left:
            8px !important;

        top:
            50% !important;

        transform:
            translateY(-50%) !important;

        width:
            42px !important;

        height:
            42px !important;

        min-width:
            42px !important;

        min-height:
            42px !important;

        padding:
            0 !important;

        margin:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        border:
            1px solid
            rgba(255,255,255,.25) !important;

        border-radius:
            11px !important;

        background:
            rgba(15,61,36,.65) !important;

        color:
            #fff !important;

        z-index:
            999999 !important;

        backdrop-filter:
            blur(5px);

        transition:
            background .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
    }


    .pkp_site_nav_toggle:hover {

        background:
            rgba(255,255,255,.20) !important;

        box-shadow:
            0 7px 18px
            rgba(0,0,0,.25) !important;
    }


    .pkp_site_nav_toggle[aria-expanded="true"] {

        background:
            rgba(255,255,255,.22) !important;

        border-color:
            rgba(255,255,255,.4) !important;
    }


    .pkp_site_nav_toggle .fa,
    .pkp_site_nav_toggle .fa-bars,
    .pkp_site_nav_toggle i {

        color:
            #fff !important;

        font-size:
            20px !important;

        pointer-events:
            none !important;
    }


    /* =====================================================
       MOBILE MENU
       ===================================================== */

    .pkp_site_nav_menu {

        position:
            relative !important;

        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;

        z-index:
            99998 !important;

        overflow:
            visible !important;

        background:
            linear-gradient(
                135deg,
                #0f3d24,
                #166534,
                #16a34a,
                #22c55e
            ) !important;

        background-size:
            250% 250% !important;

        animation:
            dhMobileMenuGradient
            9s
            ease
            infinite !important;

        box-shadow:
            0 12px 30px
            rgba(15,61,36,.25) !important;

        border-radius:
            0 0 16px 16px !important;
    }


    @keyframes dhMobileMenuGradient {

        0% {
            background-position:
                0% 50%;
        }

        50% {
            background-position:
                100% 50%;
        }

        100% {
            background-position:
                0% 50%;
        }
    }


    .pkp_navigation_primary_wrapper {

        width:
            100% !important;

        overflow:
            visible !important;
    }


    .pkp_navigation_primary {

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    /* =====================================================
       SETIAP MENU MOBILE
       ===================================================== */

    .pkp_navigation_primary > li {

        width:
            100% !important;

        position:
            relative;

        overflow:
            hidden;
    }


    .pkp_navigation_primary > li > a {

        display:
            flex !important;

        width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            14px 18px !important;

        margin:
            0 !important;

        border-radius:
            0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.14) !important;

        color:
            #ffffff !important;

        background:
            transparent !important;

        font-weight:
            600 !important;

        transition:
            color .25s ease,
            background .25s ease,
            padding-left .3s ease,
            box-shadow .25s ease;
    }


    .pkp_navigation_primary > li > a::after {

        display:
            none;
    }


    .pkp_navigation_primary > li::before {

        display:
            block;

        left:
            0;

        top:
            50%;

        width:
            5px;

        height:
            0;

        border-radius:
            0 8px 8px 0;

        transform:
            translateY(-50%);

        background:
            linear-gradient(
                180deg,
                #fff700,
                #84cc16
            );

        transition:
            height .3s ease;

        opacity:
            1;
    }


    .pkp_navigation_primary > li:hover::before {

        width:
            5px;

        height:
            70%;
    }


    .pkp_navigation_primary > li > a:hover {

        padding-left:
            26px !important;

        color:
            #fff700 !important;

        background:
            rgba(255,255,255,.13) !important;

        text-shadow:
            0 0 7px
            rgba(255,235,59,.75);

        transform:
            none;
    }


    .pkp_navigation_primary > li.current > a {

        color:
            #fff700 !important;

        background:
            rgba(255,255,255,.17) !important;
    }


    /* USER MENU */

    .pkp_navigation_user_wrapper {

        width:
            100% !important;

        background:
            transparent !important;

        overflow:
            visible !important;
    }


    .pkp_navigation_user > li > a {

        color:
            #fff !important;

        transition:
            color .25s ease,
            background .25s ease,
            transform .25s ease;
    }


    .pkp_navigation_user > li > a:hover {

        color:
            #fff700 !important;

        background:
            rgba(255,255,255,.12) !important;

        transform:
            translateY(-1px);
    }


    /* CONTENT */

    .pkp_structure_main {

        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            18px 10px 35px !important;
    }


    .page,
    .pkp_page_index {

        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    .pkp_page_index .about {

        width:
            100% !important;

        padding:
            20px 16px !important;

        box-sizing:
            border-box !important;

        border-radius:
            16px;

        font-size:
            14px;
    }


    .obj_article_summary,
    .obj_issue_summary,
    .pkp_block {

        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            17px !important;

        margin-bottom:
            16px !important;

        border-radius:
            14px;
    }


    .homepage_image,
    .obj_issue_summary .cover {

        width:
            100% !important;

        text-align:
            center;
    }


    .homepage_image img,
    .obj_issue_summary .cover img {

        max-width:
            100% !important;

        height:
            auto !important;
    }


    p,
    li,
    td,
    th,
    a {

        overflow-wrap:
            anywhere;
    }


    table {

        display:
            block;

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            auto;

        white-space:
            nowrap;
    }


    h1 {

        font-size:
            25px;

        line-height:
            1.3;
    }


    h2 {

        font-size:
            21px;

        line-height:
            1.35;
    }


    h3 {

        font-size:
            18px;
    }


    /* LOGIN MOBILE */

    .pkp_page_login .page_login {

        max-width:
            500px !important;

        margin:
            35px auto 50px auto !important;

        padding:
            0 18px !important;
    }


    .pkp_page_login .page_login form {

        padding:
            32px 28px 30px !important;

        border-radius:
            20px !important;
    }


    .pkp_page_login .page_login h1 {

        font-size:
            26px !important;

        margin-bottom:
            25px !important;
    }


    .pkp_structure_footer_wrapper {

        text-align:
            center;
    }
}


/* =========================================================
   MOBILE 480
   ========================================================= */

@media screen and (max-width:480px) {

    .pkp_structure_head {

        min-height:
            58px !important;
    }


    .pkp_head_wrapper {

        min-height:
            58px !important;
    }


    .pkp_site_name {

        height:
            58px !important;

        min-height:
            58px !important;

        padding:
            4px 50px !important;
    }


    .pkp_site_name img {

        max-height:
            46px !important;
    }


    .pkp_site_nav_toggle {

        left:
            6px !important;

        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px !important;

        min-height:
            40px !important;
    }


    .pkp_structure_main {

        padding:
            14px 8px 30px !important;
    }


    .pkp_page_index .about {

        padding:
            17px 14px !important;

        font-size:
            13.5px;
    }


    .pkp_page_login .page_login {

        margin:
            25px auto 40px auto !important;

        padding:
            0 14px !important;
    }


    .pkp_page_login .page_login form {

        padding:
            30px 20px 25px !important;

        border-radius:
            18px !important;
    }


    .pkp_page_login .page_login h1 {

        font-size:
            23px !important;
    }


    .pkp_page_login .page_login input[type="text"],
    .pkp_page_login .page_login input[type="email"],
    .pkp_page_login .page_login input[type="password"] {

        min-height:
            46px !important;

        font-size:
            14px !important;
    }


    .pkp_page_login .page_login button,
    .pkp_page_login .page_login input[type="submit"] {

        min-height:
            50px !important;

        font-size:
            14px !important;
    }
}


/* =========================================================
   MOBILE 360
   ========================================================= */

@media screen and (max-width:360px) {

    .pkp_structure_head {

        min-height:
            54px !important;
    }


    .pkp_head_wrapper {

        min-height:
            54px !important;
    }


    .pkp_site_name {

        height:
            54px !important;

        min-height:
            54px !important;

        padding:
            3px 44px !important;
    }


    .pkp_site_name img {

        max-height:
            41px !important;
    }


    .pkp_site_nav_toggle {

        left:
            5px !important;

        width:
            36px !important;

        height:
            36px !important;

        min-width:
            36px !important;

        min-height:
            36px !important;
    }


    .pkp_page_login .page_login {

        padding:
            0 10px !important;
    }


    .pkp_page_login .page_login form {

        padding:
            26px 16px 22px !important;

        border-radius:
            16px !important;
    }


    .pkp_page_login .page_login h1 {

        font-size:
            21px !important;
    }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }
}