/* ==========================================================
   DARUL KHIDMAH — FINAL HEADER + TRANSPARENT USER MENU
   Jangan ditumpuk dengan file CSS sebelumnya.
   Upload file ini sebagai SATU-SATUNYA Journal Style Sheet.
   ========================================================== */

:root{
  --dk-teal:#0c8f95;
  --dk-teal-dark:#08666b;
  --dk-gold:#e5b94f;
  --dk-ink:#1f2933;
  --dk-muted:#667085;
  --dk-line:#e7ecef;
  --dk-soft:#f7faf9;
}

/* ===== GENERAL WIDTH ===== */
.pkp_head_wrapper,
.pkp_structure_content,
.pkp_structure_footer_wrapper{
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ===== HEADER ===== */
.pkp_structure_head{
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}

.pkp_head_wrapper{
  position:relative !important;
  padding:0 !important;
  background:#fff !important;
}

.pkp_site_name_wrapper,
.pkp_site_name{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
}

.pkp_site_name{
  line-height:0 !important;
}

/* Header image:
   file asli 2048x682, area desain efektif 2048x386 */
.pkp_site_name .is_img{
  display:block !important;
  width:100% !important;
  aspect-ratio:2048 / 386 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
}

.pkp_site_name .is_img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ===== USER MENU: KEEP ORIGINAL POSITION, ONLY REMOVE WHITE BOX ===== */
/* PENTING: jangan pakai position:absolute di sini */
.pkp_navigation_user_wrapper{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.pkp_navigation_user{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.pkp_navigation_user > li,
.pkp_navigation_user > li > a,
.pkp_navigation_user > li > button,
.pkp_navigation_user .dropdown-toggle,
.pkp_navigation_user .task_count{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Username tetap terbaca */
.pkp_navigation_user > li > a,
.pkp_navigation_user > li > a:link,
.pkp_navigation_user > li > a:visited,
.pkp_navigation_user .dropdown-toggle{
  color:#ffffff !important;
  font-size:12px !important;
  font-weight:600 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}

/* angka notifikasi */
.pkp_navigation_user .task_count{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}

/* dropdown putih HANYA saat dibuka */
.pkp_navigation_user .dropdown-menu,
.pkp_navigation_user .submenu{
  background:#ffffff !important;
  border:1px solid #dfe6e8 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14) !important;
  border-radius:7px !important;
}

.pkp_navigation_user .dropdown-menu a,
.pkp_navigation_user .submenu a{
  color:#263238 !important;
  text-shadow:none !important;
  background:transparent !important;
}

/* ===== NAVIGATION ===== */
.pkp_navigation_primary_wrapper{
  max-width:1180px !important;
  margin:0 auto !important;
  background:#fff !important;
  border-top:1px solid var(--dk-line) !important;
  border-bottom:1px solid var(--dk-line) !important;
  box-shadow:none !important;
}

.pkp_navigation_primary > li > a{
  color:var(--dk-ink) !important;
  font-weight:600 !important;
  font-size:14px !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus{
  color:var(--dk-teal) !important;
}

.pkp_navigation_search_wrapper a,
.pkp_head_wrapper .pkp_search .search_prompt{
  color:var(--dk-teal-dark) !important;
}

/* ===== BODY ===== */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--dk-ink);
  background:#fff;
  line-height:1.65;
  font-size:15px;
}

a{
  color:var(--dk-teal-dark);
  text-decoration:none;
}
a:hover,
a:focus{
  color:var(--dk-teal);
}

.pkp_structure_main{
  padding-top:28px;
  padding-bottom:36px;
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3{
  color:var(--dk-ink);
  line-height:1.3;
}

.current_issue_title,
.cmp_announcements > h2,
.obj_issue_toc .sections > .section > h2,
.page_index_journal .additional_content h2{
  padding-bottom:10px;
  border-bottom:2px solid var(--dk-gold);
  margin-bottom:18px;
}

.obj_article_summary{
  padding:18px 0;
  border-bottom:1px solid var(--dk-line);
}

.obj_article_summary .title a{
  color:var(--dk-ink);
  font-weight:700;
}

.obj_article_summary .title a:hover{
  color:var(--dk-teal);
}

.obj_article_summary .authors{
  color:var(--dk-muted);
}

/* ===== BUTTONS ===== */
.obj_galley_link,
.cmp_button,
.pkp_button,
button,
input[type="submit"]{
  border-radius:7px;
  border:1px solid var(--dk-teal);
  background:var(--dk-teal);
  color:#fff;
  font-weight:600;
  box-shadow:none;
}

.obj_galley_link:hover,
.cmp_button:hover,
.pkp_button:hover,
button:hover,
input[type="submit"]:hover{
  background:var(--dk-teal-dark);
  border-color:var(--dk-teal-dark);
  color:#fff;
}

/* ===== SIDEBAR ===== */
.pkp_block{
  background:var(--dk-soft);
  border:1px solid var(--dk-line);
  border-radius:10px;
  padding:18px;
  margin-bottom:18px;
}

.pkp_block .title{
  color:var(--dk-teal-dark);
  font-size:15px;
  font-weight:700;
}

/* ===== MOBILE ===== */
@media (max-width:1199px){
  .pkp_head_wrapper,
  .pkp_structure_content,
  .pkp_structure_footer_wrapper,
  .pkp_navigation_primary_wrapper{
    max-width:100% !important;
  }
}

@media (max-width:767px){
  .pkp_site_name .is_img{
    aspect-ratio:2048 / 386 !important;
  }

  .pkp_navigation_user > li > a,
  .pkp_navigation_user > li > a:link,
  .pkp_navigation_user > li > a:visited,
  .pkp_navigation_user .dropdown-toggle{
    color:#263238 !important;
    text-shadow:none !important;
  }
}



/* ==========================================================
   DARUL KHIDMAH — OJS USER MENU FIX v4
   Strong ID selectors to override OJS Default Theme desktop rules.
   ========================================================== */

@media (min-width: 768px) {

    /* OJS default theme uses left:50% + translateX(-50%).
       Kill that rule completely and move the account menu to top-left. */
    #navigationUserWrapper.pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 8px !important;
        left: 14px !important;
        right: auto !important;
        transform: none !important;

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

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

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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

        text-align: left !important;
        z-index: 9999 !important;
    }

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

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

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

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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

        text-align: left !important;
    }

    #navigationUser.pkp_navigation_user > li.profile,
    #navigationUser.pkp_navigation_user > li.profile > a,
    #navigationUser.pkp_navigation_user > li.profile > button {
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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

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

        padding: 4px 6px !important;

        color: rgba(255,255,255,.96) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,.48) !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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

    #navigationUser.pkp_navigation_user > li.profile > a:focus,
    #navigationUser.pkp_navigation_user > li.profile > a:hover {
        color: #ffffff !important;
        background: rgba(0,0,0,.10) !important;
        border-radius: 5px !important;
    }

    #navigationUser.pkp_navigation_user .task_count {
        margin-left: 3px !important;
        padding: 0 2px !important;

        width: auto !important;
        height: auto !important;
        line-height: 1.2 !important;

        color: #ffffff !important;
        font-size: 10px !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        text-shadow: 0 1px 2px rgba(0,0,0,.48) !important;
    }

    /* Dropdown stays readable and opens beneath the account link */
    #navigationUser.pkp_navigation_user > li.profile > ul.dropdown-menu,
    #navigationUser.pkp_navigation_user > li.profile > ul {
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;

        margin-top: 3px !important;

        background: #ffffff !important;
        border: 1px solid #dfe6e8 !important;
        border-radius: 7px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
    }

    #navigationUser.pkp_navigation_user > li.profile > ul a {
        color: #263238 !important;
        text-shadow: none !important;
    }
}



