/* =========================================================
   DIDAKTIKA - HEADER FULL, RAMPING, TANPA CROP
   Memperbaiki:
   1) e-ISSN/admin kembali di pojok kanan atas
   2) tidak ada ruang kosong besar
   3) logo DIDAKTIKA tidak terpotong
   4) banner tetap penuh kiri-kanan
   ========================================================= */

/* ===== HEADER ===== */
.pkp_structure_head {
    background: #0f4f86 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wrapper utama: jangan ubah alur menu user */
.pkp_head_wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Area logo/banner */
.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Link pembungkus banner */
.pkp_site_name > a,
.pkp_site_name .is_img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* PENTING: gambar tidak di-crop */
.pkp_site_name img,
.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* e-ISSN / admin kembali menempel di pojok kanan atas */
.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    z-index: 50 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user {
    margin: 0 !important;
    padding: 8px 22px 0 0 !important;
}

/* Navigasi utama tetap normal */
.pkp_navigation_primary_wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Jangan beri tinggi/min-height tambahan pada header */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
    min-height: 0 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }

    .pkp_navigation_user {
        padding-right: 8px !important;
    }
}

/* ===== SATU KOTAK PER ARTIKEL ===== */
.cmp_article_list > li {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
}

.obj_article_summary {
    border: 1.5px solid #34719D !important;
    border-top: 4px solid #F7BC4A !important;
    border-radius: 7px !important;
    padding: 16px 18px !important;
    margin-bottom: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07) !important;
}

.obj_article_summary .title,
.obj_article_summary .title a {
    color: #23679A !important;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.obj_article_summary .title a:hover {
    color: #F29A24 !important;
}

.obj_article_summary .authors {
    color: #333333;
    margin-top: 7px;
    margin-bottom: 8px;
}

.obj_article_summary .pages {
    color: #666666;
}

.obj_article_summary .galley_links a,
.obj_article_summary .obj_galley_link,
.obj_galley_link {
    background-color: #34719D !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 7px 13px !important;
    font-weight: 600;
    text-decoration: none;
}

.obj_article_summary .galley_links a:hover,
.obj_article_summary .obj_galley_link:hover,
.obj_galley_link:hover {
    background-color: #2A5C87 !important;
}

/* ============================================================
   DIDAKTIKA — SAFE ENHANCEMENT ONLY
   CATATAN:
   - Tidak mengubah header yang sudah ada
   - Tidak mengubah card artikel
   - Tidak mengubah tombol PDF
   - Hanya menambahkan:
     1) box per item Register / Login / e-ISSN di kanan atas
     2) sidebar digeser sedikit ke kanan pada desktop
   ============================================================ */

/* ============================================================
   1. REGISTER / LOGIN / e-ISSN — BOX PER ITEM DI KANAN ATAS
   Menggunakan warna DIDAKTIKA yang sudah ada:
   biru #34719D dan aksen kuning #F7BC4A
   ============================================================ */

@media (min-width: 641px) {

    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 8px !important;
        right: 18px !important;
        left: auto !important;

        z-index: 150 !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .pkp_navigation_user,
    #navigationUser {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;

        gap: 8px !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    /* Setiap item menjadi kotak kecil sendiri */
    .pkp_navigation_user > li,
    #navigationUser > li {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 6px 10px !important;

        background: rgba(52, 113, 157, 0.82) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 8px !important;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;

        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;

        white-space: nowrap !important;

        transition:
            background .20s ease,
            border-color .20s ease,
            transform .20s ease;
    }

    .pkp_navigation_user > li > a,
    #navigationUser > li > a,
    .pkp_navigation_user > li *,
    #navigationUser > li * {
        color: #ffffff !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        text-shadow: none !important;
        white-space: nowrap !important;
    }

    /* Hover memakai aksen kuning DIDAKTIKA */
    .pkp_navigation_user > li:hover,
    #navigationUser > li:hover {
        background: rgba(247, 188, 74, 0.96) !important;
        border-color: rgba(242, 154, 36, 1) !important;
        transform: translateY(-1px);
    }

    .pkp_navigation_user > li:hover *,
    #navigationUser > li:hover *,
    .pkp_navigation_user > li > a:hover,
    #navigationUser > li > a:hover {
        color: #0f4f86 !important;
    }
}


/* ============================================================
   2. SIDEBAR KANAN DIGESER SEDIKIT KE KANAN
   Tidak mengubah warna, bentuk, atau isi block/sidebar.
   ============================================================ */

@media (min-width: 992px) {

    /* Perlebar area konten keseluruhan sedikit */
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        width: calc(100% - 50px) !important;
        max-width: 1280px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Kolom utama tetap fleksibel */
    .pkp_structure_main {
        width: calc(100% - 330px) !important;
        max-width: none !important;
    }

    /* Hanya posisi sidebar yang digeser */
    .pkp_structure_sidebar {
        width: 300px !important;
        max-width: 300px !important;

        margin-left: 30px !important;
        margin-right: 0 !important;

        transform: translateX(12px);
        align-self: flex-start !important;
    }

    .pkp_structure_sidebar .pkp_block {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ============================================================
   3. LAPTOP / LAYAR SEDANG
   ============================================================ */

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

    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        width: calc(100% - 30px) !important;
    }

    .pkp_structure_sidebar {
        width: 285px !important;
        max-width: 285px !important;

        margin-left: 22px !important;

        transform: translateX(5px);
    }

    .pkp_structure_main {
        width: calc(100% - 307px) !important;
    }
}


/* ============================================================
   4. TABLET / HP
   Kembalikan layout normal supaya tidak keluar layar.
   Pengaturan header/card bawaan file DIDAKTIKA tetap berlaku.
   ============================================================ */

@media (max-width: 991px) {

    .pkp_structure_content,
    .pkp_structure_content.has_sidebar,
    .pkp_structure_main,
    .pkp_structure_sidebar {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        transform: none !important;
    }
}


/* ============================================================
   5. MOBILE USER INFO
   Tetap box per item, tetapi responsif.
   ============================================================ */

@media (max-width: 640px) {

    .pkp_navigation_user_wrapper {
        position: absolute !important;

        top: 5px !important;
        right: 6px !important;
        left: auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        z-index: 150 !important;
    }

    .pkp_navigation_user,
    #navigationUser {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        gap: 4px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_user > li,
    #navigationUser > li {
        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 4px 7px !important;

        background: rgba(52, 113, 157, 0.90) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 6px !important;

        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 0.80rem !important;
    }

    .pkp_navigation_user > li > a,
    #navigationUser > li > a,
    .pkp_navigation_user > li *,
    #navigationUser > li * {
        color: #ffffff !important;
    }
}