/* =========================================================
   JEAIBI - PREMIUM INTERNATIONAL JOURNAL THEME
   Modern Academic + Innovation Design
   Final Refined Version
========================================================= */

/* ===============================
   IMPORT FONT
=============================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ===============================
   ROOT COLORS
=============================== */
:root {

    /* MAIN COLORS */
    --navy-dark: #071426;
    --navy-soft: #0d1b34;

    /* GRADIENT */
    --gradient-main:
        linear-gradient(
            135deg,
            #1B6BFF 0%,
            #12C6FF 35%,
            #6C63FF 70%,
            #D946EF 100%
        );

    /* TEXT */
    --text-main: #dbe8ff;
    --text-soft: #9db5d1;
    --text-dark: #10213d;

    /* UI */
    --card-bg: #ffffff;
    --border-soft: rgba(255,255,255,0.08);

    /* SHADOW */
    --shadow-soft:
        0 8px 25px rgba(0,0,0,0.08);

    --shadow-strong:
        0 12px 40px rgba(0,0,0,0.18);
}

/* ===============================
   GENERAL BODY
=============================== */
body {

    font-family: 'Plus Jakarta Sans', sans-serif;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #eef5ff 100%
        );

    color: #243b55;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    line-height: 1.7;
}

/* ===============================
   SMOOTH SCROLL
=============================== */
html {
    scroll-behavior: smooth;
}

/* ===============================
   NAVBAR
=============================== */
.navbar {

    background:
        rgba(7, 20, 38, 0.92);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid rgba(255,255,255,0.06);

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

    padding:
        16px 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: fixed;

    width: 100%;
    top: 0;

    z-index: 1000;
}

/* ===============================
   NAVBAR LINKS
=============================== */
.navbar a {

    color: var(--text-main);

    text-decoration: none;

    font-weight: 500;

    font-size: 15px;

    margin-left: 20px;

    transition: all 0.3s ease;
}

.navbar a:hover {

    color: #12C6FF;

    transform: translateY(-1px);
}

/* ===============================
   SEARCH BAR
=============================== */
.search-bar {

    background: #ffffff;

    border:
        1px solid rgba(18,198,255,0.12);

    border-radius: 14px;

    padding: 10px 16px;

    display: flex;
    align-items: center;

    max-width: 340px;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.06);
}

.search-bar input {

    border: none;
    outline: none;

    width: 100%;

    font-size: 15px;

    background: transparent;

    color: #243b55;
}

.search-bar input::placeholder {
    color: #8ba4c0;
}

/* ===============================
   MAIN CONTENT BLOCK
=============================== */
.pkp_structure_main .pkp_block {

    background: #ffffff;

    border-radius: 24px;

    padding: 36px;

    margin-bottom: 28px;

    box-shadow: var(--shadow-soft);

    border:
        1px solid rgba(255,255,255,0.7);

    transition: all 0.3s ease;
}

.pkp_structure_main .pkp_block:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 38px rgba(0,0,0,0.08);
}

/* ===============================
   HEADINGS
=============================== */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {

    color: #10213d;

    font-weight: 700;

    letter-spacing: -0.02em;

    margin-bottom: 16px;
}

/* ===============================
   BUTTON GRID
=============================== */
.button-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 22px;

    margin: 30px auto;

    max-width: 1000px;
}

/* ===============================
   BUTTON STYLE
=============================== */
.button-grid .custom-button {

    flex: 1 1 calc(50% - 22px);

    text-align: center;

    padding:
        16px 32px;

    border-radius: 18px;

    background: var(--gradient-main);

    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.01em;

    box-shadow:
        0 12px 28px rgba(27,107,255,0.18);

    transition: all 0.35s ease;
}

.button-grid .custom-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 36px rgba(27,107,255,0.28);
}

/* ===============================
   TABLE STYLE
=============================== */
table {

    width: 100%;

    border-collapse: collapse;

    margin: 24px 0;

    overflow: hidden;

    border-radius: 18px;

    background: white;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.06);
}

th {

    background: var(--gradient-main);

    color: white;

    padding: 16px;

    text-align: left;

    font-weight: 600;
}

td {

    padding: 14px 16px;

    border-bottom:
        1px solid rgba(0,0,0,0.05);
}

tr:hover {

    background:
        rgba(18,198,255,0.04);
}

/* ===============================
   SIDEBAR BUTTONS
=============================== */
.sidebar-buttons {

    display: flex;

    flex-direction: column;

    position: fixed;

    right: 24px;

    top: 40%;

    gap: 14px;

    z-index: 999;
}

.sidebar-buttons a {

    background: var(--gradient-main);

    color: white;

    padding: 14px 18px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 600;

    box-shadow:
        0 10px 24px rgba(27,107,255,0.18);

    transition: all 0.3s ease;
}

.sidebar-buttons a:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 30px rgba(27,107,255,0.28);
}

/* ===============================
   FOOTER
=============================== */
.footer {

    margin-top: 50px;

    background:
        linear-gradient(
            180deg,
            #071426,
            #0d1b34
        );

    color: rgba(255,255,255,0.78);

    text-align: center;

    padding:
        40px 20px;

    font-size: 14px;

    border-top:
        1px solid rgba(255,255,255,0.05);
}

/* ===============================
   HIDE OJS BRANDING
=============================== */
.pkp_branding {
    display: none !important;
}

/* ===============================
   FLOATING MENU
=============================== */
.floating-menu {

    position: fixed;

    top: 50%;
    right: 20px;

    transform: translateY(-50%);

    background:
        rgba(7,20,38,0.92);

    backdrop-filter: blur(12px);

    border-radius: 20px;

    padding: 18px;

    box-shadow:
        0 14px 40px rgba(0,0,0,0.2);

    z-index: 1000;
}

.floating-menu a {

    display: block;

    color: white;

    text-decoration: none;

    padding: 12px 14px;

    border-radius: 12px;

    margin: 8px 0;

    background:
        rgba(255,255,255,0.05);

    transition: all 0.3s ease;
}

.floating-menu a:hover {

    background:
        rgba(18,198,255,0.18);

    transform:
        translateX(-2px);
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {

    .navbar {

        flex-direction: column;

        text-align: center;

        padding: 20px;
    }

    .sidebar-buttons,
    .floating-menu {

        display: none;
    }

    .pkp_structure_main .pkp_block {

        padding: 24px;
    }

    table {

        font-size: 14px;
    }
}

@media (max-width: 600px) {

    .button-grid .custom-button {

        flex: 1 1 100%;
    }

    .navbar a {

        margin:
            8px 0;
    }
}

/* =========================================
   FIX LOGO LANDSCAPE OJS
========================================= */

/* Container utama logo */
.pkp_site_name {

    width: auto !important;

    max-width: none !important;

    text-align: left;
}

/* Wrapper logo */
.pkp_site_name_wrapper {

    padding-top: 15px !important;
    padding-bottom: 10px !important;

    width: 100% !important;
}

/* Link logo */
.pkp_site_name > a {

    display: inline-block !important;

    width: auto !important;
}

/* Image logo */
.pkp_site_name .is_img img {

    display: block;

    width: auto !important;

    height: auto !important;

    max-height: 140px !important;

    max-width: 700px !important;

    object-fit: contain;

    aspect-ratio: auto !important;
}

/* Hapus batas kotak bawaan */
.pkp_site_name img {

    min-width: unset !important;

    min-height: unset !important;
}

/* =========================================
   HIDE TOP SECONDARY MENU
========================================= */

.pkp_navigation_user_wrapper {

    display: none !important;
}