/* ==========================================================
   DARUL KHIDMAH — ELEGANT INTERACTIVE SIDEBAR v2
   Designed to work safely with header-final-v4.
   ========================================================== */

/* Sidebar spacing */
.pkp_structure_sidebar{
    padding-top:24px !important;
}

/* Main sidebar cards */
.pkp_structure_sidebar .pkp_block{
    position:relative !important;
    overflow:hidden !important;

    margin-bottom:18px !important;
    padding:18px !important;

    background:#ffffff !important;
    border:1px solid #e6eeee !important;
    border-radius:14px !important;

    box-shadow:0 5px 16px rgba(9, 79, 83, .06) !important;

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

/* Elegant vertical accent */
.pkp_structure_sidebar .pkp_block::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;

    width:4px !important;
    height:100% !important;

    background:linear-gradient(
        180deg,
        #0c8f95 0%,
        #62c86f 58%,
        #e5b94f 100%
    ) !important;

    transform:scaleY(.35) !important;
    transform-origin:center !important;
    opacity:.75 !important;

    transition:
        transform .26s ease,
        width .26s ease,
        opacity .26s ease !important;
}

/* Card hover */
.pkp_structure_sidebar .pkp_block:hover,
.pkp_structure_sidebar .pkp_block:focus-within{
    transform:translateY(-4px) !important;
    border-color:rgba(12,143,149,.28) !important;
    background:#fcfffd !important;
    box-shadow:0 13px 30px rgba(9,79,83,.12) !important;
}

.pkp_structure_sidebar .pkp_block:hover::before,
.pkp_structure_sidebar .pkp_block:focus-within::before{
    transform:scaleY(1) !important;
    width:5px !important;
    opacity:1 !important;
}

/* Sidebar block title */
.pkp_structure_sidebar .pkp_block .title{
    margin:0 0 12px 0 !important;
    padding:0 0 10px 0 !important;

    color:#0a6e73 !important;
    font-size:15px !important;
    font-weight:750 !important;
    letter-spacing:.1px !important;
    text-transform:none !important;

    border-bottom:1px solid #edf3f3 !important;
}

/* Animated underline under block title */
.pkp_structure_sidebar .pkp_block .title::after{
    content:"" !important;
    display:block !important;

    width:40px !important;
    height:3px !important;
    margin-top:8px !important;

    border-radius:999px !important;
    background:linear-gradient(90deg,#0c8f95,#66c94d,#e5b94f) !important;

    transition:width .26s ease !important;
}

.pkp_structure_sidebar .pkp_block:hover .title::after,
.pkp_structure_sidebar .pkp_block:focus-within .title::after{
    width:72px !important;
}

/* Lists */
.pkp_structure_sidebar .pkp_block ul{
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

.pkp_structure_sidebar .pkp_block ul li{
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px solid #f1f4f4 !important;
}

.pkp_structure_sidebar .pkp_block ul li:last-child{
    border-bottom:0 !important;
}

/* Individual links — e.g. Author Guidelines */
.pkp_structure_sidebar .pkp_block ul li a{
    position:relative !important;
    display:block !important;

    margin:2px 0 !important;
    padding:9px 10px 9px 18px !important;

    color:#35535a !important;
    background:transparent !important;

    border-radius:8px !important;

    font-size:13.5px !important;
    font-weight:500 !important;
    line-height:1.45 !important;

    transition:
        color .22s ease,
        background-color .22s ease,
        padding-left .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}

/* Small gold marker */
.pkp_structure_sidebar .pkp_block ul li a::before{
    content:"" !important;
    position:absolute !important;

    left:6px !important;
    top:50% !important;

    width:5px !important;
    height:5px !important;

    border-radius:50% !important;
    background:#e5b94f !important;

    transform:translateY(-50%) scale(.8) !important;
    opacity:.8 !important;

    transition:
        transform .22s ease,
        background-color .22s ease,
        opacity .22s ease !important;
}

/* Elegant light-green hover */
.pkp_structure_sidebar .pkp_block ul li a:hover,
.pkp_structure_sidebar .pkp_block ul li a:focus{
    color:#08666b !important;

    background:linear-gradient(
        90deg,
        rgba(102,201,77,.18) 0%,
        rgba(102,201,77,.10) 58%,
        rgba(229,185,79,.06) 100%
    ) !important;

    padding-left:24px !important;

    box-shadow:
        inset 3px 0 0 #66c94d,
        0 3px 10px rgba(54,132,79,.07) !important;

    outline:none !important;
}

/* Hover marker */
.pkp_structure_sidebar .pkp_block ul li a:hover::before,
.pkp_structure_sidebar .pkp_block ul li a:focus::before{
    background:#0c8f95 !important;
    transform:translateY(-50%) scale(1.2) !important;
    opacity:1 !important;
}

/* Active/current page if theme exposes current/active state */
.pkp_structure_sidebar .pkp_block ul li.current > a,
.pkp_structure_sidebar .pkp_block ul li.active > a,
.pkp_structure_sidebar .pkp_block ul li a[aria-current="page"]{
    color:#075d62 !important;

    background:linear-gradient(
        90deg,
        rgba(12,143,149,.13),
        rgba(102,201,77,.09)
    ) !important;

    box-shadow:inset 3px 0 0 #0c8f95 !important;
    font-weight:650 !important;
}

/* Make-a-submission button */
.pkp_structure_sidebar .block_make_submission_link{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;

    padding:11px 14px !important;

    color:#ffffff !important;
    background:linear-gradient(135deg,#0b8f94,#58b963) !important;

    border:0 !important;
    border-radius:9px !important;

    font-weight:700 !important;
    text-align:center !important;

    box-shadow:0 6px 15px rgba(12,143,149,.18) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease !important;
}

.pkp_structure_sidebar .block_make_submission_link:hover,
.pkp_structure_sidebar .block_make_submission_link:focus{
    transform:translateY(-2px) !important;
    box-shadow:0 10px 22px rgba(12,143,149,.26) !important;
    filter:saturate(1.06) !important;
}

/* Sidebar images / badges */
.pkp_structure_sidebar .pkp_block img{
    max-width:100% !important;
    height:auto !important;
    border-radius:9px !important;

    transition:
        transform .26s ease,
        box-shadow .26s ease !important;
}

.pkp_structure_sidebar .pkp_block:hover img{
    transform:scale(1.015) !important;
    box-shadow:0 7px 17px rgba(0,0,0,.07) !important;
}

/* Search or form controls in sidebar */
.pkp_structure_sidebar input[type="text"],
.pkp_structure_sidebar input[type="search"],
.pkp_structure_sidebar select{
    border:1px solid #dbe5e5 !important;
    border-radius:8px !important;
    background:#fff !important;
    transition:border-color .2s ease, box-shadow .2s ease !important;
}

.pkp_structure_sidebar input[type="text"]:focus,
.pkp_structure_sidebar input[type="search"]:focus,
.pkp_structure_sidebar select:focus{
    border-color:#0c8f95 !important;
    box-shadow:0 0 0 3px rgba(12,143,149,.10) !important;
    outline:none !important;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
    .pkp_structure_sidebar .pkp_block,
    .pkp_structure_sidebar .pkp_block::before,
    .pkp_structure_sidebar .pkp_block .title::after,
    .pkp_structure_sidebar .pkp_block ul li a,
    .pkp_structure_sidebar .pkp_block ul li a::before,
    .pkp_structure_sidebar .block_make_submission_link,
    .pkp_structure_sidebar .pkp_block img{
        transition:none !important;
        transform:none !important;
    }
}

/* Mobile */
@media (max-width:767px){
    .pkp_structure_sidebar{
        padding-top:16px !important;
    }

    .pkp_structure_sidebar .pkp_block{
        border-radius:11px !important;
        margin-bottom:14px !important;
    }

    .pkp_structure_sidebar .pkp_block:hover,
    .pkp_structure_sidebar .pkp_block:focus-within{
        transform:none !important;
    }
}



/* ==========================================================
   DARUL KHIDMAH — MENU LINK HOVER FIX v3
   Target the actual custom internal-menu URLs directly.
   This is intentionally more specific than the generic sidebar rules.
   ========================================================== */

/* All internal MENU links */
.pkp_structure_sidebar .pkp_block a[href*="aimsscope"],
.pkp_structure_sidebar .pkp_block a[href*="editorial"],
.pkp_structure_sidebar .pkp_block a[href*="peerreview"],
.pkp_structure_sidebar .pkp_block a[href*="publicationethics"],
.pkp_structure_sidebar .pkp_block a[href*="authorguideline"],
.pkp_structure_sidebar .pkp_block a[href*="author-guideline"] {
    position: relative !important;
    display: block !important;

    margin: 3px 0 !important;
    padding: 9px 11px 9px 12px !important;

    color: #176a70 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;

    font-weight: 500 !important;
    line-height: 1.4 !important;

    transform: translateX(0) !important;

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

/* Clearly visible but elegant light-green hover */
.pkp_structure_sidebar .pkp_block a[href*="aimsscope"]:hover,
.pkp_structure_sidebar .pkp_block a[href*="aimsscope"]:focus,
.pkp_structure_sidebar .pkp_block a[href*="editorial"]:hover,
.pkp_structure_sidebar .pkp_block a[href*="editorial"]:focus,
.pkp_structure_sidebar .pkp_block a[href*="peerreview"]:hover,
.pkp_structure_sidebar .pkp_block a[href*="peerreview"]:focus,
.pkp_structure_sidebar .pkp_block a[href*="publicationethics"]:hover,
.pkp_structure_sidebar .pkp_block a[href*="publicationethics"]:focus,
.pkp_structure_sidebar .pkp_block a[href*="authorguideline"]:hover,
.pkp_structure_sidebar .pkp_block a[href*="authorguideline"]:focus,
.pkp_structure_sidebar .pkp_block a[href*="author-guideline"]:hover,
.pkp_structure_sidebar .pkp_block a[href*="author-guideline"]:focus {
    color: #075f50 !important;

    background:
        linear-gradient(
            90deg,
            #dff7e5 0%,
            #eaf9e7 58%,
            #f7f8df 100%
        ) !important;

    border-color: #bde8c7 !important;

    box-shadow:
        inset 4px 0 0 #55bd68,
        0 5px 13px rgba(58, 139, 79, .11) !important;

    transform: translateX(4px) !important;
    padding-left: 17px !important;

    text-decoration: none !important;
    outline: none !important;
}

/* Keyboard focus remains obvious */
.pkp_structure_sidebar .pkp_block a[href*="aimsscope"]:focus-visible,
.pkp_structure_sidebar .pkp_block a[href*="editorial"]:focus-visible,
.pkp_structure_sidebar .pkp_block a[href*="peerreview"]:focus-visible,
.pkp_structure_sidebar .pkp_block a[href*="publicationethics"]:focus-visible,
.pkp_structure_sidebar .pkp_block a[href*="authorguideline"]:focus-visible,
.pkp_structure_sidebar .pkp_block a[href*="author-guideline"]:focus-visible {
    outline: 2px solid rgba(12,143,149,.30) !important;
    outline-offset: 2px !important;
}

/* If a custom-menu link wraps icon/text spans, keep them transparent */
.pkp_structure_sidebar .pkp_block a[href*="aimsscope"] *,
.pkp_structure_sidebar .pkp_block a[href*="editorial"] *,
.pkp_structure_sidebar .pkp_block a[href*="peerreview"] *,
.pkp_structure_sidebar .pkp_block a[href*="publicationethics"] *,
.pkp_structure_sidebar .pkp_block a[href*="authorguideline"] *,
.pkp_structure_sidebar .pkp_block a[href*="author-guideline"] * {
    background: transparent !important;
}

/* Generic fallback for text links in custom sidebar blocks, excluding images */
@media (hover: hover) and (pointer: fine) {
    .pkp_structure_sidebar .pkp_block .content a:not(:has(img)):hover {
        text-decoration: none !important;
    }
}



/* ==========================================================
   DARUL KHIDMAH — SIDEBAR MENU FINAL COMPACT FIX
   - Aims & Scope ikut hover
   - ikon custom menu dihapus
   - jarak antar menu dirapatkan
   - semua item punya efek hijau muda yang konsisten
   ========================================================== */

/* Target blok custom yang ID-nya mengandung kata "menu" */
.pkp_structure_sidebar .pkp_block[id*="menu" i],
.pkp_structure_sidebar .block_custom[id*="menu" i] {
    padding: 16px 16px 14px !important;
}

/* Hilangkan ikon agar tidak berdiri di baris terpisah */
.pkp_structure_sidebar .pkp_block[id*="menu" i] i,
.pkp_structure_sidebar .pkp_block[id*="menu" i] svg,
.pkp_structure_sidebar .pkp_block[id*="menu" i] .fa,
.pkp_structure_sidebar .pkp_block[id*="menu" i] .fas,
.pkp_structure_sidebar .pkp_block[id*="menu" i] .far,
.pkp_structure_sidebar .pkp_block[id*="menu" i] .fab,
.pkp_structure_sidebar .pkp_block[id*="menu" i] [class*="icon"],
.pkp_structure_sidebar .block_custom[id*="menu" i] i,
.pkp_structure_sidebar .block_custom[id*="menu" i] svg,
.pkp_structure_sidebar .block_custom[id*="menu" i] [class*="icon"] {
    display: none !important;
}

/* Rapikan paragraf/wrapper yang sebelumnya membuat ikon dan teks berjauhan */
.pkp_structure_sidebar .pkp_block[id*="menu" i] p,
.pkp_structure_sidebar .pkp_block[id*="menu" i] div,
.pkp_structure_sidebar .block_custom[id*="menu" i] p,
.pkp_structure_sidebar .block_custom[id*="menu" i] div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Semua link pada blok MENU — termasuk Aims & Scope */
.pkp_structure_sidebar .pkp_block[id*="menu" i] a,
.pkp_structure_sidebar .block_custom[id*="menu" i] a {
    position: relative !important;
    display: block !important;

    margin: 2px 0 !important;
    padding: 8px 11px 8px 13px !important;

    color: #176a70 !important;
    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 8px !important;

    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;

    transform: translateX(0) !important;

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

/* Titik kecil konsisten sebagai pengganti ikon lama */
.pkp_structure_sidebar .pkp_block[id*="menu" i] a::before,
.pkp_structure_sidebar .block_custom[id*="menu" i] a::before {
    content: "" !important;

    position: absolute !important;
    left: 5px !important;
    top: 50% !important;

    width: 4px !important;
    height: 4px !important;

    border-radius: 50% !important;
    background: #d6aa3a !important;

    transform: translateY(-50%) scale(.85) !important;
    opacity: .82 !important;

    transition:
        background-color .22s ease,
        transform .22s ease,
        opacity .22s ease !important;
}

/* Hover semua item: hijau muda jelas tetapi tetap profesional */
.pkp_structure_sidebar .pkp_block[id*="menu" i] a:hover,
.pkp_structure_sidebar .pkp_block[id*="menu" i] a:focus,
.pkp_structure_sidebar .block_custom[id*="menu" i] a:hover,
.pkp_structure_sidebar .block_custom[id*="menu" i] a:focus {
    color: #075f50 !important;

    background: linear-gradient(
        90deg,
        #d9f5df 0%,
        #e7f8e5 65%,
        #f3f7df 100%
    ) !important;

    border-color: #b7e4c1 !important;

    box-shadow:
        inset 4px 0 0 #55bd68,
        0 4px 11px rgba(58, 139, 79, .10) !important;

    transform: translateX(3px) !important;
    padding-left: 18px !important;

    outline: none !important;
}

/* Titik berubah teal saat hover */
.pkp_structure_sidebar .pkp_block[id*="menu" i] a:hover::before,
.pkp_structure_sidebar .pkp_block[id*="menu" i] a:focus::before,
.pkp_structure_sidebar .block_custom[id*="menu" i] a:hover::before,
.pkp_structure_sidebar .block_custom[id*="menu" i] a:focus::before {
    background: #0c8f95 !important;
    transform: translateY(-50%) scale(1.2) !important;
    opacity: 1 !important;
}

/* Fallback jika blok custom ternyata tidak punya ID "menu":
   target semua URL internal menu yang sudah dikenal, termasuk variasi Aims & Scope */
.pkp_structure_sidebar a[href*="aim"],
.pkp_structure_sidebar a[href*="scope"],
.pkp_structure_sidebar a[href*="editorial"],
.pkp_structure_sidebar a[href*="reviewer"],
.pkp_structure_sidebar a[href*="review"],
.pkp_structure_sidebar a[href*="publicationethic"],
.pkp_structure_sidebar a[href*="ethic"],
.pkp_structure_sidebar a[href*="authorguideline"],
.pkp_structure_sidebar a[href*="author-guideline"],
.pkp_structure_sidebar a[href*="authorGuideline"] {
    border-radius: 8px !important;
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}

.pkp_structure_sidebar a[href*="aim"]:hover,
.pkp_structure_sidebar a[href*="aim"]:focus,
.pkp_structure_sidebar a[href*="scope"]:hover,
.pkp_structure_sidebar a[href*="scope"]:focus,
.pkp_structure_sidebar a[href*="editorial"]:hover,
.pkp_structure_sidebar a[href*="editorial"]:focus,
.pkp_structure_sidebar a[href*="reviewer"]:hover,
.pkp_structure_sidebar a[href*="reviewer"]:focus,
.pkp_structure_sidebar a[href*="review"]:hover,
.pkp_structure_sidebar a[href*="review"]:focus,
.pkp_structure_sidebar a[href*="publicationethic"]:hover,
.pkp_structure_sidebar a[href*="publicationethic"]:focus,
.pkp_structure_sidebar a[href*="ethic"]:hover,
.pkp_structure_sidebar a[href*="ethic"]:focus,
.pkp_structure_sidebar a[href*="authorguideline"]:hover,
.pkp_structure_sidebar a[href*="authorguideline"]:focus,
.pkp_structure_sidebar a[href*="author-guideline"]:hover,
.pkp_structure_sidebar a[href*="author-guideline"]:focus,
.pkp_structure_sidebar a[href*="authorGuideline"]:hover,
.pkp_structure_sidebar a[href*="authorGuideline"]:focus {
    color: #075f50 !important;
    background: #dff6e4 !important;
    border-color: #b7e4c1 !important;
    box-shadow: inset 4px 0 0 #55bd68 !important;
    text-decoration: none !important;
}

/* Hapus ruang kosong wrapper ikon yang menjadi kosong setelah icon display:none */
.pkp_structure_sidebar .pkp_block[id*="menu" i] p:empty,
.pkp_structure_sidebar .pkp_block[id*="menu" i] div:empty,
.pkp_structure_sidebar .block_custom[id*="menu" i] p:empty,
.pkp_structure_sidebar .block_custom[id*="menu" i] div:empty {
    display: none !important;
}

/* Mobile: tetap rapat */
@media (max-width: 767px) {
    .pkp_structure_sidebar .pkp_block[id*="menu" i] a,
    .pkp_structure_sidebar .block_custom[id*="menu" i] a {
        margin: 1px 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}



/* ==========================================================
   DARUL KHIDMAH — USER MENU RIGHT + ELEGANT FOOTER v6
   Append-only patch over final-v5 compact sidebar.
   ========================================================== */


/* ==========================================================
   A. USER MENU — MOVE TO TOP-RIGHT, KEEP TRANSPARENT
   ========================================================== */

@media (min-width: 768px) {

    #navigationUserWrapper.pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 8px !important;
        right: 14px !important;
        left: auto !important;
        transform: none !important;

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

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

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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

        text-align: right !important;
        z-index: 9999 !important;
    }

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

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

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

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

        text-align: right !important;
    }

    #navigationUser.pkp_navigation_user > li.profile,
    #navigationUser.pkp_navigation_user > li.profile > a,
    #navigationUser.pkp_navigation_user > li.profile > button {
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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

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

        padding: 4px 6px !important;

        color: rgba(255,255,255,.96) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;

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

        transition:
            background-color .20s ease,
            color .20s ease !important;
    }

    #navigationUser.pkp_navigation_user > li.profile > a:hover,
    #navigationUser.pkp_navigation_user > li.profile > a:focus {
        color: #ffffff !important;
        background: rgba(0,0,0,.12) !important;
        border-radius: 5px !important;
    }

    #navigationUser.pkp_navigation_user .task_count {
        margin-left: 3px !important;
        padding: 0 2px !important;

        width: auto !important;
        height: auto !important;
        line-height: 1.2 !important;

        color: #ffffff !important;
        font-size: 10px !important;

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

        text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
    }

    /* Dropdown opens under the user menu and aligns to the right edge */
    #navigationUser.pkp_navigation_user > li.profile > ul.dropdown-menu,
    #navigationUser.pkp_navigation_user > li.profile > ul {
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;

        margin-top: 4px !important;

        background: #ffffff !important;
        border: 1px solid #dfe6e8 !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
    }

    #navigationUser.pkp_navigation_user > li.profile > ul a {
        color: #263238 !important;
        text-shadow: none !important;
    }
}


/* ==========================================================
   B. ELEGANT FOOTER
   ========================================================== */

/* Outer footer area */
.pkp_structure_footer_wrapper {
    position: relative !important;
    overflow: hidden !important;

    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 42px !important;

    padding: 0 !important;

    border-top: 0 !important;
    background: transparent !important;
}

/* Gold accent line above footer */
.pkp_structure_footer_wrapper::before {
    content: "" !important;
    display: block !important;

    width: 100% !important;
    height: 4px !important;

    background: linear-gradient(
        90deg,
        #0c8f95 0%,
        #62c86f 48%,
        #e5b94f 100%
    ) !important;
}

/* Main footer */
.pkp_structure_footer {
    position: relative !important;
    overflow: hidden !important;

    padding: 28px 30px 24px !important;

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

    background:
        radial-gradient(circle at 92% 18%, rgba(102,201,77,.18) 0 2px, transparent 3px) 0 0 / 18px 18px,
        linear-gradient(135deg, #075f64 0%, #087f84 48%, #187a5a 100%) !important;

    border: 0 !important;
    box-shadow: 0 -8px 26px rgba(7,77,82,.08) !important;
}

/* Subtle Islamic/geometric-feel decoration without images */
.pkp_structure_footer::after {
    content: "" !important;
    position: absolute !important;
    right: -70px !important;
    bottom: -95px !important;

    width: 260px !important;
    height: 260px !important;

    border: 1px solid rgba(229,185,79,.20) !important;
    border-radius: 50% !important;

    box-shadow:
        0 0 0 22px rgba(229,185,79,.035),
        0 0 0 44px rgba(255,255,255,.018) !important;

    pointer-events: none !important;
}

/* Footer paragraphs */
.pkp_structure_footer p,
.pkp_structure_footer div,
.pkp_structure_footer span {
    color: inherit;
}

/* Footer links */
.pkp_structure_footer a {
    position: relative !important;

    color: #ffffff !important;
    font-weight: 550 !important;
    text-decoration: none !important;

    transition:
        color .22s ease,
        opacity .22s ease !important;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
    color: #f7dc8a !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Elegant underline on footer links */
.pkp_structure_footer a::after {
    content: "" !important;
    position: absolute !important;

    left: 0 !important;
    bottom: -2px !important;

    width: 0 !important;
    height: 1px !important;

    background: #f0c95f !important;

    transition: width .22s ease !important;
}

.pkp_structure_footer a:hover::after,
.pkp_structure_footer a:focus::after {
    width: 100% !important;
}

/* Footer headings if present */
.pkp_structure_footer h1,
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: .1px !important;
}

/* OJS/PKP brand footer */
.pkp_brand_footer {
    position: relative !important;
    z-index: 2 !important;

    margin-top: 18px !important;
    padding-top: 14px !important;

    border-top: 1px solid rgba(255,255,255,.16) !important;

    color: rgba(255,255,255,.70) !important;
    font-size: 12px !important;
}

.pkp_brand_footer a {
    color: rgba(255,255,255,.84) !important;
}

/* If the footer contains an image/logo */
.pkp_structure_footer img {
    max-width: 100% !important;
    height: auto !important;

    filter: none !important;
    opacity: .96 !important;

    transition:
        transform .24s ease,
        opacity .24s ease !important;
}

.pkp_structure_footer img:hover {
    transform: translateY(-2px) !important;
    opacity: 1 !important;
}

/* Keep footer content above decorative pseudo element */
.pkp_structure_footer > * {
    position: relative !important;
    z-index: 2 !important;
}


/* ==========================================================
   C. MOBILE FOOTER / USER MENU
   ========================================================== */

@media (max-width: 767px) {

    #navigationUserWrapper.pkp_navigation_user_wrapper {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;

        width: 100% !important;
        padding: 4px 10px !important;

        text-align: right !important;
        background: transparent !important;
    }

    #navigationUser.pkp_navigation_user {
        justify-content: flex-end !important;
    }

    #navigationUser.pkp_navigation_user > li.profile > a {
        color: #263238 !important;
        text-shadow: none !important;
    }

    .pkp_structure_footer_wrapper {
        margin-top: 28px !important;
    }

    .pkp_structure_footer {
        padding: 24px 20px 22px !important;
    }

    .pkp_structure_footer::after {
        width: 190px !important;
        height: 190px !important;

        right: -80px !important;
        bottom: -80px !important;
    }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #navigationUser.pkp_navigation_user > li.profile > a,
    .pkp_structure_footer a,
    .pkp_structure_footer a::after,
    .pkp_structure_footer img {
        transition: none !important;
        transform: none !important;
    }
}



/* ==========================================================
   DARUL KHIDMAH — HOMEPAGE JOURNAL HUB v7
   Original layout language for a community-service journal.
   Adds styling for custom HTML placed in:
   Website > Appearance > Setup > Additional Content
   ========================================================== */

.dk-journal-hub{
    --dkh-teal:#0b7e83;
    --dkh-teal-dark:#075f64;
    --dkh-green:#65c95d;
    --dkh-green-soft:#eaf8e7;
    --dkh-gold:#e4b94f;
    --dkh-ink:#1f3035;
    --dkh-muted:#68777b;
    --dkh-line:#e5eded;
    --dkh-soft:#f8fbfa;

    margin:42px 0 12px !important;
    color:var(--dkh-ink) !important;
}

/* Section intro */
.dk-hub-intro{
    position:relative;
    overflow:hidden;

    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(250px,.75fr);
    gap:24px;
    align-items:center;

    padding:28px 30px;

    background:
        radial-gradient(circle at 88% 18%, rgba(101,201,93,.18) 0 2px, transparent 3px) 0 0/18px 18px,
        linear-gradient(135deg,#f7fcfb 0%,#ffffff 56%,#f6fbf2 100%);

    border:1px solid var(--dkh-line);
    border-radius:18px;
    box-shadow:0 12px 32px rgba(8,95,100,.07);
}

.dk-hub-intro::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:linear-gradient(180deg,var(--dkh-teal),var(--dkh-green),var(--dkh-gold));
}

.dk-hub-kicker{
    display:inline-block;
    margin-bottom:8px;
    color:var(--dkh-teal);
    font-size:12px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.dk-hub-intro h2{
    margin:0 0 10px !important;
    color:var(--dkh-ink) !important;
    font-size:27px !important;
    font-weight:800 !important;
    line-height:1.22 !important;
}

.dk-hub-intro p{
    max-width:720px;
    margin:0 !important;
    color:#526267 !important;
    line-height:1.7 !important;
}

.dk-hub-signature{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:18px 20px;

    background:linear-gradient(145deg,#0a7479,#168d77);
    border-radius:14px;
    color:#fff;
}

.dk-hub-signature strong{
    display:block;
    color:#fff;
    font-size:17px;
    line-height:1.35;
}

.dk-hub-signature span{
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,.78);
    font-size:12.5px;
    line-height:1.5;
}

/* Quick actions */
.dk-action-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:16px 0 28px;
}

.dk-action{
    position:relative;
    overflow:hidden;

    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    min-height:62px;
    padding:14px 16px;

    color:var(--dkh-teal-dark) !important;
    background:#fff !important;

    border:1px solid var(--dkh-line) !important;
    border-radius:12px !important;

    font-weight:750 !important;
    text-decoration:none !important;

    box-shadow:0 5px 14px rgba(8,95,100,.045);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease !important;
}

.dk-action::after{
    content:"→";
    font-size:18px;
    color:var(--dkh-gold);
    transition:transform .22s ease;
}

.dk-action:hover,
.dk-action:focus{
    transform:translateY(-3px);
    border-color:#b9e3ca !important;
    background:linear-gradient(135deg,#f0fbf2,#fffaf0) !important;
    box-shadow:0 10px 23px rgba(8,95,100,.10);
}

.dk-action:hover::after,
.dk-action:focus::after{
    transform:translateX(4px);
}

/* Generic section */
.dk-hub-section{
    margin:30px 0;
}

.dk-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.dk-section-heading h3{
    margin:0 !important;
    color:var(--dkh-ink) !important;
    font-size:20px !important;
    font-weight:800 !important;
}

.dk-section-heading p{
    max-width:560px;
    margin:0 !important;
    color:var(--dkh-muted) !important;
    font-size:13px;
    text-align:right;
}

/* Journal facts */
.dk-facts{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}

.dk-fact{
    position:relative;
    min-width:0;
    padding:16px 14px;
    background:#fff;
    border:1px solid var(--dkh-line);
    border-radius:12px;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.dk-fact:hover{
    transform:translateY(-3px);
    border-color:#bde5c5;
    background:#fbfffb;
    box-shadow:0 8px 18px rgba(8,95,100,.07);
}

.dk-fact small{
    display:block;
    margin-bottom:5px;
    color:#7a888c;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.dk-fact strong{
    display:block;
    color:var(--dkh-teal-dark);
    font-size:14px;
    line-height:1.35;
}

/* Focus area chips */
.dk-focus-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.dk-focus-list span{
    display:inline-flex;
    align-items:center;
    min-height:35px;
    padding:7px 12px;

    color:#24655d;
    background:#f4faf7;

    border:1px solid #dcece3;
    border-radius:999px;

    font-size:12.5px;
    font-weight:650;
}

.dk-focus-list span::before{
    content:"";
    width:6px;
    height:6px;
    margin-right:8px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--dkh-teal),var(--dkh-green));
}

/* Editorial journey */
.dk-process{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.dk-process-step{
    position:relative;
    padding:18px 16px 17px;
    background:#fff;
    border:1px solid var(--dkh-line);
    border-radius:13px;
}

.dk-process-step::before{
    content:attr(data-step);
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:31px;
    height:31px;
    margin-bottom:12px;

    color:#fff;
    background:linear-gradient(135deg,var(--dkh-teal),#2aa27b);
    border-radius:9px;

    font-size:11px;
    font-weight:800;
}

.dk-process-step h4{
    margin:0 0 6px !important;
    color:var(--dkh-ink) !important;
    font-size:14px !important;
    font-weight:780 !important;
}

.dk-process-step p{
    margin:0 !important;
    color:#6a797d !important;
    font-size:12px !important;
    line-height:1.55 !important;
}

.dk-process-step:hover{
    border-color:#bddfce;
    background:linear-gradient(180deg,#ffffff,#f6fbf7);
}

/* Signature: impact principles */
.dk-principles{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.dk-principle{
    padding:17px 15px;
    border-top:3px solid transparent;
    border-radius:11px;
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(90deg,var(--dkh-teal),var(--dkh-green),var(--dkh-gold)) border-box;
    border-left:1px solid var(--dkh-line);
    border-right:1px solid var(--dkh-line);
    border-bottom:1px solid var(--dkh-line);
}

.dk-principle strong{
    display:block;
    margin-bottom:5px;
    color:var(--dkh-teal-dark);
    font-size:13.5px;
}

.dk-principle span{
    display:block;
    color:#6c7a7e;
    font-size:11.8px;
    line-height:1.5;
}

/* Journal profile panel */
.dk-profile{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    overflow:hidden;
    border:1px solid var(--dkh-line);
    border-radius:16px;
    background:#fff;
}

.dk-profile-main{
    padding:22px 24px;
}

.dk-profile-main h3{
    margin:0 0 12px !important;
    color:var(--dkh-ink) !important;
    font-size:19px !important;
}

.dk-profile-list{
    display:grid;
    grid-template-columns:145px 1fr;
    gap:9px 16px;
    margin:0;
}

.dk-profile-list dt{
    color:#7b898c;
    font-size:12px;
    font-weight:700;
}

.dk-profile-list dd{
    margin:0;
    color:#334a4f;
    font-size:12.5px;
    font-weight:550;
}

.dk-profile-side{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:22px;
    color:#fff;
    background:
      radial-gradient(circle at 85% 15%,rgba(229,185,79,.22) 0 2px,transparent 3px) 0 0/17px 17px,
      linear-gradient(145deg,#096c71,#1b8e69);
}

.dk-profile-side span{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.dk-profile-side strong{
    display:block;
    margin:6px 0 8px;
    color:#fff;
    font-size:20px;
    line-height:1.25;
}

.dk-profile-side p{
    margin:0 !important;
    color:rgba(255,255,255,.82) !important;
    font-size:12px !important;
    line-height:1.6 !important;
}

/* Keep custom homepage free from theme-generated odd spacing */
.dk-journal-hub *{
    box-sizing:border-box;
}

/* Tablet */
@media (max-width: 991px){
    .dk-hub-intro{
        grid-template-columns:1fr;
    }

    .dk-hub-signature{
        min-height:105px;
    }

    .dk-facts{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .dk-process,
    .dk-principles{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dk-profile{
        grid-template-columns:1fr;
    }
}

/* Mobile */
@media (max-width: 640px){
    .dk-journal-hub{
        margin-top:28px !important;
    }

    .dk-hub-intro{
        padding:22px 20px;
        border-radius:14px;
    }

    .dk-hub-intro h2{
        font-size:23px !important;
    }

    .dk-action-grid{
        grid-template-columns:1fr;
    }

    .dk-section-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .dk-section-heading p{
        text-align:left;
    }

    .dk-facts,
    .dk-process,
    .dk-principles{
        grid-template-columns:1fr;
    }

    .dk-profile-list{
        grid-template-columns:1fr;
        gap:3px;
    }

    .dk-profile-list dd{
        margin-bottom:9px;
    }
}

@media (prefers-reduced-motion:reduce){
    .dk-action,
    .dk-action::after,
    .dk-fact{
        transition:none !important;
        transform:none !important;
    }
}

/* ==========================================================
   DARUL KHIDMAH — KEYWORDS WORD CLOUD SIDEBAR
   Tempel di PALING BAWAH stylesheet jurnal.
   ========================================================== */

.dk-wordcloud{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px 7px !important;

    padding:10px 4px 6px !important;
    line-height:1.05 !important;

    background:
        radial-gradient(circle at 50% 45%, rgba(12,143,149,.04), transparent 62%) !important;

    text-align:center !important;
}

.dk-wordcloud .dk-wc{
    display:inline-block !important;
    margin:2px 0 !important;
    white-space:nowrap !important;

    font-family:Georgia, "Times New Roman", serif !important;
    font-weight:500 !important;
    letter-spacing:-.2px !important;

    cursor:default !important;

    transform:translateY(0) scale(1) !important;

    transition:
        color .20s ease,
        transform .20s ease,
        text-shadow .20s ease,
        opacity .20s ease !important;
}

/* Size hierarchy */
.dk-wordcloud .dk-wc-xl{
    font-size:32px !important;
    font-weight:600 !important;
}

.dk-wordcloud .dk-wc-lg{
    font-size:25px !important;
}

.dk-wordcloud .dk-wc-md{
    font-size:19px !important;
}

.dk-wordcloud .dk-wc-sm{
    font-size:15px !important;
}

.dk-wordcloud .dk-wc-xs{
    font-size:12px !important;
}

/* Elegant muted palette */
.dk-wordcloud .dk-c1{ color:#0b6f73 !important; }
.dk-wordcloud .dk-c2{ color:#7a8fa4 !important; }
.dk-wordcloud .dk-c3{ color:#c58e97 !important; }
.dk-wordcloud .dk-c4{ color:#c7a04b !important; }
.dk-wordcloud .dk-c5{ color:#5f9d82 !important; }

/* Hover: slightly brighter, as in an interactive word cloud */
.dk-wordcloud .dk-wc:hover{
    color:#087f84 !important;
    transform:translateY(-2px) scale(1.07) !important;
    text-shadow:0 3px 10px rgba(8,127,132,.13) !important;
    z-index:2 !important;
}

/* Make the custom Keywords card slightly taller and airy */
.pkp_structure_sidebar .pkp_block:has(.dk-wordcloud){
    padding-bottom:16px !important;
}

/* Gold underline specifically for Keywords card */
.pkp_structure_sidebar .pkp_block:has(.dk-wordcloud) .title::after{
    background:#e4b94f !important;
    width:72px !important;
}

/* Mobile */
@media (max-width:767px){
    .dk-wordcloud .dk-wc-xl{font-size:28px !important;}
    .dk-wordcloud .dk-wc-lg{font-size:22px !important;}
    .dk-wordcloud .dk-wc-md{font-size:17px !important;}
    .dk-wordcloud .dk-wc-sm{font-size:14px !important;}
    .dk-wordcloud .dk-wc-xs{font-size:11.5px !important;}
}

@media (prefers-reduced-motion:reduce){
    .dk-wordcloud .dk-wc{
        transition:none !important;
        transform:none !important;
    }
}