/* CSS untuk background aestetik biru tua dan emas pada header */
.pkp_structure_head {
    position: relative;
    background: linear-gradient(135deg, #0c1a3a 0%, #1a365f 30%, #2d538f 70%, #b8860b 100%);
    overflow: visible !important;
    min-height: 200px;
}

/* Background pattern aestetik dengan gradien biru-emas */
.pkp_structure_head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(184, 134, 11, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(218, 165, 32, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(26, 54, 95, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(12, 26, 58, 0.7) 0%, transparent 50%),
        linear-gradient(45deg, transparent 40%, rgba(255,215,0,0.1) 50%, transparent 60%);
    background-size: 
        400px 400px,
        350px 350px,
        300px 300px,
        320px 320px,
        100% 100%;
    z-index: 1;
}

/* Islamic geometric pattern dengan warna emas */
.pkp_structure_head::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75 25c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 15c-19.33 0-35 15.67-35 35s15.67 35 35 35 35-15.67 35-35-15.67-35-35-35z' fill='%23daa520' fill-opacity='0.15'/%3E%3Cpath d='M60 45c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm30 30c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zM60 105c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zM30 75c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15z' fill='%23ffd700' fill-opacity='0.2'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10c22.091 0 40 17.909 40 40s-17.909 40-40 40-40-17.909-40-40 17.909-40 40-40zm0 10c-16.542 0-30 13.458-30 30s13.458 30 30 30 30-13.458 30-30-13.458-30-30-30z' fill='%23b8860b' fill-opacity='0.1'/%3E%3Cpath d='M35 35l15 15 15-15-15 15 15 15-15-15-15 15 15-15z' fill='%23ffd700' fill-opacity='0.25'/%3E%3C/svg%3E");
    background-size: 150px 150px, 100px 100px;
    background-position: 10% 20%, 90% 80%;
    opacity: 0.8;
    z-index: 1;
}

/* Pastikan konten header tetap di atas background */
.pkp_head_wrapper {
    position: relative;
    z-index: 2;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Style untuk logo agar kontras dengan background */
.pkp_site_name_wrapper {
    padding: 5px 0;
    text-align: center;
}

.pkp_site_name img {
    filter: 
        drop-shadow(0 4px 8px rgba(0,0,0,0.6))
        brightness(1.1)
        contrast(1.2);
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(184,134,11,0.2) 100%);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    max-height: 140px;
    width: auto;
}


.pkp_search {
    background: linear-gradient(135deg, #daa520 0%, #b8860b 100%) !important;
    color: #1a365f !important;
    font-weight: 700;
    padding: 12px 25px !important;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    border: none;
}

.pkp_search:hover {
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%) !important;
    color: #0c1a3a !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
}

.cmp_skip_to_content a:hover {
    background: linear-gradient(135deg, #b8860b 0%, #1a365f 100%);
    transform: translateY(-2px);
}

/* Menu toggle button styling */
.pkp_site_nav_toggle {
    background: linear-gradient(135deg, #daa520 0%, #b8860b 100%);
    color: #1a365f !important;
    border: 1px solid #daa520;
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.pkp_site_nav_toggle:hover {
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
    color: #0c1a3a !important;
    transform: translateY(-2px);
}

/* Responsive design */
@media (max-width: 768px) {
    .pkp_structure_head {
        min-height: 160px;
    }
    
    .pkp_head_wrapper {
        min-height: 160px;
    }
    
    .pkp_site_name img {
        max-height: 100px;
        padding: 8px;
    }
    
    .pkp_site_nav_menu {
        margin: 0 15px;
        border-radius: 15px 15px 0 0;
        padding: 0 15px;
    }
    
  
    .pkp_search {
        padding: 10px 18px !important;
        font-size: 0.9em;
    }
    
    .pkp_structure_head::before {
        background-size: 
            250px 250px,
            200px 200px,
            180px 180px,
            200px 200px,
            100% 100%;
    }
}

@media (max-width: 480px) {
    .pkp_structure_head {
        min-height: 140px;
    }
    
    .pkp_head_wrapper {
        min-height: 140px;
    }
    
    .pkp_site_name img {
        max-height: 80px;
        padding: 6px;
    }
    
    .pkp_site_nav_menu {
        margin: 0 10px;
        padding: 0 10px;
    }
  }

/* Animasi subtle untuk background */
@keyframes goldShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.pkp_structure_head::before {
    animation: goldShimmer 20s ease infinite;
    background-size: 400px 400px, 350px 350px, 300px 300px, 320px 320px, 200% 200%;
}

/* Efek glitter emas subtle */
@keyframes goldGlitter {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.pkp_structure_head::after {
    animation: goldGlitter 8s ease-in-out infinite;
}

/* ===== HEADER STYLING ===== */
.pkp_site_name .is_img img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.pkp_structure_head::before {
  background: url(https://cdn.discordapp.com/attachments/1234947940850729043/1431676164706930718/Grey_Green_Modern_Business_Email_Header.png?ex=68fe47d4&is=68fcf654&hm=6ebd62ec3c89cfd302579651f2a40ff376cb53aa1a613816e2408b0f9658fbaa&)
    #36c center center;
  opacity: 20%;
  box-shadow: inset 8px 3px 20px 1px rgba(0, 0, 0, 0.75);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

/* ===== SIDEBAR STYLING ===== */
.pkp_structure_sidebar {
  width: 300px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 15px 15px 15px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: "Poppins", sans-serif;
}

/* ===== STYLE DASAR SEMUA MENU ===== */
.pkp_structure_sidebar .content .submit-btn,
.pkp_structure_sidebar .content .menu-btn,
.pkp_structure_sidebar .content .title-btn {
  margin: 8px 0;
  padding: 12px 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

/* Pastikan link mengikuti parent */
.pkp_structure_sidebar .content .submit-btn a,
.pkp_structure_sidebar .content .menu-btn a,
.pkp_structure_sidebar .content .title-btn a {
  color: inherit !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== WARNA EMAS (UNGGAH ARTIKEL / TITLE) ===== */
.pkp_structure_sidebar .content .submit-btn,
.pkp_structure_sidebar .content .title-btn {
  background: linear-gradient(135deg, #d4af37, #f7d774);
  color: #333;
  font-weight: 700;
}

/* ===== WARNA BIRU TUA (MENU BIASA) ===== */
.pkp_structure_sidebar .content .menu-btn {
  background: linear-gradient(135deg, #1c2e4a, #2f4b7c);
  color: #ffffff;
}

/* ===== HOVER EFFECT (BERLAKU UNTUK SEMUA) ===== */
.pkp_structure_sidebar .content .submit-btn:hover,
.pkp_structure_sidebar .content .menu-btn:hover,
.pkp_structure_sidebar .content .title-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  text-decoration: underline;
  text-decoration-color: #d4af37;
  text-underline-offset: 4px;
}

/* ===== ACTIVE EFFECT ===== */
.pkp_structure_sidebar .content .submit-btn:active,
.pkp_structure_sidebar .content .menu-btn:active,
.pkp_structure_sidebar .content .title-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}


/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .pkp_structure_sidebar {
    width: 200px;
    margin: 10px;
    padding: 10px;
  }

  .pkp_structure_sidebar .content div {
    padding: 10px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .pkp_structure_sidebar {
    width: 100%;
    margin: 10px 0;
    border-radius: 0;
  }
}

/* CSS untuk background aestetik biru tua dan emas pada header */
.pkp_structure_head {
    position: relative;
    background: linear-gradient(135deg, #0c1a3a 0%, #1a365f 30%, #2d538f 70%, #b8860b 100%);
    overflow: visible !important;
    min-height: 200px;
}

/* Background pattern aestetik dengan gradien biru-emas */
.pkp_structure_head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(184, 134, 11, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(218, 165, 32, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(26, 54, 95, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(12, 26, 58, 0.7) 0%, transparent 50%),
        linear-gradient(45deg, transparent 40%, rgba(255,215,0,0.1) 50%, transparent 60%);
    background-size: 
        400px 400px,
        350px 350px,
        300px 300px,
        320px 320px,
        100% 100%;
    z-index: 1;
}

/* Islamic geometric pattern dengan warna emas */
.pkp_structure_head::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75 25c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 15c-19.33 0-35 15.67-35 35s15.67 35 35 35 35-15.67 35-35-15.67-35-35-35z' fill='%23daa520' fill-opacity='0.15'/%3E%3Cpath d='M60 45c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm30 30c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zM60 105c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zM30 75c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15z' fill='%23ffd700' fill-opacity='0.2'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10c22.091 0 40 17.909 40 40s-17.909 40-40 40-40-17.909-40-40 17.909-40 40-40zm0 10c-16.542 0-30 13.458-30 30s13.458 30 30 30 30-13.458 30-30-13.458-30-30-30z' fill='%23b8860b' fill-opacity='0.1'/%3E%3Cpath d='M35 35l15 15 15-15-15 15 15 15-15-15-15 15 15-15z' fill='%23ffd700' fill-opacity='0.25'/%3E%3C/svg%3E");
    background-size: 150px 150px, 100px 100px;
    background-position: 10% 20%, 90% 80%;
    opacity: 0.8;
    z-index: 1;
}

/* Pastikan konten header tetap di atas background */
.pkp_head_wrapper {
    position: relative;
    z-index: 2;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Style untuk logo agar kontras dengan background */
.pkp_site_name_wrapper {
    padding: 5px 0;
    text-align: center;
}

.pkp_site_name img {
    filter: 
        drop-shadow(0 4px 8px rgba(0,0,0,0.6))
        brightness(1.1)
        contrast(1.2);
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(184,134,11,0.2) 100%);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    max-height: 140px;
    width: auto;
}


.cmp_skip_to_content a:hover {
    background: linear-gradient(135deg, #b8860b 0%, #1a365f 100%);
}

/* Menu toggle button styling */
.pkp_site_nav_toggle {
    background: rgba(255, 215, 0, 0.9);
    color: #1a365f !important;
    border: 1px solid #daa520;
}

.pkp_site_nav_toggle:hover {
    background: #ffd700;
    color: #0c1a3a !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .pkp_structure_head {
        min-height: 160px;
    }
    
    .pkp_head_wrapper {
        min-height: 160px;
    }
    
    .pkp_site_name img {
        max-height: 100px;
        padding: 8px;
    }
    
    .pkp_site_nav_menu {
        margin: 0 15px;
        border-radius: 8px 8px 0 0;
    }
    
    
    .pkp_structure_head::before {
        background-size: 
            250px 250px,
            200px 200px,
            180px 180px,
            200px 200px,
            100% 100%;
    }
}

@media (max-width: 480px) {
    .pkp_structure_head {
        min-height: 140px;
    }
    
    .pkp_head_wrapper {
        min-height: 140px;
    }
    
    .pkp_site_name img {
        max-height: 80px;
        padding: 6px;
    }
    
    .pkp_site_nav_menu {
        margin: 0 10px;
    }
  }

/* Animasi subtle untuk background */
@keyframes goldShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.pkp_structure_head::before {
    animation: goldShimmer 20s ease infinite;
    background-size: 400px 400px, 350px 350px, 300px 300px, 320px 320px, 200% 200%;
}

/* Efek glitter emas subtle */
@keyframes goldGlitter {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.pkp_structure_head::after {
    animation: goldGlitter 8s ease-in-out infinite;
}

.pkp_navigation_primary_wrapper {
    padding-left: 15px;
    padding-right: 0;
}

@media (min-width: 992px) {
    .pkp_navigation_search_wrapper a {
        margin: .300rem .0;
        padding: .357rem .5em calc(.714rem - 2px);
        border-bottom: 1px solid transparent;
        color: #fff;
        text-decoration: none;
        padding-right: 10px;
    }
}

@media (min-width: 992px) {
    .pkp_navigation_search_wrapper {
        float: right;
        margin: 0;
        padding: 0;
        border: none;
        padding-right: 10px;
    }
}

@media (min-width: 992px) {
    .pkp_block {
        padding: 0.143rem;
    }
}

.pkp_site_nav_menu .pkp_nav_list {
    padding-left: 0;
    margin-left: 0;
    padding-top: 6px;
}



/* ===== VARIABLES & RESET ===== */
:root {
    --primary-blue: #1e3a8a;
    --dark-blue: #1e40af;
    --light-blue: #3b82f6;
    --accent-gold: #f59e0b;
    --light-gold: #fbbf24;
    --white: #ffffff;
    --light-gray: #f8fafc;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

/* ===== BACKGROUND WITH DIAGONAL LINES ===== */
.journal-container {
    background: 
        linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.03) 10px,
            rgba(255, 255, 255, 0.03) 20px
        );
    min-height: 100vh;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.journal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 15px,
            rgba(255, 255, 255, 0.05) 15px,
            rgba(255, 255, 255, 0.05) 30px
        );
    pointer-events: none;
}

/* ===== MAIN CONTENT CARD ===== */
.journal-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.journal-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--accent-gold), var(--light-blue), var(--accent-gold));
    border-radius: 22px;
    z-index: -1;
    opacity: 0.1;
}

/* ===== JOURNAL HEADER ===== */
.journal-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--light-gray);
    position: relative;
}

.journal-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.journal-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--light-blue));
    border-radius: 2px;
}

.journal-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    font-weight: 300;
    margin-top: 1rem;
}

/* ===== METRICS SECTION ===== */
.journal-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.metric-card {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid var(--accent-gold);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, transparent 40%, rgba(245, 158, 11, 0.1) 100%);
    border-radius: 0 15px 0 0;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* ===== PUBLISHER INFO ===== */
.publisher-info {
    background: linear-gradient(135deg, var(--light-gray), var(--white));
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
    border: 1px solid rgba(59, 130, 246, 0.1);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-gold), var(--light-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: bold;
}

.info-content h4 {
    margin: 0;
    color: var(--primary-blue);
    font-size: 1rem;
    font-weight: 600;
}

.info-content p {
    margin: 0.2rem 0 0 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* ===== INDEXED BY SECTION ===== */
.indexed-section {
    margin: 3rem 0;
}

.section-title {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--accent-gold);
}

.indexed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.index-item {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.index-item:hover {
    transform: translateY(-3px);
    border-color: var(--accent-gold);
}

.index-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--accent-gold), var(--light-blue));
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    transition: var(--transition);
}

.index-item:hover::before {
    opacity: 1;
}

/* ===== ACTION BUTTONS ===== */
.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), var(--light-gold));
    color: var(--white);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(0);
}

/* ===== SEARCH BAR ===== */
.search-section {
    background: var(--light-gray);
    padding: 2rem;
    border-radius: 15px;
    margin: 2rem 0;
    text-align: center;
}

.search-box {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 50px;
    background: var(--white);
    font-size: 1rem;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.3);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .journal-container {
        padding: 1rem;
    }
    
    .journal-card {
        padding: 2rem 1.5rem;
    }
    
    .journal-title {
        font-size: 2rem;
    }
    
    .journal-metrics {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.journal-card {
    animation: fadeInUp 0.8s ease;
}

.metric-card {
    animation: fadeInUp 0.8s ease 0.2s both;
}

.index-item {
    animation: fadeInUp 0.8s ease 0.4s both;
}

/* ===== DECORATIVE ELEMENTS ===== */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.floating-element {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}


/* ==== NAVIGATION TRANSPARANT + BOLD + GLASS HOVER ==== */

/* Navbar transparan */
.pkp_site_nav_menu,
.pkp_navigation_primary {
    background: transparent !important;
    box-shadow: none !important;
}

/* Teks menu lebih tebal */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > span {
    font-weight: 700 !important;
    color: #ffffff !important; /* jika ingin putih, bisa diganti */
}

/* Efek kaca saat hover */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > span:hover {
    background: rgba(255, 255, 255, 0.18) !important; /* transparan */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.25s ease-in-out;
}

/* Efek kaca untuk menu yang sedang aktif */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.current > span {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 6px;
}

/* Dropdown tetap terlihat rapi */
.pkp_navigation_primary .dropdown-menu {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* Hover untuk item dropdown */
.pkp_navigation_primary .dropdown-menu a:hover {
    background: rgba(255,255,255,0.35) !important;
    color: #0c1a3a !important;
    border-radius: 4px;
}


/* ==== CLEAN ELEGANT DROPDOWN – NO GOLD HOVER ==== */

.pkp_navigation_primary .dropdown-menu {
    background: rgba(12, 38, 68, 0.55) !important; /* biru transparan */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 12px 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* teks lebih jelas & kontras */
.pkp_navigation_primary .dropdown-menu a {
    color: #ffffff !important;  /* putih jelas */
    font-weight: 600;
    padding: 10px 20px;
    display: block;
    border-radius: 6px;
    transition: 0.25s ease;
}

/* hover elegan tanpa warna kuning */
.pkp_navigation_primary .dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.22) !important; /* glass white highlight */
    color: #0c1a3a !important; /* biru gelap kontras */
    transform: translateX(5px);
}

/* separator halus */
.pkp_navigation_primary .dropdown-menu a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* indikator segitiga tanpa aksen emas */
.pkp_navigation_primary .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 40px;
    width: 12px;
    height: 12px;
    background: rgba(12, 38, 68, 0.55);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    transform: rotate(45deg);
}


/* ==== ACADEMIC CROSS DIAGONAL BACKGROUND (STRONGER & CLEAN) ==== */
body {
  background-image: linear-gradient(
      297deg,
      transparent 0%,
      transparent 34%,
      rgba(178, 178, 178, 0.02) 34%,
      rgba(178, 178, 178, 0.02) 53%,
      transparent 53%,
      transparent 100%
    ),
    linear-gradient(
      222deg,
      transparent 0%,
      transparent 30%,
      rgba(202, 216, 243, 0.24) 30%,
      rgba(202, 216, 243, 0.24) 58%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      352deg,
      transparent 0%,
      transparent 25%,
      rgba(204, 217, 247, 0.11) 25%,
      rgba(204, 217, 247, 0.11) 57%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
}

/* =======================================================
   MOBILE SINGLE-PANEL MENU WITH GLASS EFFECT – OJS 3.3
   ======================================================= */
@media (max-width: 900px) {

  /* Panel menu utama menjadi satu kotak */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
      background: rgba(12, 38, 68, 0.55) !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      padding: 18px 0 24px 0 !important;
      width: 92% !important;
      margin: 0 auto !important;
      top: 75px !important; /* JARAK DARI HEADER / IKON X */
      box-shadow: 0 18px 45px rgba(0,0,0,0.28);
      position: absolute !important;
      left: 0; right: 0;
  }

  /* MENU UTAMA */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li > a {
      color: #ffffff !important;
      font-weight: 700;
      padding: 12px 26px !important;
      display: block;
  }

  /* SUBMENU NAVIGASI (jadi bagian dari panel yang sama) */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li > ul {
      background: transparent !important;
      border: none !important;
      padding: 6px 0 6px 0 !important;
      margin-left: 10px !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li > ul a {
      color: #ffffff !important;
      font-weight: 500;
      padding: 10px 32px !important;
      display: block;
  }

  /* PEMBATAS ANTARA NAVIGASI & USER */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user_wrapper {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.25);
  }

  /* USER MENU ITEM */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user > li > a,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user > li > ul a {
      color: #ffffff !important;
      font-weight: 500;
      padding: 10px 26px !important;
      display: block;
  }

  /* HOVER */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen a:hover {
      background: rgba(255, 255, 255, 0.22) !important;
      color: #0c1a3a !important;
      transform: translateX(5px);
      border-radius: 6px;
  }

  /* Hilangkan kotak-kotak submenu terpisah */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen ul ul {
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
  }
}

/* =======================================================
   FORCE MOBILE MENU STYLE EVEN IF DESKTOP SITE IS ENABLED
   ======================================================= */
@media (max-width: 1280px), (pointer: coarse), (hover: none) {

  /* Panel menu utama menjadi satu kotak */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
      background: rgba(12, 38, 68, 0.55) !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      padding: 18px 0 24px 0 !important;
      width: 92% !important;
      margin: 0 auto !important;
      top: 75px !important;
      box-shadow: 0 18px 45px rgba(0,0,0,0.28);
      position: absolute !important;
      left: 0; right: 0;
      z-index: 9999 !important;
  }

  /* MENU UTAMA */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li > a {
      color: #ffffff !important;
      font-weight: 700;
      padding: 12px 26px !important;
      display: block;
  }

  /* SUBMENU */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li > ul,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user > li > ul {
      background: transparent !important;
      border: none !important;
      padding: 6px 0 6px 0 !important;
      margin-left: 10px !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen ul ul a {
      color: #ffffff !important;
      font-weight: 500;
      padding: 10px 32px !important;
      display: block;
  }

  /* USER PANEL SEPARATOR */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user_wrapper {
      margin-top: 16px !important;
      padding-top: 16px !important;
      border-top: 1px solid rgba(255,255,255,0.25) !important;
  }

  /* HOVER */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen a:hover {
      background: rgba(255, 255, 255, 0.22) !important;
      color: #0c1a3a !important;
      transform: translateX(5px);
      border-radius: 6px;
  }
}

/* ============================================
   SHIFT USER MENU TEXT TO THE RIGHT (DESKTOP)
   ============================================ */
@media (min-width: 901px) {
  #navigationUser.pkp_navigation_user {
      padding-left: 18px !important; /* geser kanan */
      margin-left: 12px !important;
  }

  /* item link di dalam menu user */
  #navigationUser.pkp_navigation_user > li > a {
      padding-left: 12px !important;
      padding-right: 12px !important;
  }
}

/* =======================================================
   SHIFT USER SECTION IN MOBILE PANEL
   ======================================================= */
@media (max-width: 1280px), (pointer: coarse), (hover: none) {
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user > li > a {
      padding-left: 36px !important; /* lebih ke kanan */
  }
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user > li > ul a {
      padding-left: 42px !important; /* submenu lebih masuk */
  }
}

/* =======================================================
   FIX USER MENU POSITION ON MID DESKTOP RESOLUTIONS
   (e.g., 1024–1280px including 1100px case)
   ======================================================= */
@media (min-width: 1025px) and (max-width: 1280px) {
  #navigationUserWrapper,
  #navigationUser {
      margin-left: 24px !important; /* geser kanan */
      padding-left: 12px !important;
  }

  #navigationUser > li > a {
      padding-left: 14px !important;
      padding-right: 14px !important;
  }

  /* ensure search button and user menu don't overlap */
  .pkp_navigation_search_wrapper {
      margin-right: 24px !important;
  }
}


/* =======================================================
   DESKTOP USER DROPDOWN GLASS STYLE (MATCH MAIN MENU)
   ======================================================= */
@media (min-width: 1025px) {

  .pkp_navigation_user .dropdown-menu,
  #navigationUser li ul {
      background: rgba(12, 38, 68, 0.55) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      padding: 12px 0 !important;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  }

  #navigationUser li ul a {
      color: #ffffff !important;
      font-weight: 600;
      padding: 10px 20px !important;
      display: block !important;
      border-radius: 6px;
      transition: 0.25s ease;
  }

  #navigationUser li ul a:hover {
      background: rgba(255, 255, 255, 0.22) !important;
      color: #0c1a3a !important;
      transform: translateX(5px);
  }

  #navigationUser li ul a + a {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* =======================================================
   DESKTOP RESET & POSITIONING (≥ 992px)
   ======================================================= */
@media (min-width: 992px) {

    /* Reset panel mobile agar tidak terbawa ke desktop */
    nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        box-shadow: none !important;
    }

    /* Wrapper menu utama kembali BLOCK seperti default OJS */
    .pkp_navigation_primary_wrapper {
        display: block !important;
        width: 100% !important;
    }

    /* Tombol search tetap di kanan */
    .pkp_navigation_search_wrapper {
        float: right !important;
        margin-right: 10px !important;
        position: relative !important;
        top: -5px !important; /* sejajarkan vertikal */
    }

    /* Kembalikan user menu ke TOP BAR */
    #navigationUserWrapper,
    #navigationUser {
        position: static !important;
        float: right !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Tempatkan user menu sejajar dengan search */
    .pkp_head_wrapper #navigationUserWrapper {
        position: absolute !important;
        top: 5px !important;
        z-index: 9999 !important;
    }

    /* Hilangkan padding bawaan agar tidak turun */
    #navigationUserWrapper a {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ===== ANIMATIONS (FIX) ===== */
.pkp_structure_sidebar .content .submit-btn,
.pkp_structure_sidebar .content .menu-btn,
.pkp_structure_sidebar .content .title-btn {
  animation: fadeIn 0.5s ease-out;
}

.pkp_structure_sidebar .content .submit-btn {
  animation-delay: 0.1s;
}

.pkp_structure_sidebar .content .menu-btn:nth-of-type(2) {
  animation-delay: 0.2s;
}
.pkp_structure_sidebar .content .menu-btn:nth-of-type(3) {
  animation-delay: 0.3s;
}
.pkp_structure_sidebar .content .menu-btn:nth-of-type(4) {
  animation-delay: 0.4s;
}

/* ===== FIX LINK SIDEBAR (OVERRIDE INLINE) ===== */
.pkp_structure_sidebar .content .submit-btn a,
.pkp_structure_sidebar .content .menu-btn a,
.pkp_structure_sidebar .content .title-btn a {
  color: inherit !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
  height: 100%;
}

/* Khusus UNGGAH ARTIKEL (emas) */
.pkp_structure_sidebar .content .submit-btn a {
  color: #333 !important;
  font-weight: 700;
}


/* =======================================================
   SAKINAH SIDEBAR - PREMIUM BLUE GOLD STYLE
   ======================================================= */

/* Wrapper sidebar */
.pkp_structure_sidebar {
  background: transparent !important;
  padding: 18px 14px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: "Poppins", Arial, sans-serif;
}

/* Hilangkan style bawaan block OJS agar custom card lebih bersih */
.pkp_structure_sidebar .pkp_block {
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Card utama */
.sakinah-sidebar-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(22, 50, 100, 0.10);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: 0 10px 26px rgba(16, 39, 77, 0.13);
  overflow: hidden;
  transition: all 0.28s ease;
}

.sakinah-sidebar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(16, 39, 77, 0.18);
}

/* Judul setiap block */
.sakinah-sidebar-title {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px 0 48px;
  margin: -2px -2px 14px -2px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d7a91d 0%, #f1cf63 52%, #c99510 100%);
  color: #143264;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Icon judul via CSS, tidak perlu span di HTML */
.sakinah-sidebar-title::before {
  content: "i";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #173565;
  color: #f4ca4f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

/* Icon berbeda per block */
.sakinah-template-card .sakinah-sidebar-title::before {
  content: "▣";
  font-family: Arial, sans-serif;
  font-size: 13px;
}

.sakinah-tools-card .sakinah-sidebar-title::before {
  content: "✣";
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.sakinah-stat-card .sakinah-sidebar-title::before {
  content: "▥";
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* =======================================================
   MENU INFORMASI JURNAL
   ======================================================= */

.sakinah-info-menu {
  padding-bottom: 10px;
}

.sakinah-info-menu .sakinah-sidebar-menu {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(20, 50, 100, 0.10);
}

.sakinah-info-menu .sakinah-sidebar-menu:last-child {
  border-bottom: none;
}

.sakinah-info-menu .sakinah-sidebar-menu a {
  position: relative;
  display: block;
  padding: 10px 28px 10px 10px;
  color: #163264 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none !important;
  border-radius: 9px;
  transition: all 0.25s ease;
}

/* Panah kanan */
.sakinah-info-menu .sakinah-sidebar-menu a::after {
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #c99510;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  transition: all 0.25s ease;
}

/* Garis aksen hover */
.sakinah-info-menu .sakinah-sidebar-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 0;
  border-radius: 6px;
  background: #d7a91d;
  transition: all 0.25s ease;
}

/* Hover menu */
.sakinah-info-menu .sakinah-sidebar-menu a:hover {
  color: #0f2a58 !important;
  background: linear-gradient(90deg, rgba(245, 210, 102, 0.22), rgba(255,255,255,0.82));
  padding-left: 18px;
  transform: translateX(4px);
  box-shadow: 0 8px 18px rgba(16, 39, 77, 0.10);
}

.sakinah-info-menu .sakinah-sidebar-menu a:hover::before {
  width: 4px;
}

.sakinah-info-menu .sakinah-sidebar-menu a:hover::after {
  right: 7px;
  color: #a87906;
}

/* =======================================================
   TEMPLATE ARTIKEL
   ======================================================= */

.sakinah-template-card img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 4px auto 2px;
  border-radius: 12px;
  transition: all 0.28s ease;
}

.sakinah-template-card img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(16, 39, 77, 0.18);
}

/* =======================================================
   APLIKASI PENDUKUNG
   Catatan: sementara tetap mengakomodasi HTML lama
   yang membungkus gambar dengan .sakinah-sidebar-title.
   ======================================================= */

.sakinah-tools-card .sakinah-sidebar-title:not(:first-child) {
  min-height: auto;
  display: block;
  padding: 0;
  margin: 10px 0 0 0;
  background: transparent;
  box-shadow: none;
  border-radius: 12px;
  letter-spacing: 0;
}

.sakinah-tools-card .sakinah-sidebar-title:not(:first-child)::before {
  display: none;
}

.sakinah-tools-card img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 8px auto;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 13px;
  box-shadow: 0 6px 16px rgba(16, 39, 77, 0.10);
  transition: all 0.28s ease;
}

.sakinah-tools-card img:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 14px 28px rgba(16, 39, 77, 0.18);
}

/* =======================================================
   STATISTIK KUNJUNGAN
   ======================================================= */

.sakinah-stat-card a {
  display: block;
  text-decoration: none !important;
}

.sakinah-stat-card img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 6px auto 0;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 13px;
  box-shadow: 0 6px 16px rgba(16, 39, 77, 0.10);
  transition: all 0.28s ease;
}

/* Sembunyikan tracking gif Histats 0.gif */
.sakinah-stat-card img[src*="0.gif"] {
  display: none !important;
}

.sakinah-stat-card img:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 14px 28px rgba(16, 39, 77, 0.18);
}

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width: 900px) {
  .pkp_structure_sidebar {
    width: auto !important;
    padding: 16px 12px !important;
    margin: 0 !important;
  }

  .sakinah-sidebar-card {
    margin-bottom: 16px;
    border-radius: 15px;
  }

  .sakinah-sidebar-title {
    min-height: 42px;
    font-size: 12px;
    letter-spacing: 1.1px;
  }

  .sakinah-info-menu .sakinah-sidebar-menu a {
    font-size: 13px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

@media (max-width: 480px) {
  .sakinah-sidebar-card {
    padding: 12px;
  }

  .sakinah-sidebar-title {
    padding-left: 44px;
  }

  .sakinah-sidebar-title::before {
    left: 12px;
  }
}

/* =======================================================
   SAKINAH FOOTER - FULL BLEED LIKE HEADER
   ======================================================= */

/* Paksa footer keluar dari container OJS agar selebar layar */
.pkp_structure_footer_wrapper {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 42px !important;
  background: transparent !important;
}

/* Footer dibuat sama konsepnya seperti header: full background */
.pkp_structure_footer {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 120px;
  margin: 0 !important;
  padding: 26px 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 25%, rgba(212, 175, 55, 0.16) 0%, transparent 30%),
    radial-gradient(circle at 86% 75%, rgba(231, 200, 90, 0.14) 0%, transparent 34%),
    linear-gradient(135deg, #0d2343 0%, #173565 52%, #10284d 100%);
  border-top: 4px solid #d4af37;
  box-shadow: 0 -8px 24px rgba(13, 35, 67, 0.14);
}

/* Pattern halus supaya nyambung dengan header */
.pkp_structure_footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(231, 200, 90, 0.13) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 8px, transparent 9px);
  background-size: 78px 78px, 120px 120px;
  background-position: 0 0, 34px 22px;
  opacity: 0.36;
  pointer-events: none;
}

/* Garis emas highlight */
.pkp_structure_footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(231, 200, 90, 0.95),
    transparent
  );
}

/* Area brand OJS/PKP */
.pkp_brand_footer {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 36px));
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

/* Link logo tanpa container/kotak */
.pkp_brand_footer a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Pastikan tidak ada label tambahan dobel */
.pkp_brand_footer a::before {
  display: none !important;
  content: none !important;
}

/* Logo OJS/PKP dibuat lebih kecil */
.pkp_brand_footer img {
  display: block;
  width: auto !important;
  max-width: 112px !important;
  height: auto !important;
  opacity: 0.88;
  border-radius: 0 !important;
  filter:
    brightness(0)
    invert(1)
    sepia(12%)
    saturate(240%)
    hue-rotate(185deg)
    brightness(1.05);
  transition: all 0.25s ease;
}

/* Hover logo */
.pkp_brand_footer a:hover img {
  opacity: 1;
  transform: translateY(-2px);
  filter:
    brightness(0)
    invert(1)
    sepia(35%)
    saturate(520%)
    hue-rotate(350deg)
    brightness(1.12);
}

/* =======================================================
   SUPAYA HEADER DAN FOOTER SAMA-SAMA FULL BLEED
   ======================================================= */

.pkp_structure_head {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Isi header tetap dibatasi agar logo/nav tidak melebar liar */
.pkp_head_wrapper {
  width: min(980px, calc(100% - 36px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Responsive */
@media (max-width: 768px) {
  .pkp_structure_footer {
    min-height: 105px;
    padding: 24px 0 !important;
  }

  .pkp_brand_footer {
    justify-content: center;
    min-height: 58px;
  }

  .pkp_brand_footer img {
    max-width: 96px !important;
  }

  .pkp_head_wrapper {
    width: min(100%, calc(100% - 24px));
  }
}

@media (max-width: 480px) {
  .pkp_structure_footer {
    min-height: 96px;
    padding: 22px 0 !important;
  }

  .pkp_brand_footer img {
    max-width: 88px !important;
  }
}

/* =======================================================
   SAKINAH FOOTER - SAFE COMPACT VERSION
   Tidak mengubah header dan body
   ======================================================= */

.pkp_structure_footer_wrapper {
  width: 100% !important;
  margin-top: 34px !important;
  background: transparent !important;
}

.pkp_structure_footer {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 18px 0 14px !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(212, 175, 55, 0.14) 0%, transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(231, 200, 90, 0.12) 0%, transparent 34%),
    linear-gradient(135deg, #0d2343 0%, #173565 55%, #10284d 100%);
  border-top: 3px solid #d4af37;
  color: #f8f3e6;
  box-shadow: 0 -8px 22px rgba(13, 35, 67, 0.14);
}

.pkp_structure_footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(231, 200, 90, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.05) 0 8px, transparent 9px);
  background-size: 78px 78px, 120px 120px;
  background-position: 0 0, 34px 22px;
  opacity: 0.28;
  pointer-events: none;
}

/* Konten footer saja yang dibatasi, header/body tidak disentuh */
.pkp_footer_content {
  position: relative;
  z-index: 2;
  width: min(960px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.sakinah-footer-content {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 28px;
  align-items: start;
}

.sakinah-footer-logo {
  display: block;
  width: 165px !important;
  max-width: 100%;
  height: auto;
  margin: 0 0 9px 0 !important;
}

.sakinah-footer-content h3 {
  margin: 0 0 7px 0 !important;
  color: #e7c85a;
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1.35;
}

.sakinah-footer-content p {
  margin: 0 0 6px 0 !important;
  color: rgba(248, 243, 230, 0.9);
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}

.sakinah-footer-content strong {
  color: #ffffff;
  font-weight: 800;
}

.sakinah-footer-content a {
  color: #e7c85a !important;
  font-weight: 700;
  text-decoration: none !important;
}

.sakinah-footer-content a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* Lisensi */
.sakinah-footer-license {
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(231, 200, 90, 0.22);
}

.sakinah-footer-license img {
  display: block;
  width: 64px !important;
  height: auto;
  margin: 0 0 6px 0 !important;
  border-radius: 3px;
}

.sakinah-footer-license p {
  margin-bottom: 0 !important;
  font-size: 11px !important;
}

/* Maps */
.sakinah-footer-location h3 {
  font-size: 14px !important;
}

.sakinah-footer-map {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(231, 200, 90, 0.28);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  background: rgba(255,255,255,0.08);
}

.sakinah-footer-map iframe {
  display: block;
  width: 100% !important;
  height: 130px !important;
  border: 0 !important;
}

/* OJS/PKP bawaan */
.pkp_brand_footer {
  position: relative;
  z-index: 2;
  width: min(960px, calc(100% - 36px)) !important;
  margin: 10px auto 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid rgba(231, 200, 90, 0.16);
  display: flex;
  justify-content: flex-end;
}

.pkp_brand_footer a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.pkp_brand_footer a::before {
  display: none !important;
  content: none !important;
}

.pkp_brand_footer img {
  display: block;
  width: auto !important;
  max-width: 76px !important;
  height: auto !important;
  opacity: 0.82;
  filter:
    brightness(0)
    invert(1)
    sepia(10%)
    saturate(220%)
    hue-rotate(185deg)
    brightness(1.05);
  transition: all 0.25s ease;
}

.pkp_brand_footer a:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 768px) {
  .pkp_structure_footer {
    padding: 20px 0 16px !important;
  }

  .sakinah-footer-content {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sakinah-footer-logo {
    width: 155px !important;
  }

  .sakinah-footer-map iframe {
    height: 160px !important;
  }

  .pkp_brand_footer {
    justify-content: flex-start;
  }

  .pkp_brand_footer img {
    max-width: 72px !important;
  }
}

/* =======================================================
   SAKINAH FOOTER - ALIGN WITH HEADER WIDTH
   ======================================================= */

/* Lebarkan area isi footer agar sejajar dengan header */
.pkp_footer_content,
.pkp_brand_footer {
  width: min(1150px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Atur ulang komposisi 2 kolom agar tidak terlalu menumpuk di tengah */
.sakinah-footer-content {
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 56px !important;
  align-items: start !important;
}

/* Kolom lokasi tetap di kanan */
.sakinah-footer-location {
  justify-self: end;
  width: 100%;
  max-width: 420px;
}

/* Map jangan terlalu kecil */
.sakinah-footer-map iframe {
  height: 135px !important;
}

/* OJS/PKP tetap rata kanan mengikuti lebar footer */
.pkp_brand_footer {
  justify-content: flex-end !important;
}

/* Responsive */
@media (max-width: 768px) {
  .pkp_footer_content,
  .pkp_brand_footer {
    width: min(100%, calc(100% - 28px)) !important;
  }

  .sakinah-footer-content {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .sakinah-footer-location {
    justify-self: stretch;
    max-width: none;
  }

  .pkp_brand_footer {
    justify-content: flex-start !important;
  }
}

/* =======================================================
   SAKINAH MOBILE JOURNAL INFO CARD
   Membuat card homepage rapi seperti layout Jurnal Nalar
   ======================================================= */

@media (max-width: 768px) {

  /* Card informasi jurnal di additional content */
  .page_index_journal .additional_content section.additional_content > div {
    display: block !important;
    max-width: 92% !important;
    margin: 18px auto 24px !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ffffff 0%, #eef5ff 48%, #d8e8fb 100%) !important;
    box-shadow: 0 10px 26px rgba(16, 39, 77, 0.16) !important;
    border: 1px solid rgba(22, 50, 100, 0.12) !important;
    text-align: center !important;
  }

  /* Wrapper cover */
  .page_index_journal .additional_content section.additional_content > div > div:first-child {
    margin: 0 auto 18px !important;
    flex-shrink: 1 !important;
    text-align: center !important;
  }

  /* Cover jurnal */
  .page_index_journal .additional_content section.additional_content > div > div:first-child img {
    width: 50% !important;
    max-width: 200px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(16, 39, 77, 0.18) !important;
  }

  /* Area teks kanan di desktop menjadi normal di mobile */
  .page_index_journal .additional_content section.additional_content > div > div:nth-child(2) {
    max-height: none !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #38465a !important;
  }

  /* Judul jurnal */
  .page_index_journal .additional_content section.additional_content h1 {
    margin: 0 0 14px !important;
    color: #173565 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  /* Metadata */
  .page_index_journal .additional_content section.additional_content p {
    margin: 6px 0 !important;
    color: #3f4a5a !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  .page_index_journal .additional_content section.additional_content p strong {
    display: inline-block !important;
    color: #333333 !important;
    font-weight: 800 !important;
  }

  /* Link kepala redaksi */
  .page_index_journal .additional_content section.additional_content a {
    color: #006b9a !important;
    font-weight: 600 !important;
  }

  /* Tombol unggah naskah */
  .page_index_journal .additional_content section.additional_content .btn-submit {
    display: inline-block !important;
    margin-top: 10px !important;
    padding: 10px 18px !important;
    border-radius: 7px !important;
    background: linear-gradient(135deg, #d4af37 0%, #e6c45a 48%, #c99510 100%) !important;
    color: #173565 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(16, 39, 77, 0.18) !important;
    text-decoration: none !important;
  }

  .page_index_journal .additional_content section.additional_content .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(16, 39, 77, 0.22) !important;
  }

  /* Narasi di bawah card */
  .page_index_journal > .additional_content > p {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    text-align: justify !important;
  }
}

/* =======================================================
   FIX MOBILE SIDEBAR TITLE ICON - SAKINAH
   ======================================================= */

@media (max-width: 768px) {

  .sakinah-sidebar-title {
    min-height: 42px !important;
    padding: 0 14px 0 48px !important;
    margin: -2px -2px 14px -2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    color: #143264 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 1px !important;
    text-align: left !important;
  }

  .sakinah-sidebar-title::before {
    left: 14px !important;
    top: 50% !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .sakinah-template-card .sakinah-sidebar-title,
  .sakinah-tools-card .sakinah-sidebar-title,
  .sakinah-stat-card .sakinah-sidebar-title {
    padding-left: 50px !important;
  }
}

/* =======================================================
   FIX ICON MUNCUL DI LOGO TOOLS
   karena gambar masih dibungkus .sakinah-sidebar-title
   ======================================================= */

.sakinah-tools-card .sakinah-sidebar-title:not(:first-child) {
  min-height: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 10px 0 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  letter-spacing: 0 !important;
}

.sakinah-tools-card .sakinah-sidebar-title:not(:first-child)::before {
  display: none !important;
  content: none !important;
}

.sakinah-tools-card .sakinah-sidebar-title:not(:first-child) img {
  display: block !important;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  margin: 8px auto !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border-radius: 13px !important;
  box-shadow: 0 6px 16px rgba(16, 39, 77, 0.10) !important;
  transition: all 0.28s ease !important;
}

.sakinah-tools-card .sakinah-sidebar-title:not(:first-child) a:hover img {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 14px 28px rgba(16, 39, 77, 0.18) !important;
}

/* =======================================================
   HIDE BODY SEPARATOR LINES - SAKINAH
   ======================================================= */

/* Hilangkan garis vertikal antara main content dan sidebar */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
  border-left: none !important;
  border-right: none !important;
}

/* Jika theme membuat garis lewat pseudo element */
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
  display: none !important;
  content: none !important;
}

/* Hilangkan garis horizontal tipis di atas body jika masih muncul */
.pkp_structure_content {
  border-top: none !important;
}

/* Hilangkan separator bawaan tambahan di area konten */
.page_index_journal,
.page_index_journal .additional_content,
.pkp_page_index .pkp_structure_main {
  border-top: none !important;
  border-bottom: none !important;
}


/* =======================================================
   SAKINAH BODY + SIDEBAR CARD - STABLE DESKTOP VERSION
   Pakai ini untuk membungkus main + sidebar dalam satu card
   ======================================================= */

@media (min-width: 901px) {

  /* Card besar pembungkus main + sidebar */
  .pkp_structure_content.has_sidebar {
    width: min(1150px, calc(100% - 42px)) !important;
    max-width: none !important;
    margin: 34px auto 40px !important;
    padding: 28px 28px 30px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    column-gap: 30px !important;
    align-items: start !important;

    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(22, 50, 100, 0.09) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(16, 39, 77, 0.12) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Reset bawaan OJS agar main/sidebar ikut grid */
  .pkp_structure_content.has_sidebar .pkp_structure_main,
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    float: none !important;
    clear: none !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Main content */
  .pkp_structure_content.has_sidebar .pkp_structure_main {
    grid-column: 1 !important;
    padding: 0 !important;
  }

  /* Sidebar */
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    grid-column: 2 !important;
    padding: 0 !important;
  }

  /* Block sidebar jangan menambah jarak berlebihan */
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block {
    margin-bottom: 14px !important;
  }

  /* Card sidebar tetap mengikuti lebar kolom */
  .pkp_structure_content.has_sidebar .sakinah-sidebar-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Konten homepage jangan terlalu mepet */
  .pkp_structure_content.has_sidebar .page_index_journal {
    padding: 0 !important;
  }

  /* Card info jurnal tetap center di kolom main */
  .pkp_structure_content.has_sidebar .page_index_journal .additional_content section.additional_content > div {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hilangkan separator bawaan */
  .pkp_structure_content.has_sidebar::before,
  .pkp_structure_content.has_sidebar::after,
  .pkp_structure_main::before,
  .pkp_structure_main::after,
  .pkp_structure_sidebar::before,
  .pkp_structure_sidebar::after {
    display: none !important;
    content: none !important;
  }
}

/* =======================================================
   MOBILE: Jangan pakai card wrapper besar
   Biar tetap natural dan rapi vertikal
   ======================================================= */

@media (max-width: 900px) {
  .pkp_structure_content.has_sidebar {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px 26px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .pkp_structure_content.has_sidebar .pkp_structure_main,
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}


/* =======================================================
   SAKINAH BREADCRUMB - ELEGANT BLUE GOLD STYLE
   ======================================================= */

/* Wrapper breadcrumb */
.cmp_breadcrumbs {
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* List breadcrumb */
.cmp_breadcrumbs ol,
.cmp_breadcrumbs ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  list-style: none !important;
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(22, 50, 100, 0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(16, 39, 77, 0.08) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Item breadcrumb */
.cmp_breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* Link breadcrumb */
.cmp_breadcrumbs a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  color: #173565 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  transition: all 0.24s ease;
}

/* Hover link */
.cmp_breadcrumbs a:hover {
  color: #0d2343 !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(255, 255, 255, 0.70)) !important;
  transform: translateY(-1px);
}

/* Separator bawaan */
.cmp_breadcrumbs .separator {
  color: #d4af37 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  margin: 0 2px !important;
}

/* Jika separator berupa slash text biasa */
.cmp_breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #d4af37;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

/* Hindari dobel separator jika OJS sudah punya .separator */
.cmp_breadcrumbs li .separator {
  display: none !important;
}

/* Item terakhir/current */
.cmp_breadcrumbs li:last-child {
  padding: 6px 10px !important;
  color: #6f7785 !important;
  background: rgba(255, 255, 255, 0.48) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .cmp_breadcrumbs {
    margin-bottom: 18px !important;
  }

  .cmp_breadcrumbs ol,
  .cmp_breadcrumbs ul {
    padding: 9px 10px !important;
    gap: 5px !important;
    border-radius: 12px !important;
  }

  .cmp_breadcrumbs a,
  .cmp_breadcrumbs li,
  .cmp_breadcrumbs li:last-child {
    font-size: 12px !important;
  }

  .cmp_breadcrumbs a,
  .cmp_breadcrumbs li:last-child {
    padding: 5px 8px !important;
  }

  .cmp_breadcrumbs li:not(:last-child)::after {
    margin-left: 5px;
    font-size: 16px;
  }
}


/* =======================================================
   SAKINAH BODY TEXT JUSTIFY
   ======================================================= */

/* Paragraf utama di area body */
.pkp_structure_main p,
.page_index_journal p,
.page_about p,
.page_static p,
.obj_issue_toc .description,
.obj_galley_link + p {
  text-align: justify !important;
  text-justify: inter-word;
}

/* Khusus narasi homepage */
.page_index_journal > .additional_content > p,
.page_index_journal .additional_content > p {
  text-align: justify !important;
  text-justify: inter-word;
}

/* Jangan justify area yang memang harus center/khusus */
.pkp_structure_main .cmp_breadcrumbs *,
.pkp_structure_main .btn-submit,
.pkp_structure_main .pkp_screen_reader,
.pkp_structure_main .sakinah-footer-content p,
.pkp_structure_main .sakinah-sidebar-card p,
.page_index_journal section.additional_content p {
  text-align: initial !important;
}

/* Mobile: justify tetap aktif untuk narasi, tapi jangan terlalu memaksa elemen pendek */
@media (max-width: 768px) {
  .pkp_structure_main p,
  .page_index_journal > .additional_content > p,
  .page_index_journal .additional_content > p {
    text-align: justify !important;
    line-height: 1.75 !important;
  }

  .page_index_journal section.additional_content p {
    text-align: center !important;
  }
}

/* =======================================================
   AICIEF / PROCEEDINGS UNZAH
   FINAL OVERRIDE: BACKGROUND HEADER + FOOTER ONLY
   Tidak mengubah poster, navigasi, Search, atau Register/Login.
   ======================================================= */

:root {
  --aicief-teal-950: #022c2a;
  --aicief-teal-900: #043a36;
  --aicief-teal-800: #075047;
  --aicief-copper: #c88a3d;
  --aicief-copper-light: #dda85d;
  --aicief-ivory: #fbf8f1;
}

/* HEADER BACKGROUND ONLY */
.pkp_structure_head {
  position: relative !important;
  isolation: isolate;
  background: linear-gradient(
    135deg,
    var(--aicief-teal-950) 0%,
    var(--aicief-teal-900) 54%,
    var(--aicief-teal-800) 100%
  ) !important;
}

.pkp_structure_head::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(2,39,37,.44) 0%,
      rgba(3,52,48,.50) 55%,
      rgba(2,38,36,.60) 100%
    ),
    url("https://proceeding.unzah.ac.id/public/site/images/admin/header-background.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, 45% 50% !important;
  background-size: 100% 100%, 110% auto !important;
  opacity: .50 !important;
  filter: saturate(.80) contrast(.94) brightness(.82);
  box-shadow:
    inset 0 -42px 60px rgba(1,30,28,.24),
    inset 0 24px 42px rgba(1,30,28,.16) !important;
  will-change: background-position, background-size, opacity, filter;
  animation: aiciefHeaderBackgroundDrift 16s ease-in-out infinite alternate !important;
}

.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at 14% 18%,
      rgba(221,168,93,.18) 0%,
      rgba(221,168,93,.06) 20%,
      transparent 40%
    ),
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,.025) 43%,
      rgba(221,168,93,.14) 49%,
      rgba(255,255,255,.04) 54%,
      transparent 63%,
      transparent 100%
    ) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 230% 100% !important;
  background-position: center center, 135% 0 !important;
  opacity: .52 !important;
  will-change: background-position, opacity;
  animation: aiciefHeaderCopperSweep 11s ease-in-out infinite !important;
}

@keyframes aiciefHeaderBackgroundDrift {
  0% {
    background-position: center center, 43% 50%;
    background-size: 100% 100%, 108% auto;
    opacity: .46;
    filter: saturate(.76) contrast(.93) brightness(.79);
  }
  50% {
    background-position: center center, 50% 49%;
    background-size: 100% 100%, 112% auto;
    opacity: .53;
    filter: saturate(.84) contrast(.96) brightness(.86);
  }
  100% {
    background-position: center center, 57% 51%;
    background-size: 100% 100%, 109% auto;
    opacity: .48;
    filter: saturate(.80) contrast(.94) brightness(.82);
  }
}

@keyframes aiciefHeaderCopperSweep {
  0%, 18% {
    background-position: center center, 135% 0;
    opacity: .34;
  }
  50% {
    background-position: center center, 45% 0;
    opacity: .62;
  }
  82%, 100% {
    background-position: center center, -35% 0;
    opacity: .34;
  }
}

/* FOOTER BACKGROUND ONLY */
.pkp_structure_footer {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(221,168,93,.12) 0%, transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(200,138,61,.09) 0%, transparent 34%),
    linear-gradient(135deg, #022b29 0%, #043a36 54%, #022f2d 100%) !important;
  border-top: 3px solid var(--aicief-copper) !important;
  color: var(--aicief-ivory) !important;
  box-shadow: 0 -8px 24px rgba(2,39,37,.18) !important;
}

.pkp_structure_footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(2,43,41,.64),
      rgba(2,42,40,.78)
    ),
    url("https://proceeding.unzah.ac.id/public/site/images/admin/header-background.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, cover !important;
  opacity: .24 !important;
  filter: saturate(.68) brightness(.66) contrast(.92);
}

.pkp_structure_footer::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: 1 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,168,93,.96),
    transparent
  ) !important;
}

.pkp_footer_content,
.pkp_brand_footer {
  position: relative !important;
  z-index: 2 !important;
}

.sakinah-footer-content h3,
.sakinah-footer-content a {
  color: var(--aicief-copper-light) !important;
}

.sakinah-footer-content p {
  color: rgba(251,248,241,.90) !important;
}

.sakinah-footer-content strong {
  color: #fff !important;
}

.sakinah-footer-license {
  border-top-color: rgba(221,168,93,.22) !important;
}

.sakinah-footer-map {
  border-color: rgba(221,168,93,.30) !important;
  background: rgba(255,255,255,.06) !important;
}

@media (max-width: 768px) {
  .pkp_structure_head::before {
    background-position: center center, center center !important;
    background-size: 100% 100%, auto 112% !important;
    opacity: .44 !important;
    animation-duration: 20s !important;
  }

  .pkp_structure_head::after {
    opacity: .42 !important;
    animation-duration: 14s !important;
  }

  .pkp_structure_footer::before {
    opacity: .20 !important;
    background-size: 100% 100%, auto 115% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_structure_head::before,
  .pkp_structure_head::after {
    animation: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V2
   1. Register/Login putih dan lebih tebal
   2. Animasi "knowledge constellation" diadaptasi dari portal
   3. Tidak mengubah ukuran/posisi poster atau navigasi
   ======================================================= */

/* USER NAVIGATION: warna saja, tanpa mengubah posisi/layout */
#navigationUserWrapper a,
#navigationUserWrapper a:visited,
#navigationUser.pkp_navigation_user > li > a,
#navigationUser.pkp_navigation_user > li > a:visited {
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.52) !important;
  transition:
    color 0.22s ease,
    text-shadow 0.22s ease,
    opacity 0.22s ease !important;
}

#navigationUserWrapper a:hover,
#navigationUserWrapper a:focus,
#navigationUser.pkp_navigation_user > li > a:hover,
#navigationUser.pkp_navigation_user > li > a:focus {
  color: #efc27f !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.48),
    0 0 12px rgba(221, 168, 93, 0.24) !important;
}

/*
 * Knowledge constellation dibuat hanya melalui pseudo-element,
 * sehingga tidak membutuhkan perubahan HTML/template OJS.
 * Poster dan seluruh menu tetap memakai aturan CSS Sakinah asli.
 */
.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background-image:
    /* glow utama */
    radial-gradient(
      ellipse at 50% 45%,
      rgba(221, 168, 93, 0.12) 0%,
      rgba(7, 80, 71, 0.06) 34%,
      transparent 66%
    ),

    /* node kiri */
    radial-gradient(
      circle at 4% 18%,
      rgba(255,255,255,0.92) 0 2px,
      rgba(221,168,93,0.82) 2.5px 4px,
      rgba(221,168,93,0.12) 4.5px 10px,
      transparent 11px
    ),
    radial-gradient(
      circle at 8% 72%,
      rgba(255,255,255,0.82) 0 2px,
      rgba(221,168,93,0.72) 2.5px 4px,
      rgba(221,168,93,0.10) 4.5px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 18% 90%,
      rgba(255,255,255,0.78) 0 1.5px,
      rgba(221,168,93,0.66) 2px 3.5px,
      transparent 8px
    ),

    /* node kanan */
    radial-gradient(
      circle at 96% 20%,
      rgba(255,255,255,0.92) 0 2px,
      rgba(221,168,93,0.82) 2.5px 4px,
      rgba(221,168,93,0.12) 4.5px 10px,
      transparent 11px
    ),
    radial-gradient(
      circle at 92% 70%,
      rgba(255,255,255,0.84) 0 2px,
      rgba(221,168,93,0.74) 2.5px 4px,
      rgba(221,168,93,0.10) 4.5px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 80% 91%,
      rgba(255,255,255,0.76) 0 1.5px,
      rgba(221,168,93,0.64) 2px 3.5px,
      transparent 8px
    ),

    /* garis koneksi samar */
    linear-gradient(
      16deg,
      transparent 0%,
      transparent 10%,
      rgba(221,168,93,0.00) 10.2%,
      rgba(221,168,93,0.15) 10.5%,
      rgba(255,255,255,0.08) 10.7%,
      transparent 11%,
      transparent 100%
    ),
    linear-gradient(
      -14deg,
      transparent 0%,
      transparent 88.8%,
      rgba(255,255,255,0.08) 89.1%,
      rgba(221,168,93,0.15) 89.3%,
      transparent 89.7%,
      transparent 100%
    ),

    /* light sweep */
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 37%,
      rgba(255,255,255,0.025) 43%,
      rgba(221,168,93,0.16) 49%,
      rgba(255,255,255,0.045) 54%,
      transparent 62%,
      transparent 100%
    ) !important;

  background-repeat: no-repeat !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    235% 100% !important;

  background-position:
    center center,
    center center,
    center center,
    center center,
    center center,
    center center,
    center center,
    center center,
    center center,
    135% 0 !important;

  opacity: 0.58 !important;
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  will-change: transform, opacity, background-position;

  animation:
    aiciefKnowledgeFloat 8s ease-in-out infinite,
    aiciefKnowledgePulse 4.8s ease-in-out infinite,
    aiciefKnowledgeSweep 11s ease-in-out infinite !important;
}

@keyframes aiciefKnowledgeFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(5px, -5px, 0) scale(1.008);
  }
}

@keyframes aiciefKnowledgePulse {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.92);
  }

  50% {
    opacity: 0.68;
    filter: brightness(1.12);
  }
}

@keyframes aiciefKnowledgeSweep {
  0%,
  16% {
    background-position:
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      135% 0;
  }

  50% {
    background-position:
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      42% 0;
  }

  84%,
  100% {
    background-position:
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      center center,
      -35% 0;
  }
}

@media (max-width: 768px) {
  .pkp_structure_head::after {
    opacity: 0.42 !important;
    animation:
      aiciefKnowledgeFloat 11s ease-in-out infinite,
      aiciefKnowledgePulse 6s ease-in-out infinite,
      aiciefKnowledgeSweep 15s ease-in-out infinite !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_structure_head::after {
    animation: none !important;
    opacity: 0.44 !important;
  }
}

/* =======================================================
   AICIEF FINAL V3
   NAVIGATION + DROPDOWN THEME FIX
   -------------------------------------------------------
   - Tidak mengubah ukuran/posisi poster header
   - Tidak mengubah posisi menu utama, Search, atau user menu
   - Menghilangkan hover kaca Sakinah
   - Hover cukup mengubah teks menjadi emas
   - Dropdown memakai warna hijau AICIEF
   - Dropdown dinaikkan agar tidak tertimpa area konten
   ======================================================= */

:root {
  --aicief-nav-deep: #032f2c;
  --aicief-nav-deeper: #022724;
  --aicief-nav-mid: #075047;
  --aicief-nav-gold: #e0ad52;
  --aicief-nav-gold-light: #f0c775;
  --aicief-nav-white: #ffffff;
}

/* Stacking order saja, tanpa mengubah tata letak */
.pkp_structure_head {
  z-index: 1000 !important;
  overflow: visible !important;
}

.pkp_structure_content {
  position: relative;
  z-index: 1 !important;
}

.pkp_head_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary,
.pkp_navigation_primary > li,
#navigationUserWrapper,
#navigationUser,
#navigationUser > li {
  overflow: visible !important;
}

/* =======================================================
   MENU UTAMA: TANPA GLASS HOVER
   ======================================================= */

@media (min-width: 992px) {

  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary > li > span {
    padding: 6px 12px !important;
    color: var(--aicief-nav-white) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.40) !important;
    transition:
      color 0.22s ease,
      text-shadow 0.22s ease !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus,
  .pkp_navigation_primary > li > span:hover,
  .pkp_navigation_primary > li > span:focus {
    padding: 6px 12px !important;
    color: var(--aicief-nav-gold-light) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    text-shadow:
      0 2px 5px rgba(0, 0, 0, 0.42),
      0 0 12px rgba(224, 173, 82, 0.18) !important;
  }

  /* Menu aktif juga dibuat elegan tanpa kotak kaca */
  .pkp_navigation_primary > li.current > a,
  .pkp_navigation_primary > li.current > span,
  .pkp_navigation_primary > li[aria-current="page"] > a {
    color: var(--aicief-nav-gold-light) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =======================================================
   DROPDOWN MENU UTAMA
   ======================================================= */

.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary > li > ul,
.pkp_navigation_primary li ul {
  z-index: 50000 !important;
  min-width: 245px !important;
  margin-top: 8px !important;
  padding: 9px 0 !important;
  overflow: visible !important;

  background:
    linear-gradient(
      145deg,
      rgba(3, 47, 44, 0.985) 0%,
      rgba(2, 39, 36, 0.985) 100%
    ) !important;

  border: 1px solid rgba(224, 173, 82, 0.48) !important;
  border-radius: 12px !important;
  box-shadow:
    0 18px 38px rgba(0, 24, 22, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Segitiga dropdown mengikuti warna AICIEF */
.pkp_navigation_primary .dropdown-menu::before,
.pkp_navigation_primary > li > ul::before {
  background: var(--aicief-nav-deep) !important;
  border-left: 1px solid rgba(224, 173, 82, 0.48) !important;
  border-top: 1px solid rgba(224, 173, 82, 0.48) !important;
}

/* Teks dropdown */
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary > li > ul a,
.pkp_navigation_primary li ul a {
  display: block !important;
  margin: 0 !important;
  padding: 10px 18px !important;

  color: rgba(255, 255, 255, 0.96) !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;

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

  transition:
    color 0.20s ease,
    padding-left 0.20s ease !important;
}

/* Hover dropdown: hanya teks emas, tanpa kaca */
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary > li > ul a:hover,
.pkp_navigation_primary > li > ul a:focus,
.pkp_navigation_primary li ul a:hover,
.pkp_navigation_primary li ul a:focus {
  padding: 10px 18px !important;
  color: var(--aicief-nav-gold-light) !important;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.38),
    0 0 10px rgba(224, 173, 82, 0.16) !important;
}

/* Separator halus antaritem */
.pkp_navigation_primary .dropdown-menu li + li,
.pkp_navigation_primary > li > ul li + li,
.pkp_navigation_primary li ul li + li {
  border-top: 1px solid rgba(224, 173, 82, 0.12) !important;
}

/* =======================================================
   USER NAVIGATION + USER DROPDOWN
   ======================================================= */

/* Hanya warna dan bobot, posisi tetap mengikuti CSS yang sudah benar */
#navigationUserWrapper a,
#navigationUserWrapper a:visited,
#navigationUser.pkp_navigation_user > li > a,
#navigationUser.pkp_navigation_user > li > a:visited {
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 700 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.50) !important;
}

#navigationUserWrapper > ul > li > a:hover,
#navigationUserWrapper > ul > li > a:focus,
#navigationUser.pkp_navigation_user > li > a:hover,
#navigationUser.pkp_navigation_user > li > a:focus {
  color: var(--aicief-nav-gold-light) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.46),
    0 0 12px rgba(224, 173, 82, 0.20) !important;
}

/* Panel dropdown user */
.pkp_navigation_user .dropdown-menu,
#navigationUser li ul {
  z-index: 60000 !important;
  min-width: 190px !important;
  padding: 9px 0 !important;
  overflow: visible !important;

  background:
    linear-gradient(
      145deg,
      rgba(3, 47, 44, 0.99) 0%,
      rgba(2, 39, 36, 0.99) 100%
    ) !important;

  border: 1px solid rgba(224, 173, 82, 0.48) !important;
  border-radius: 12px !important;
  box-shadow:
    0 18px 38px rgba(0, 24, 22, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.pkp_navigation_user .dropdown-menu::before,
#navigationUser li ul::before {
  background: var(--aicief-nav-deep) !important;
  border-left: 1px solid rgba(224, 173, 82, 0.48) !important;
  border-top: 1px solid rgba(224, 173, 82, 0.48) !important;
}

/* Item dropdown user */
.pkp_navigation_user .dropdown-menu a,
#navigationUser li ul a {
  display: block !important;
  margin: 0 !important;
  padding: 11px 18px !important;

  color: rgba(255, 255, 255, 0.96) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

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

  transition:
    color 0.20s ease,
    text-shadow 0.20s ease !important;
}

/* Hover dropdown user: teks emas saja */
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user .dropdown-menu a:focus,
#navigationUser li ul a:hover,
#navigationUser li ul a:focus {
  padding: 11px 18px !important;
  color: var(--aicief-nav-gold-light) !important;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.40),
    0 0 10px rgba(224, 173, 82, 0.18) !important;
}

.pkp_navigation_user .dropdown-menu li + li,
#navigationUser li ul li + li {
  border-top: 1px solid rgba(224, 173, 82, 0.12) !important;
}

/* Mobile panel tetap utuh, tetapi palet disesuaikan */
@media (max-width: 991px) {
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
    background: rgba(3, 47, 44, 0.97) !important;
    border-color: rgba(224, 173, 82, 0.42) !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen a:hover,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen a:focus {
    color: var(--aicief-nav-gold-light) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V4
   PREMIUM INDEXING LOGO PANEL
   -------------------------------------------------------
   Target HTML:
   .page_index_journal .page_about > p + table
   Dibuat khusus agar tidak mengubah tabel OJS lainnya.
   ======================================================= */

:root {
  --aicief-index-deep: #022c29;
  --aicief-index-mid: #06483f;
  --aicief-index-gold: #d9a64c;
  --aicief-index-gold-light: #efc875;
  --aicief-index-ivory: #fbf8f0;
  --aicief-index-ink: #183a34;
}

/* Judul "Indexed by:" */
.page_index_journal .page_about > p:has(+ table),
.page_index_journal .page_about > p:nth-of-type(2) {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 30px 0 13px !important;
  padding: 0 !important;
  text-align: left !important;
}

.page_index_journal .page_about > p:has(+ table)::after,
.page_index_journal .page_about > p:nth-of-type(2)::after {
  content: "" !important;
  display: block !important;
  flex: 1 1 auto;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(217, 166, 76, 0.82),
      rgba(217, 166, 76, 0.18),
      transparent
    );
}

.page_index_journal .page_about > p:has(+ table) strong,
.page_index_journal .page_about > p:nth-of-type(2) strong {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 15px 7px 38px;
  border: 1px solid rgba(217, 166, 76, 0.74);
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      var(--aicief-index-gold-light) 0%,
      var(--aicief-index-gold) 100%
    );
  color: var(--aicief-index-deep) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow:
    0 8px 18px rgba(2, 44, 41, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.48);
}

.page_index_journal .page_about > p:has(+ table) strong::before,
.page_index_journal .page_about > p:nth-of-type(2) strong::before {
  content: "✦";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aicief-index-deep);
  font-size: 14px;
  line-height: 1;
}

/* Panel utama indexing */
.page_index_journal .page_about > table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 28px !important;
  padding: 19px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(217, 166, 76, 0.62) !important;
  border-radius: 20px !important;
  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(239, 200, 117, 0.16) 0%,
      transparent 26%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(217, 166, 76, 0.12) 0%,
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #032f2c 0%,
      #06483f 54%,
      #022925 100%
    ) !important;

  box-shadow:
    0 18px 38px rgba(1, 34, 31, 0.20),
    0 3px 10px rgba(1, 34, 31, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Ubah struktur tabel menjadi grid logo */
.page_index_journal .page_about > table > tbody {
  display: block !important;
  width: 100% !important;
}

.page_index_journal .page_about > table > tbody > tr {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Card setiap logo */
.page_index_journal .page_about > table td {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 14px 11px !important;
  overflow: hidden !important;
  vertical-align: middle !important;

  border: 1px solid rgba(217, 166, 76, 0.36) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.985) 0%,
      rgba(251,248,240,0.955) 100%
    ) !important;

  box-shadow:
    0 8px 18px rgba(0, 25, 23, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;

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

/* Garis emas halus pada bagian atas card */
.page_index_journal .page_about > table td::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 18% !important;
  right: 18% !important;
  height: 2px !important;
  border-radius: 0 0 999px 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--aicief-index-gold-light),
      transparent
    );
  opacity: 0.78;
}

/* Kilau premium saat hover */
.page_index_journal .page_about > table td::after {
  content: "" !important;
  position: absolute !important;
  top: -35% !important;
  bottom: -35% !important;
  left: -55% !important;
  width: 36% !important;
  transform: skewX(-18deg) translateX(-180%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.64),
      transparent
    );
  opacity: 0;
  pointer-events: none !important;
  transition:
    transform 0.58s ease,
    opacity 0.25s ease !important;
}

.page_index_journal .page_about > table td:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(239, 200, 117, 0.86) !important;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fffaf0 100%
    ) !important;
  box-shadow:
    0 15px 30px rgba(0, 25, 23, 0.23),
    0 0 0 1px rgba(217, 166, 76, 0.08),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.page_index_journal .page_about > table td:hover::after {
  opacity: 0.76;
  transform: skewX(-18deg) translateX(540%);
}

/* Logo */
.page_index_journal .page_about > table td img {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 54px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  filter:
    saturate(0.94)
    contrast(1.02)
    drop-shadow(0 3px 5px rgba(2, 44, 41, 0.10));

  transition:
    transform 0.28s ease,
    filter 0.28s ease !important;
}

.page_index_journal .page_about > table td:hover img {
  transform: scale(1.045);
  filter:
    saturate(1)
    contrast(1.04)
    drop-shadow(0 5px 8px rgba(2, 44, 41, 0.16));
}

/* Tablet */
@media (max-width: 900px) {
  .page_index_journal .page_about > table {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .page_index_journal .page_about > table > tbody > tr {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .page_index_journal .page_about > table td {
    min-height: 86px !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .page_index_journal .page_about > p:has(+ table),
  .page_index_journal .page_about > p:nth-of-type(2) {
    margin-top: 24px !important;
  }

  .page_index_journal .page_about > table {
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .page_index_journal .page_about > table > tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .page_index_journal .page_about > table td {
    min-height: 80px !important;
    padding: 12px 9px !important;
    border-radius: 12px !important;
  }

  .page_index_journal .page_about > table td img {
    max-height: 48px !important;
  }
}

@media (max-width: 390px) {
  .page_index_journal .page_about > table > tbody > tr {
    grid-template-columns: 1fr !important;
  }

  .page_index_journal .page_about > table td {
    min-height: 76px !important;
  }

  .page_index_journal .page_about > table td img {
    max-width: 150px !important;
  }
}

/* Aksesibilitas: kurangi gerakan jika diminta perangkat */
@media (prefers-reduced-motion: reduce) {
  .page_index_journal .page_about > table td,
  .page_index_journal .page_about > table td::after,
  .page_index_journal .page_about > table td img {
    transition: none !important;
  }

  .page_index_journal .page_about > table td:hover {
    transform: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V5
   SIMPLE INDEXING PANEL
   -------------------------------------------------------
   Label "Indexed by" tetap memakai desain V4.
   Panel logo dibuat lebih sederhana, ringan, dan elegan.
   ======================================================= */

/* Panel utama: putih/ivory, tanpa blok hijau gelap */
.page_index_journal .page_about > table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 26px !important;
  padding: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(217, 166, 76, 0.42) !important;
  border-radius: 16px !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98) 0%,
      rgba(251,248,240,0.96) 100%
    ) !important;

  box-shadow:
    0 10px 24px rgba(2, 44, 41, 0.10) !important;
}

/* Grid logo tetap rapi */
.page_index_journal .page_about > table > tbody {
  display: block !important;
  width: 100% !important;
}

.page_index_journal .page_about > table > tbody > tr {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Card logo lebih sederhana */
.page_index_journal .page_about > table td {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: hidden !important;
  vertical-align: middle !important;

  border: 1px solid rgba(6, 72, 63, 0.16) !important;
  border-radius: 12px !important;

  background: #ffffff !important;

  box-shadow:
    0 4px 12px rgba(2, 44, 41, 0.07) !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Hilangkan garis emas dan efek kilau V4 */
.page_index_journal .page_about > table td::before,
.page_index_journal .page_about > table td::after {
  display: none !important;
  content: none !important;
}

/* Hover ringan */
.page_index_journal .page_about > table td:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(217, 166, 76, 0.66) !important;
  background: #fffdf8 !important;

  box-shadow:
    0 8px 18px rgba(2, 44, 41, 0.12) !important;
}

/* Logo */
.page_index_journal .page_about > table td img {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 50px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  filter:
    saturate(0.96)
    contrast(1.01);

  transition:
    transform 0.22s ease !important;
}

.page_index_journal .page_about > table td:hover img {
  transform: scale(1.025);
}

/* Tablet */
@media (max-width: 900px) {
  .page_index_journal .page_about > table {
    padding: 12px !important;
  }

  .page_index_journal .page_about > table > tbody > tr {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .page_index_journal .page_about > table {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .page_index_journal .page_about > table > tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .page_index_journal .page_about > table td {
    min-height: 70px !important;
    padding: 9px !important;
    border-radius: 10px !important;
  }

  .page_index_journal .page_about > table td img {
    max-height: 46px !important;
  }
}

@media (max-width: 390px) {
  .page_index_journal .page_about > table > tbody > tr {
    grid-template-columns: 1fr !important;
  }

  .page_index_journal .page_about > table td img {
    max-width: 150px !important;
  }
}

/* =======================================================
   AICIEF FINAL V6: SIDEBAR + ARTICLE CARDS
   ======================================================= */
:root{
  --aicief-deep:#032f2c;
  --aicief-dark:#05453e;
  --aicief-mid:#0a6258;
  --aicief-gold:#d9a64c;
  --aicief-gold-light:#efc875;
  --aicief-ivory:#fbf8f0;
  --aicief-muted:#667873;
}

/* 1. SIDEBAR */
@media (min-width:901px){
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar .sakinah-sidebar-card{
    width:calc(100% - 10px)!important;
    margin-left:10px!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

.sakinah-sidebar-card{
  border:1px solid rgba(3,72,63,.12)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(251,248,240,.96))!important;
  box-shadow:0 12px 28px rgba(2,44,41,.10),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.sakinah-sidebar-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(217,166,76,.34)!important;
  box-shadow:0 16px 34px rgba(2,44,41,.14),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.sakinah-sidebar-title{
  color:var(--aicief-gold-light)!important;
  background:linear-gradient(135deg,var(--aicief-deep),var(--aicief-dark) 58%,#073a35)!important;
  border:1px solid rgba(217,166,76,.42)!important;
  box-shadow:0 7px 17px rgba(2,44,41,.18),inset 0 1px 0 rgba(255,255,255,.07)!important;
  text-shadow:0 2px 5px rgba(0,0,0,.26)!important;
}
.sakinah-sidebar-title::before{
  background:linear-gradient(135deg,var(--aicief-gold-light),var(--aicief-gold))!important;
  color:var(--aicief-deep)!important;
  box-shadow:0 4px 10px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.45)!important;
}
.sakinah-info-menu .sakinah-sidebar-menu{border-bottom-color:rgba(3,72,63,.10)!important;}
.sakinah-info-menu .sakinah-sidebar-menu a{
  color:#074d45!important;
  font-weight:750!important;
  text-shadow:none!important;
}
.sakinah-info-menu .sakinah-sidebar-menu a::after{color:var(--aicief-gold)!important;}
.sakinah-info-menu .sakinah-sidebar-menu a::before{
  background:linear-gradient(180deg,var(--aicief-gold-light),var(--aicief-gold))!important;
}
.sakinah-info-menu .sakinah-sidebar-menu a:hover,
.sakinah-info-menu .sakinah-sidebar-menu a:focus{
  color:var(--aicief-deep)!important;
  padding-left:17px!important;
  background:linear-gradient(90deg,rgba(217,166,76,.15),rgba(255,255,255,.78))!important;
  box-shadow:none!important;
  transform:translateX(3px)!important;
}

/* 2. LABEL ARTICLES */
.page_index_journal .current_issue .sections .section{
  position:relative!important;
  padding-top:4px!important;
}
.page_index_journal .current_issue .sections .section::before{
  content:""!important;
  position:absolute!important;
  top:24px!important;
  left:0!important;
  right:0!important;
  height:1px!important;
  z-index:0!important;
  background:linear-gradient(90deg,rgba(217,166,76,.80),rgba(217,166,76,.18),transparent)!important;
}
.page_index_journal .current_issue .sections .section>h3{
  position:relative!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  min-height:36px!important;
  margin:0 0 18px!important;
  padding:8px 16px 8px 39px!important;
  color:var(--aicief-deep)!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  border:1px solid rgba(217,166,76,.74)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--aicief-gold-light),var(--aicief-gold))!important;
  box-shadow:0 8px 18px rgba(2,44,41,.15),inset 0 1px 0 rgba(255,255,255,.48)!important;
}
.page_index_journal .current_issue .sections .section>h3::before{
  content:"✦"!important;
  position:absolute!important;
  left:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:var(--aicief-deep)!important;
  font-size:14px!important;
}

/* 3. ARTICLE CARDS: tetap list vertikal */
.page_index_journal .current_issue .cmp_article_list.articles{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:15px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.page_index_journal .current_issue .cmp_article_list.articles>li{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.page_index_journal .current_issue .obj_article_summary{
  position:relative!important;
  min-height:0!important;
  margin:0!important;
  padding:19px 21px 17px 24px!important;
  overflow:hidden!important;
  border:1px solid rgba(3,72,63,.13)!important;
  border-left:4px solid var(--aicief-gold)!important;
  border-radius:15px!important;
  background:radial-gradient(circle at 96% 12%,rgba(217,166,76,.10),transparent 27%),linear-gradient(145deg,rgba(255,255,255,.99),rgba(251,248,240,.94))!important;
  box-shadow:0 8px 21px rgba(2,44,41,.075),inset 0 1px 0 rgba(255,255,255,.94)!important;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease!important;
}
.page_index_journal .current_issue .obj_article_summary::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:24px!important;
  right:24px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(217,166,76,.60),transparent)!important;
}
.page_index_journal .current_issue .obj_article_summary:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(217,166,76,.45)!important;
  border-left-color:var(--aicief-gold-light)!important;
  box-shadow:0 14px 30px rgba(2,44,41,.13),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
.page_index_journal .current_issue .obj_article_summary .title{
  margin:0 0 9px!important;
  padding:0!important;
  font-size:15px!important;
  line-height:1.48!important;
  font-weight:800!important;
}
.page_index_journal .current_issue .obj_article_summary .title a,
.page_index_journal .current_issue .obj_article_summary .title a:visited{
  color:#075047!important;
  font-weight:800!important;
  text-decoration:none!important;
  text-shadow:none!important;
  transition:color .20s ease,text-shadow .20s ease!important;
}
.page_index_journal .current_issue .obj_article_summary .title a:hover,
.page_index_journal .current_issue .obj_article_summary .title a:focus{
  color:#a36f18!important;
  text-decoration:none!important;
  text-shadow:0 0 10px rgba(217,166,76,.12)!important;
}
.page_index_journal .current_issue .obj_article_summary .meta{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:8px 14px!important;
  margin:0 0 12px!important;
  padding:0!important;
  color:var(--aicief-muted)!important;
  font-size:12.5px!important;
  line-height:1.55!important;
}
.page_index_journal .current_issue .obj_article_summary .authors{
  color:#526762!important;
  font-weight:600!important;
}
.page_index_journal .current_issue .obj_article_summary .pages{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:25px!important;
  margin:0!important;
  padding:4px 10px!important;
  color:#7a571a!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  border:1px solid rgba(217,166,76,.34)!important;
  border-radius:999px!important;
  background:rgba(217,166,76,.10)!important;
}
.page_index_journal .current_issue .obj_article_summary .galleys_links{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.page_index_journal .current_issue .obj_article_summary .galleys_links>li{
  margin:0!important;
  padding:0!important;
}
.page_index_journal .current_issue .obj_galley_link.pdf{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:36px!important;
  margin:0!important;
  padding:8px 15px!important;
  color:var(--aicief-gold-light)!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  text-decoration:none!important;
  border:1px solid rgba(217,166,76,.62)!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,var(--aicief-deep),var(--aicief-dark))!important;
  box-shadow:0 6px 14px rgba(2,44,41,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:transform .22s ease,color .22s ease,background .22s ease,box-shadow .22s ease!important;
}
.page_index_journal .current_issue .obj_galley_link.pdf:hover,
.page_index_journal .current_issue .obj_galley_link.pdf:focus{
  color:var(--aicief-deep)!important;
  border-color:var(--aicief-gold-light)!important;
  background:linear-gradient(135deg,var(--aicief-gold-light),var(--aicief-gold))!important;
  transform:translateY(-2px)!important;
  box-shadow:0 9px 18px rgba(2,44,41,.19),inset 0 1px 0 rgba(255,255,255,.42)!important;
}

/* 4. VIEW ALL ISSUES: hanya tampilan. Teks dan href tetap. */
.page_index_journal .current_issue>.read_more{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:39px!important;
  margin-top:20px!important;
  padding:9px 17px!important;
  color:var(--aicief-deep)!important;
  font-size:12px!important;
  font-weight:850!important;
  text-decoration:none!important;
  border:1px solid rgba(217,166,76,.68)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--aicief-gold-light),var(--aicief-gold))!important;
  box-shadow:0 7px 16px rgba(2,44,41,.13),inset 0 1px 0 rgba(255,255,255,.42)!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
.page_index_journal .current_issue>.read_more:hover,
.page_index_journal .current_issue>.read_more:focus{
  transform:translateY(-2px)!important;
  box-shadow:0 10px 20px rgba(2,44,41,.18),inset 0 1px 0 rgba(255,255,255,.48)!important;
}

@media (max-width:768px){
  .page_index_journal .current_issue .obj_article_summary{
    padding:17px 16px 15px 18px!important;
    border-radius:13px!important;
  }
  .page_index_journal .current_issue .obj_article_summary .title{
    font-size:13.5px!important;
    line-height:1.48!important;
  }
  .page_index_journal .current_issue .obj_article_summary .meta{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:7px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .sakinah-sidebar-card,
  .sakinah-info-menu .sakinah-sidebar-menu a,
  .page_index_journal .current_issue .obj_article_summary,
  .page_index_journal .current_issue .obj_galley_link.pdf,
  .page_index_journal .current_issue>.read_more{
    transition:none!important;
  }
}

/* =======================================================
   AICIEF FINAL V7
   ARTICLE DETAIL: TWO-COLUMN CONTENT + STICKY METADATA
   -------------------------------------------------------
   - Sidebar digeser sedikit ke kiri
   - Main article dan entry_details dipaksa menjadi 2 kolom
   - PDF, Published, Issue, Section, Citation, Copyright,
     dan metadata tambahan tetap di kolom kanan
   - Kolom kanan dibuat sticky agar tidak ikut turun sampai
     bagian references
   - Garis pembatas diganti panel premium teal-copper
   ======================================================= */

:root {
  --aicief-detail-deep: #032f2c;
  --aicief-detail-dark: #05453e;
  --aicief-detail-mid: #0a6258;
  --aicief-detail-gold: #d9a64c;
  --aicief-detail-gold-light: #efc875;
  --aicief-detail-ivory: #fbf8f0;
  --aicief-detail-white: #ffffff;
  --aicief-detail-text: #2a403b;
  --aicief-detail-muted: #6b7d78;
}

/* =======================================================
   1. SIDEBAR: GESER SEDIKIT KE KIRI
   ======================================================= */

@media (min-width: 901px) {
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    position: relative !important;
    left: -10px !important;
  }

  /* Batalkan pergeseran card ke kanan dari V6 */
  .pkp_structure_content.has_sidebar
  .pkp_structure_sidebar
  .sakinah-sidebar-card {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =======================================================
   2. ARTICLE PAGE FOUNDATION
   ======================================================= */

body.pkp_page_article .page_article {
  overflow: visible !important;
}

body.pkp_page_article .obj_article_details {
  overflow: visible !important;
}

/* Judul artikel */
body.pkp_page_article .obj_article_details > .page_title {
  position: relative !important;
  margin: 4px 0 24px !important;
  padding: 20px 22px 19px 26px !important;

  color: var(--aicief-detail-deep) !important;
  font-size: clamp(19px, 2vw, 25px) !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;

  border: 1px solid rgba(3, 72, 63, 0.13) !important;
  border-left: 5px solid var(--aicief-detail-gold) !important;
  border-radius: 16px !important;

  background:
    radial-gradient(
      circle at 94% 12%,
      rgba(217, 166, 76, 0.11) 0%,
      transparent 27%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.99) 0%,
      rgba(251,248,240,0.96) 100%
    ) !important;

  box-shadow:
    0 10px 24px rgba(2,44,41,0.08),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

/* =======================================================
   3. MAIN ENTRY + ENTRY DETAILS MENJADI DUA KOLOM
   ======================================================= */

body.pkp_page_article
.obj_article_details > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 230px) !important;
  column-gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.pkp_page_article
.obj_article_details > .row > .main_entry,
body.pkp_page_article
.obj_article_details > .row > .entry_details {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.pkp_page_article
.obj_article_details > .row > .main_entry {
  grid-column: 1 !important;
  padding: 0 !important;
  border: 0 !important;
}

/*
 * Semua metadata di kanan:
 * PDF, Published, Issue, Section, Citation, Copyright,
 * dan elemen tambahan OJS yang berada di .entry_details.
 */
body.pkp_page_article
.obj_article_details > .row > .entry_details {
  grid-column: 2 !important;
  align-self: start !important;
  position: sticky !important;
  top: 20px !important;
  z-index: 4 !important;

  padding: 14px !important;
  overflow: visible !important;

  border: 1px solid rgba(217,166,76,0.48) !important;
  border-left: 4px solid var(--aicief-detail-gold) !important;
  border-radius: 16px !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(217,166,76,0.13) 0%,
      transparent 35%
    ),
    linear-gradient(
      150deg,
      rgba(255,255,255,0.99) 0%,
      rgba(251,248,240,0.97) 100%
    ) !important;

  box-shadow:
    0 14px 30px rgba(2,44,41,0.12),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

/* Heading visual kolom metadata */
body.pkp_page_article
.obj_article_details > .row > .entry_details::before {
  content: "ARTICLE INFORMATION" !important;
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: -2px -2px 12px !important;
  padding: 8px 11px !important;

  color: var(--aicief-detail-gold-light) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.10em !important;

  border: 1px solid rgba(217,166,76,0.36) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-detail-deep),
      var(--aicief-detail-dark)
    ) !important;

  box-shadow:
    0 6px 14px rgba(2,44,41,0.16),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* =======================================================
   4. MAIN ARTICLE CONTENT
   ======================================================= */

body.pkp_page_article
.obj_article_details .main_entry > .item {
  margin: 0 0 22px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid rgba(3,72,63,0.10) !important;
}

body.pkp_page_article
.obj_article_details .main_entry > .item:last-child {
  border-bottom: 0 !important;
}

/* Authors */
body.pkp_page_article
.obj_article_details .main_entry .item.authors {
  padding: 17px 18px !important;
  border: 1px solid rgba(3,72,63,0.11) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(251,248,240,0.88)
    ) !important;
}

body.pkp_page_article
.obj_article_details .main_entry ul.authors {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.pkp_page_article
.obj_article_details .main_entry ul.authors > li {
  margin: 0 !important;
  padding: 0 0 0 13px !important;
  border-left: 3px solid rgba(217,166,76,0.74) !important;
}

body.pkp_page_article
.obj_article_details .main_entry .authors .name {
  display: block !important;
  color: var(--aicief-detail-deep) !important;
  font-weight: 800 !important;
}

body.pkp_page_article
.obj_article_details .main_entry .authors .affiliation {
  display: block !important;
  margin-top: 3px !important;
  color: var(--aicief-detail-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* Label Keywords dan Abstract */
body.pkp_page_article
.obj_article_details .main_entry .item > .label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 31px !important;
  margin: 0 0 12px !important;
  padding: 7px 13px !important;

  color: var(--aicief-detail-deep) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

  border: 1px solid rgba(217,166,76,0.54) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-detail-gold-light),
      var(--aicief-detail-gold)
    ) !important;

  box-shadow:
    0 5px 12px rgba(2,44,41,0.10),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

body.pkp_page_article
.obj_article_details .main_entry .item.keywords .value {
  color: #526762 !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

body.pkp_page_article
.obj_article_details .main_entry .item.abstract p {
  margin: 0 !important;
  color: var(--aicief-detail-text) !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* References dan item tambahan yang mungkin diaktifkan */
body.pkp_page_article
.obj_article_details .main_entry .item.references,
body.pkp_page_article
.obj_article_details .main_entry .item.reference,
body.pkp_page_article
.obj_article_details .main_entry .item.citations {
  padding: 18px !important;
  border: 1px solid rgba(3,72,63,0.11) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,0.76) !important;
}

/* =======================================================
   5. ENTRY DETAILS / ARTICLE INFORMATION
   ======================================================= */

body.pkp_page_article
.obj_article_details .entry_details > .item {
  margin: 0 !important;
  padding: 12px 3px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(3,72,63,0.11) !important;
  background: transparent !important;
}

body.pkp_page_article
.obj_article_details .entry_details > .item:last-child {
  border-bottom: 0 !important;
}

body.pkp_page_article
.obj_article_details .entry_details .sub_item {
  margin: 0 !important;
  padding: 0 !important;
}

body.pkp_page_article
.obj_article_details .entry_details .sub_item + .sub_item {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px dashed rgba(217,166,76,0.36) !important;
}

/* Label metadata */
body.pkp_page_article
.obj_article_details .entry_details .label {
  display: block !important;
  margin: 0 0 7px !important;
  color: #9b6b18 !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

/* Value metadata */
body.pkp_page_article
.obj_article_details .entry_details .value {
  color: var(--aicief-detail-text) !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;
}

body.pkp_page_article
.obj_article_details .entry_details .value a,
body.pkp_page_article
.obj_article_details .entry_details .value a:visited {
  color: #075047 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

body.pkp_page_article
.obj_article_details .entry_details .value a:hover,
body.pkp_page_article
.obj_article_details .entry_details .value a:focus {
  color: #a36f18 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Tombol PDF penuh di kolom metadata */
body.pkp_page_article
.obj_article_details .entry_details .galleys_links {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.pkp_page_article
.obj_article_details .entry_details .galleys_links > li {
  margin: 0 !important;
  padding: 0 !important;
}

body.pkp_page_article
.obj_article_details .entry_details .obj_galley_link.pdf {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 10px 14px !important;

  color: var(--aicief-detail-gold-light) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;

  border: 1px solid rgba(217,166,76,0.64) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-detail-deep),
      var(--aicief-detail-dark)
    ) !important;

  box-shadow:
    0 7px 16px rgba(2,44,41,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;

  transition:
    transform 0.22s ease,
    color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease !important;
}

body.pkp_page_article
.obj_article_details .entry_details .obj_galley_link.pdf:hover,
body.pkp_page_article
.obj_article_details .entry_details .obj_galley_link.pdf:focus {
  color: var(--aicief-detail-deep) !important;
  border-color: var(--aicief-detail-gold-light) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-detail-gold-light),
      var(--aicief-detail-gold)
    ) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 20px rgba(2,44,41,0.21),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

/* Sitasi/copyright yang diaktifkan nanti otomatis mengikuti panel */
body.pkp_page_article
.obj_article_details .entry_details .citation,
body.pkp_page_article
.obj_article_details .entry_details .how_to_cite,
body.pkp_page_article
.obj_article_details .entry_details .copyright,
body.pkp_page_article
.obj_article_details .entry_details .permissions {
  color: var(--aicief-detail-text) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

body.pkp_page_article
.obj_article_details .entry_details textarea,
body.pkp_page_article
.obj_article_details .entry_details input,
body.pkp_page_article
.obj_article_details .entry_details select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(3,72,63,0.18) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--aicief-detail-text) !important;
}

/* =======================================================
   6. RESPONSIVE
   ======================================================= */

/* Desktop menengah: kolom metadata dibuat sedikit lebih kecil */
@media (min-width: 901px) and (max-width: 1180px) {
  body.pkp_page_article
  .obj_article_details > .row {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 195px) !important;
    column-gap: 18px !important;
  }

  body.pkp_page_article
  .obj_article_details > .row > .entry_details {
    padding: 11px !important;
  }

  body.pkp_page_article
  .obj_article_details > .row > .entry_details::before {
    font-size: 9px !important;
    letter-spacing: 0.07em !important;
  }
}

/* Mobile/tablet: ditumpuk secara natural */
@media (max-width: 900px) {
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    left: auto !important;
  }

  body.pkp_page_article
  .obj_article_details > .row {
    display: block !important;
  }

  body.pkp_page_article
  .obj_article_details > .row > .main_entry,
  body.pkp_page_article
  .obj_article_details > .row > .entry_details {
    width: 100% !important;
  }

  body.pkp_page_article
  .obj_article_details > .row > .entry_details {
    position: relative !important;
    top: auto !important;
    margin-top: 20px !important;
  }

  body.pkp_page_article
  .obj_article_details .main_entry ul.authors {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  body.pkp_page_article .obj_article_details > .page_title {
    padding: 17px 16px 16px 19px !important;
    border-radius: 13px !important;
    font-size: 17px !important;
  }

  body.pkp_page_article
  .obj_article_details .main_entry .item.authors {
    padding: 14px !important;
  }

  body.pkp_page_article
  .obj_article_details .main_entry .item.abstract p {
    font-size: 12.5px !important;
    line-height: 1.78 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pkp_page_article
  .obj_article_details .entry_details .obj_galley_link.pdf {
    transition: none !important;
  }

  body.pkp_page_article
  .obj_article_details .entry_details .obj_galley_link.pdf:hover {
    transform: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V8
   ISSUE PAGE + ARTICLE DETAIL REFINEMENT
   -------------------------------------------------------
   1. Author grid aman untuk jumlah penulis ganjil/banyak
   2. Article information tidak lagi sticky
   3. Card artikel berlaku juga pada halaman issue
   4. Border emas gambar aplikasi pendukung dihilangkan
   5. Breadcrumb diselaraskan dengan tema AICIEF
   6. Outer card indexing dihilangkan
   7. View All Issues dan ikon panah tidak bertumpuk
   ======================================================= */

:root {
  --aicief-v8-deep: #032f2c;
  --aicief-v8-dark: #05453e;
  --aicief-v8-mid: #0a6258;
  --aicief-v8-gold: #d9a64c;
  --aicief-v8-gold-light: #efc875;
  --aicief-v8-ivory: #fbf8f0;
  --aicief-v8-text: #29423c;
  --aicief-v8-muted: #667873;
}

/* =======================================================
   1. AUTHOR GRID
   Dua kolom pada desktop.
   Jika jumlah penulis ganjil, penulis terakhir melebar penuh.
   ======================================================= */

body.pkp_page_article
.obj_article_details .main_entry ul.authors {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px 16px !important;
}

body.pkp_page_article
.obj_article_details .main_entry ul.authors > li:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}

/* Penulis terakhir yang melebar tetap nyaman dibaca */
body.pkp_page_article
.obj_article_details .main_entry ul.authors > li:last-child:nth-child(odd) {
  max-width: none !important;
}

/* =======================================================
   2. ARTICLE INFORMATION MENJADI STATIS
   ======================================================= */

body.pkp_page_article
.obj_article_details > .row > .entry_details {
  position: relative !important;
  top: auto !important;
}

/* =======================================================
   3. ARTICLE LIST DI HALAMAN ISSUE
   Struktur page source:
   body.pkp_page_issue .page_issue .obj_issue_toc
   ======================================================= */

/* Label "Articles" pada halaman issue */
body.pkp_page_issue
.page_issue .obj_issue_toc .sections .section {
  position: relative !important;
  padding-top: 4px !important;
}

body.pkp_page_issue
.page_issue .obj_issue_toc .sections .section::before {
  content: "" !important;
  position: absolute !important;
  top: 24px !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  z-index: 0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(217,166,76,.80),
      rgba(217,166,76,.18),
      transparent
    ) !important;
}

body.pkp_page_issue
.page_issue .obj_issue_toc .sections .section > h2 {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 36px !important;
  margin: 0 0 18px !important;
  padding: 8px 16px 8px 39px !important;

  color: var(--aicief-v8-deep) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;

  border: 1px solid rgba(217,166,76,.74) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-v8-gold-light),
      var(--aicief-v8-gold)
    ) !important;

  box-shadow:
    0 8px 18px rgba(2,44,41,.15),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}

body.pkp_page_issue
.page_issue .obj_issue_toc .sections .section > h2::before {
  content: "✦" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--aicief-v8-deep) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* List artikel halaman issue */
body.pkp_page_issue
.page_issue .cmp_article_list.articles {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.pkp_page_issue
.page_issue .cmp_article_list.articles > li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary {
  position: relative !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 19px 21px 17px 24px !important;
  overflow: hidden !important;

  border: 1px solid rgba(3,72,63,.13) !important;
  border-left: 4px solid var(--aicief-v8-gold) !important;
  border-radius: 15px !important;

  background:
    radial-gradient(
      circle at 96% 12%,
      rgba(217,166,76,.10) 0%,
      transparent 27%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99) 0%,
      rgba(251,248,240,.94) 100%
    ) !important;

  box-shadow:
    0 8px 21px rgba(2,44,41,.075),
    inset 0 1px 0 rgba(255,255,255,.94) !important;

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

body.pkp_page_issue
.page_issue .obj_article_summary::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217,166,76,.60),
      transparent
    ) !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(217,166,76,.45) !important;
  border-left-color: var(--aicief-v8-gold-light) !important;
  box-shadow:
    0 14px 30px rgba(2,44,41,.13),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .title {
  margin: 0 0 9px !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
  font-weight: 800 !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .title a,
body.pkp_page_issue
.page_issue .obj_article_summary .title a:visited {
  color: #075047 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition:
    color .20s ease,
    text-shadow .20s ease !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .title a:hover,
body.pkp_page_issue
.page_issue .obj_article_summary .title a:focus {
  color: #a36f18 !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(217,166,76,.12) !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .meta {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--aicief-v8-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .authors {
  color: #526762 !important;
  font-weight: 600 !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .pages {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  margin: 0 !important;
  padding: 4px 10px !important;

  color: #7a571a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  border: 1px solid rgba(217,166,76,.34) !important;
  border-radius: 999px !important;
  background: rgba(217,166,76,.10) !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .galleys_links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.pkp_page_issue
.page_issue .obj_article_summary .galleys_links > li {
  margin: 0 !important;
  padding: 0 !important;
}

body.pkp_page_issue
.page_issue .obj_galley_link.pdf {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 15px !important;

  color: var(--aicief-v8-gold-light) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;

  border: 1px solid rgba(217,166,76,.62) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-v8-deep),
      var(--aicief-v8-dark)
    ) !important;

  box-shadow:
    0 6px 14px rgba(2,44,41,.16),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

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

body.pkp_page_issue
.page_issue .obj_galley_link.pdf:hover,
body.pkp_page_issue
.page_issue .obj_galley_link.pdf:focus {
  color: var(--aicief-v8-deep) !important;
  border-color: var(--aicief-v8-gold-light) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-v8-gold-light),
      var(--aicief-v8-gold)
    ) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 9px 18px rgba(2,44,41,.19),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* =======================================================
   4. HILANGKAN GARIS/BORDER EMAS PADA APLIKASI PENDUKUNG
   ======================================================= */

.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) {
  display: block !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;

  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child)::before,
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child)::after {
  display: none !important;
  content: none !important;
}

.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) > a {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 13px rgba(2,44,41,.08) !important;

  background: #fff !important;
}

/* =======================================================
   5. BREADCRUMB AICIEF
   ======================================================= */

.cmp_breadcrumbs {
  border-color: rgba(3,72,63,.13) !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(251,248,240,.94)
    ) !important;
  box-shadow:
    0 7px 18px rgba(2,44,41,.07) !important;
}

.cmp_breadcrumbs a,
.cmp_breadcrumbs a:visited {
  color: #075047 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
  color: #a36f18 !important;
  text-decoration: none !important;
}

.cmp_breadcrumbs .current,
.cmp_breadcrumbs .current span,
.cmp_breadcrumbs [aria-current="page"] {
  color: #526762 !important;
  font-weight: 700 !important;
}

.cmp_breadcrumbs .separator {
  color: var(--aicief-v8-gold) !important;
  font-weight: 900 !important;
}

/* =======================================================
   6. INDEXING: HAPUS OUTER CARD
   Card per-logo tetap dipertahankan dan dipercantik.
   ======================================================= */

.page_index_journal .page_about > table {
  margin: 0 0 26px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;

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

.page_index_journal .page_about > table td {
  border: 1px solid rgba(3,72,63,.16) !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(251,248,240,.94)
    ) !important;
  box-shadow:
    0 7px 17px rgba(2,44,41,.09) !important;
}

.page_index_journal .page_about > table td:hover {
  border-color: rgba(217,166,76,.58) !important;
  box-shadow:
    0 11px 22px rgba(2,44,41,.13) !important;
}

/* =======================================================
   7. VIEW ALL ISSUES: PISAHKAN TEKS DAN PANAH
   ======================================================= */

.page_index_journal .current_issue > .read_more {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;

  min-width: 0 !important;
  padding:
    10px 42px
    10px 17px !important;

  white-space: nowrap !important;
  overflow: visible !important;
}

.page_index_journal .current_issue > .read_more::after {
  content: "›" !important;
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
  left: auto !important;

  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;

  color: var(--aicief-v8-deep) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform: translateY(-52%) !important;
  transition: right .20s ease !important;
}

.page_index_journal .current_issue > .read_more:hover::after,
.page_index_journal .current_issue > .read_more:focus::after {
  right: 12px !important;
}

/* Hilangkan panah bawaan lain jika memakai pseudo-element before */
.page_index_journal .current_issue > .read_more::before {
  display: none !important;
  content: none !important;
}

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width: 768px) {
  body.pkp_page_issue
  .page_issue .obj_article_summary {
    padding: 17px 16px 15px 18px !important;
    border-radius: 13px !important;
  }

  body.pkp_page_issue
  .page_issue .obj_article_summary .title {
    font-size: 13.5px !important;
    line-height: 1.48 !important;
  }

  body.pkp_page_issue
  .page_issue .obj_article_summary .meta {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  body.pkp_page_article
  .obj_article_details .main_entry ul.authors {
    grid-template-columns: 1fr !important;
  }

  body.pkp_page_article
  .obj_article_details .main_entry ul.authors > li:last-child:nth-child(odd) {
    grid-column: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pkp_page_issue .page_issue .obj_article_summary,
  body.pkp_page_issue .page_issue .obj_galley_link.pdf,
  .page_index_journal .current_issue > .read_more::after {
    transition: none !important;
  }

  body.pkp_page_issue .page_issue .obj_article_summary:hover,
  body.pkp_page_issue .page_issue .obj_galley_link.pdf:hover {
    transform: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V9
   SIDEBAR MEDIA + ARCHIVE LINKS + ARTICLE SEPARATOR + AUTH
   -------------------------------------------------------
   1. Semua gambar/sidebar media menyatu dengan card cream
   2. Daftar issue/archive memakai teal-copper premium card
   3. Separator di atas penulis pada detail artikel dihapus
   4. Login dan Register diselaraskan dengan tema AICIEF
   ======================================================= */

:root {
  --aicief-v9-deep: #032f2c;
  --aicief-v9-dark: #05453e;
  --aicief-v9-mid: #0a6258;
  --aicief-v9-gold: #d9a64c;
  --aicief-v9-gold-light: #efc875;
  --aicief-v9-cream: #f8f4e9;
  --aicief-v9-cream-soft: #fcfaf4;
  --aicief-v9-white: #ffffff;
  --aicief-v9-text: #29423c;
  --aicief-v9-muted: #687a75;
  --aicief-v9-line: rgba(3,72,63,.13);
}

/* =======================================================
   1. SIDEBAR MEDIA / IMAGE SYSTEM
   ======================================================= */

/* Area media di semua card sidebar */
.sakinah-template-card > a,
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) > a,
.sakinah-stat-card > a:not([href*="histats.com/viewstats"]),
.sakinah-stat-card > img:not([src*="0.gif"]),
.sakinah-stat-card > a[href*="histats.com/viewstats"] + img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;

  border: 1px solid rgba(3,72,63,.12) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(
      145deg,
      rgba(248,244,233,.98),
      rgba(252,250,244,.98)
    ) !important;

  box-shadow:
    0 5px 14px rgba(2,44,41,.07),
    inset 0 1px 0 rgba(255,255,255,.80) !important;

  overflow: hidden !important;
  text-decoration: none !important;
}

/* Hindari style ganda pada gambar statistik yang langsung menjadi elemen */
.sakinah-stat-card > img:not([src*="0.gif"]) {
  height: auto !important;
}

/* Semua gambar sidebar dibuat menyatu */
.sakinah-template-card img,
.sakinah-tools-card img,
.sakinah-stat-card img:not([src*="0.gif"]) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 7px !important;

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

  filter:
    saturate(.96)
    contrast(1.01)
    brightness(.99);

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

.sakinah-template-card > a:hover img,
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) > a:hover img,
.sakinah-stat-card > a:hover img {
  transform: scale(1.018) !important;
  filter:
    saturate(1)
    contrast(1.02)
    brightness(1.01);
}

/* Tool rows tidak lagi dianggap sebagai title bar */
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child)::before,
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child)::after {
  display: none !important;
  content: none !important;
}

/* Histats hidden counter tetap benar-benar tersembunyi */
.sakinah-stat-card img[src*="0.gif"] {
  display: none !important;
}

/* =======================================================
   2. ARCHIVE / ISSUE LIST LINKS
   ======================================================= */

body.pkp_page_issue.pkp_op_archive
.page_issue_archive > h1 {
  color: var(--aicief-v9-deep) !important;
  font-weight: 850 !important;
  letter-spacing: -.015em !important;
}

body.pkp_page_issue.pkp_op_archive
.issues_archive {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 15px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.pkp_page_issue.pkp_op_archive
.issues_archive > li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Card setiap issue */
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary {
  position: relative !important;
  margin: 0 !important;
  padding: 20px 22px 19px 25px !important;
  overflow: hidden !important;

  border: 1px solid var(--aicief-v9-line) !important;
  border-left: 4px solid var(--aicief-v9-gold) !important;
  border-radius: 15px !important;

  background:
    radial-gradient(
      circle at 96% 12%,
      rgba(217,166,76,.10) 0%,
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(248,244,233,.93)
    ) !important;

  box-shadow:
    0 9px 22px rgba(2,44,41,.08),
    inset 0 1px 0 rgba(255,255,255,.94) !important;

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

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217,166,76,.58),
      transparent
    ) !important;
}

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(217,166,76,.44) !important;
  box-shadow:
    0 14px 30px rgba(2,44,41,.13),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary h2 {
  margin: 0 !important;
  padding: 0 !important;
}

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title,
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title:visited {
  color: #075047 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition:
    color .20s ease,
    text-shadow .20s ease !important;
}

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title:hover,
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title:focus {
  color: #a36f18 !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(217,166,76,.12) !important;
}

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary .series {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  margin-top: 8px !important;
  padding: 5px 10px !important;

  color: #6e5a2f !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  border: 1px solid rgba(217,166,76,.28) !important;
  border-radius: 999px !important;
  background: rgba(217,166,76,.09) !important;
}

/* Divider archive lama dihapus */
body.pkp_page_issue.pkp_op_archive
.issues_archive > li + li {
  border-top: 0 !important;
}

/* =======================================================
   3. DETAIL ARTICLE: HILANGKAN GARIS DI ATAS PENULIS
   ======================================================= */

body.pkp_page_article
.obj_article_details > .row {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.pkp_page_article
.obj_article_details > .row::before,
body.pkp_page_article
.obj_article_details > .row::after {
  display: none !important;
  content: none !important;
}

body.pkp_page_article
.obj_article_details .main_entry {
  border-top: 0 !important;
}

body.pkp_page_article
.obj_article_details .main_entry > .item.authors {
  margin-top: 0 !important;
}

/* =======================================================
   4. LOGIN + REGISTER / AUTH PAGES
   ======================================================= */

body.pkp_page_login .page_login,
body.pkp_page_user .page_register,
body.pkp_page_user .page_user {
  position: relative !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 0 8px !important;
}

/* Judul halaman */
body.pkp_page_login .page_login > h1,
body.pkp_page_user .page_register > h1,
body.pkp_page_user .page_user > h1 {
  margin: 22px 0 8px !important;
  color: var(--aicief-v9-deep) !important;
  font-size: 27px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}

/* Keterangan required */
body.pkp_page_login .page_login > p,
body.pkp_page_user .page_register > p,
body.pkp_page_user .page_user > p {
  margin: 0 0 17px !important;
  color: var(--aicief-v9-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}

/* Form card */
body.pkp_page_login .cmp_form.login,
body.pkp_page_user .cmp_form.register,
body.pkp_page_user .page_register .cmp_form,
body.pkp_page_user .page_user .cmp_form {
  position: relative !important;
  margin: 0 !important;
  padding: 24px !important;

  border: 1px solid rgba(3,72,63,.14) !important;
  border-left: 4px solid var(--aicief-v9-gold) !important;
  border-radius: 17px !important;

  background:
    radial-gradient(
      circle at 96% 4%,
      rgba(217,166,76,.11) 0%,
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(248,244,233,.94)
    ) !important;

  box-shadow:
    0 15px 34px rgba(2,44,41,.11),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Ornamen garis atas */
body.pkp_page_login .cmp_form.login::before,
body.pkp_page_user .cmp_form.register::before,
body.pkp_page_user .page_register .cmp_form::before,
body.pkp_page_user .page_user .cmp_form::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 28px !important;
  right: 28px !important;
  height: 1px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217,166,76,.70),
      transparent
    ) !important;
}

/* Fields layout */
body.pkp_page_login .cmp_form .fields,
body.pkp_page_user .cmp_form .fields {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.pkp_page_login .cmp_form .fields > div,
body.pkp_page_user .cmp_form .fields > div {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* Labels */
body.pkp_page_login .cmp_form label > .label,
body.pkp_page_user .cmp_form label > .label,
body.pkp_page_user .cmp_form .label {
  color: var(--aicief-v9-deep) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Inputs */
body.pkp_page_login .cmp_form input[type="text"],
body.pkp_page_login .cmp_form input[type="password"],
body.pkp_page_login .cmp_form input[type="email"],
body.pkp_page_user .cmp_form input[type="text"],
body.pkp_page_user .cmp_form input[type="password"],
body.pkp_page_user .cmp_form input[type="email"],
body.pkp_page_user .cmp_form select,
body.pkp_page_user .cmp_form textarea {
  width: 100% !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  margin-top: 7px !important;
  padding: 10px 12px !important;

  color: var(--aicief-v9-text) !important;
  font-size: 13px !important;

  border: 1px solid rgba(3,72,63,.22) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.96) !important;

  box-shadow:
    inset 0 1px 2px rgba(2,44,41,.04) !important;

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

body.pkp_page_login .cmp_form input:focus,
body.pkp_page_user .cmp_form input:focus,
body.pkp_page_user .cmp_form select:focus,
body.pkp_page_user .cmp_form textarea:focus {
  outline: 0 !important;
  border-color: rgba(217,166,76,.86) !important;
  background: #fff !important;
  box-shadow:
    0 0 0 4px rgba(217,166,76,.12),
    inset 0 1px 2px rgba(2,44,41,.03) !important;
}

/* Required */
body.pkp_page_login .required,
body.pkp_page_user .required {
  color: #b04f3e !important;
}

/* Forgot password dan link form */
body.pkp_page_login .cmp_form a,
body.pkp_page_user .cmp_form a,
body.pkp_page_login .cmp_form a:visited,
body.pkp_page_user .cmp_form a:visited {
  color: #075047 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.pkp_page_login .cmp_form a:hover,
body.pkp_page_login .cmp_form a:focus,
body.pkp_page_user .cmp_form a:hover,
body.pkp_page_user .cmp_form a:focus {
  color: #a36f18 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Checkbox */
body.pkp_page_login .cmp_form .checkbox label,
body.pkp_page_user .cmp_form .checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--aicief-v9-text) !important;
}

body.pkp_page_login .cmp_form input[type="checkbox"],
body.pkp_page_user .cmp_form input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--aicief-v9-mid);
}

/* Action row */
body.pkp_page_login .cmp_form .buttons,
body.pkp_page_user .cmp_form .buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 8px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(3,72,63,.10) !important;
}

/* Primary submit */
body.pkp_page_login .cmp_form button.submit,
body.pkp_page_user .cmp_form button.submit,
body.pkp_page_user .cmp_form button[type="submit"],
body.pkp_page_user .cmp_form input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 20px !important;

  color: var(--aicief-v9-gold-light) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;

  border: 1px solid rgba(217,166,76,.58) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-v9-deep),
      var(--aicief-v9-dark)
    ) !important;

  box-shadow:
    0 7px 16px rgba(2,44,41,.17),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

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

body.pkp_page_login .cmp_form button.submit:hover,
body.pkp_page_login .cmp_form button.submit:focus,
body.pkp_page_user .cmp_form button.submit:hover,
body.pkp_page_user .cmp_form button.submit:focus,
body.pkp_page_user .cmp_form button[type="submit"]:hover,
body.pkp_page_user .cmp_form input[type="submit"]:hover {
  color: var(--aicief-v9-deep) !important;
  border-color: var(--aicief-v9-gold-light) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-v9-gold-light),
      var(--aicief-v9-gold)
    ) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 20px rgba(2,44,41,.20),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Secondary register link on login page */
body.pkp_page_login .cmp_form .buttons a.register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 17px !important;

  color: var(--aicief-v9-deep) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-decoration: none !important;

  border: 1px solid rgba(3,72,63,.22) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.76) !important;
}

body.pkp_page_login .cmp_form .buttons a.register:hover,
body.pkp_page_login .cmp_form .buttons a.register:focus {
  color: #a36f18 !important;
  border-color: rgba(217,166,76,.60) !important;
  background: rgba(248,244,233,.94) !important;
  text-decoration: none !important;
}

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width: 768px) {
  body.pkp_page_issue.pkp_op_archive
  .obj_issue_summary {
    padding: 17px 16px 16px 19px !important;
    border-radius: 13px !important;
  }

  body.pkp_page_login .cmp_form.login,
  body.pkp_page_user .cmp_form.register,
  body.pkp_page_user .page_register .cmp_form,
  body.pkp_page_user .page_user .cmp_form {
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }

  body.pkp_page_login .cmp_form .buttons,
  body.pkp_page_user .cmp_form .buttons {
    align-items: stretch !important;
    flex-direction: column-reverse !important;
  }

  body.pkp_page_login .cmp_form .buttons > *,
  body.pkp_page_user .cmp_form .buttons > * {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sakinah-template-card img,
  .sakinah-tools-card img,
  .sakinah-stat-card img,
  body.pkp_page_issue.pkp_op_archive .obj_issue_summary,
  body.pkp_page_login .cmp_form button.submit,
  body.pkp_page_user .cmp_form button.submit {
    transition: none !important;
  }

  body.pkp_page_issue.pkp_op_archive .obj_issue_summary:hover,
  body.pkp_page_login .cmp_form button.submit:hover,
  body.pkp_page_user .cmp_form button.submit:hover {
    transform: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V10
   CLEAN LOGIN + SIMPLE ARCHIVE + BLENDED SIDEBAR MEDIA
   -------------------------------------------------------
   1. Login/Register tanpa card besar
   2. Archive tanpa card dan separator bawaan
   3. Logo aplikasi/statistik menyatu dengan background cream
   ======================================================= */

:root {
  --aicief-v10-deep: #032f2c;
  --aicief-v10-dark: #05453e;
  --aicief-v10-mid: #0a6258;
  --aicief-v10-gold: #d9a64c;
  --aicief-v10-gold-light: #efc875;
  --aicief-v10-cream: #f8f4e9;
  --aicief-v10-cream-soft: #fcfaf4;
  --aicief-v10-text: #29423c;
  --aicief-v10-muted: #687a75;
}

/* =======================================================
   1. LOGIN / REGISTER: TANPA CARD BESAR
   ======================================================= */

body.pkp_page_login .page_login,
body.pkp_page_user .page_register,
body.pkp_page_user .page_user {
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 0 0 24px !important;
}

/* Hapus card besar dari form */
body.pkp_page_login .cmp_form.login,
body.pkp_page_user .cmp_form.register,
body.pkp_page_user .page_register .cmp_form,
body.pkp_page_user .page_user .cmp_form {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;

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

/* Hapus ornamen garis card */
body.pkp_page_login .cmp_form.login::before,
body.pkp_page_login .cmp_form.login::after,
body.pkp_page_user .cmp_form.register::before,
body.pkp_page_user .cmp_form.register::after,
body.pkp_page_user .page_register .cmp_form::before,
body.pkp_page_user .page_register .cmp_form::after,
body.pkp_page_user .page_user .cmp_form::before,
body.pkp_page_user .page_user .cmp_form::after {
  display: none !important;
  content: none !important;
}

/* Form dibuat ringkas */
body.pkp_page_login .cmp_form .fields,
body.pkp_page_user .cmp_form .fields {
  max-width: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Field spacing */
body.pkp_page_login .cmp_form .fields > div,
body.pkp_page_user .cmp_form .fields > div {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* Labels */
body.pkp_page_login .cmp_form label > .label,
body.pkp_page_user .cmp_form label > .label,
body.pkp_page_user .cmp_form .label {
  color: var(--aicief-v10-deep) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Inputs lebih elegan, tanpa efek card */
body.pkp_page_login .cmp_form input[type="text"],
body.pkp_page_login .cmp_form input[type="password"],
body.pkp_page_login .cmp_form input[type="email"],
body.pkp_page_user .cmp_form input[type="text"],
body.pkp_page_user .cmp_form input[type="password"],
body.pkp_page_user .cmp_form input[type="email"],
body.pkp_page_user .cmp_form select,
body.pkp_page_user .cmp_form textarea {
  width: 100% !important;
  min-height: 43px !important;
  box-sizing: border-box !important;
  margin-top: 7px !important;
  padding: 10px 12px !important;

  color: var(--aicief-v10-text) !important;
  font-size: 13px !important;

  border: 1px solid rgba(3,72,63,.20) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.96) !important;

  box-shadow:
    inset 0 1px 2px rgba(2,44,41,.04) !important;
}

body.pkp_page_login .cmp_form input:focus,
body.pkp_page_user .cmp_form input:focus,
body.pkp_page_user .cmp_form select:focus,
body.pkp_page_user .cmp_form textarea:focus {
  outline: 0 !important;
  border-color: rgba(217,166,76,.86) !important;
  box-shadow:
    0 0 0 4px rgba(217,166,76,.11) !important;
}

/* Link auth */
body.pkp_page_login .cmp_form a,
body.pkp_page_user .cmp_form a,
body.pkp_page_login .cmp_form a:visited,
body.pkp_page_user .cmp_form a:visited {
  color: #075047 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.pkp_page_login .cmp_form a:hover,
body.pkp_page_login .cmp_form a:focus,
body.pkp_page_user .cmp_form a:hover,
body.pkp_page_user .cmp_form a:focus {
  color: #a36f18 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Tombol login/register satu baris, sederhana */
body.pkp_page_login .cmp_form .buttons,
body.pkp_page_user .cmp_form .buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px !important;

  max-width: 420px !important;
  margin-top: 8px !important;
  padding-top: 14px !important;

  border-top: 1px solid rgba(3,72,63,.09) !important;
}

body.pkp_page_login .cmp_form button.submit,
body.pkp_page_user .cmp_form button.submit,
body.pkp_page_user .cmp_form button[type="submit"],
body.pkp_page_user .cmp_form input[type="submit"] {
  min-height: 40px !important;
  padding: 9px 18px !important;

  color: var(--aicief-v10-gold-light) !important;
  font-size: 12px !important;
  font-weight: 900 !important;

  border: 1px solid rgba(217,166,76,.58) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-v10-deep),
      var(--aicief-v10-dark)
    ) !important;

  box-shadow:
    0 6px 14px rgba(2,44,41,.16) !important;
}

body.pkp_page_login .cmp_form button.submit:hover,
body.pkp_page_login .cmp_form button.submit:focus,
body.pkp_page_user .cmp_form button.submit:hover,
body.pkp_page_user .cmp_form button.submit:focus {
  color: var(--aicief-v10-deep) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-v10-gold-light),
      var(--aicief-v10-gold)
    ) !important;
  transform: translateY(-2px) !important;
}

body.pkp_page_login .cmp_form .buttons a.register {
  min-height: 40px !important;
  padding: 9px 16px !important;

  color: var(--aicief-v10-deep) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-decoration: none !important;

  border: 1px solid rgba(3,72,63,.20) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.82) !important;
}

body.pkp_page_login .cmp_form .buttons a.register:hover,
body.pkp_page_login .cmp_form .buttons a.register:focus {
  color: #a36f18 !important;
  border-color: rgba(217,166,76,.55) !important;
  background: var(--aicief-v10-cream-soft) !important;
  text-decoration: none !important;
}

/* =======================================================
   2. ARCHIVE: SIMPLE, TANPA CARD
   ======================================================= */

/* Hilangkan separator tepat di bawah judul Archives */
body.pkp_page_issue.pkp_op_archive
.page_issue_archive > h1 {
  margin-bottom: 22px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.pkp_page_issue.pkp_op_archive
.page_issue_archive > h1::before,
body.pkp_page_issue.pkp_op_archive
.page_issue_archive > h1::after {
  display: none !important;
  content: none !important;
}

/* List issue sederhana */
body.pkp_page_issue.pkp_op_archive
.issues_archive {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.pkp_page_issue.pkp_op_archive
.issues_archive > li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Hilangkan card issue */
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary {
  position: relative !important;
  margin: 0 !important;
  padding: 17px 0 19px !important;

  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;

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

  transform: none !important;
}

/* Separator elegan hanya di bawah item */
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary::before {
  display: none !important;
  content: none !important;
}

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      rgba(217,166,76,.52),
      rgba(3,72,63,.13),
      transparent
    ) !important;
}

/* Tidak ada efek card saat hover */
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary:hover {
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Judul issue */
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title,
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title:visited {
  color: #075047 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title:hover,
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary a.title:focus {
  color: #a36f18 !important;
  text-decoration: none !important;
}

/* Series tetap halus, bukan card mencolok */
body.pkp_page_issue.pkp_op_archive
.obj_issue_summary .series {
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
  margin: 5px 0 0 8px !important;
  padding: 3px 8px !important;

  color: #7a642f !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;

  border: 1px solid rgba(217,166,76,.26) !important;
  border-radius: 999px !important;
  background: rgba(217,166,76,.07) !important;
}

/* =======================================================
   3. SIDEBAR LOGOS: MENYATU DENGAN BACKGROUND CREAM
   ======================================================= */

/* Wrapper Mendeley, Turnitin, Grammarly tanpa border/card putih */
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child),
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) > a {
  display: block !important;
  width: 100% !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

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

/* Logo tools menyatu ke cream memakai blend mode */
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 5px 4px !important;

  object-fit: contain !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 8px !important;

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

  mix-blend-mode: multiply !important;
  filter:
    saturate(.98)
    contrast(1.01)
    brightness(1.01);
}

/* Statistik juga dibuat menyatu */
.sakinah-stat-card > a:not([href*="histats.com/viewstats"]),
.sakinah-stat-card > img:not([src*="0.gif"]),
.sakinah-stat-card > a[href*="histats.com/viewstats"] + img {
  display: block !important;
  width: 100% !important;
  margin: 7px 0 0 !important;
  padding: 4px !important;

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

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

.sakinah-stat-card img:not([src*="0.gif"]) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 4px !important;

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

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

  mix-blend-mode: multiply !important;
}

/* Template article dipertahankan seperti sekarang */
.sakinah-template-card > a {
  border-color: rgba(3,72,63,.12) !important;
  background:
    linear-gradient(
      145deg,
      rgba(248,244,233,.98),
      rgba(252,250,244,.98)
    ) !important;
}

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width: 768px) {
  body.pkp_page_login .cmp_form .fields,
  body.pkp_page_user .cmp_form .fields,
  body.pkp_page_login .cmp_form .buttons,
  body.pkp_page_user .cmp_form .buttons {
    max-width: 100% !important;
  }

  body.pkp_page_login .cmp_form .buttons,
  body.pkp_page_user .cmp_form .buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.pkp_page_login .cmp_form .buttons > *,
  body.pkp_page_user .cmp_form .buttons > * {
    width: 100% !important;
  }

  body.pkp_page_issue.pkp_op_archive
  .obj_issue_summary {
    padding: 15px 0 17px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pkp_page_login .cmp_form button.submit,
  body.pkp_page_user .cmp_form button.submit,
  .sakinah-tools-card img,
  .sakinah-stat-card img {
    transition: none !important;
  }

  body.pkp_page_login .cmp_form button.submit:hover,
  body.pkp_page_user .cmp_form button.submit:hover {
    transform: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V12
   MOBILE MENU MENYATU DENGAN HEADER
   -------------------------------------------------------
   Adaptasi prinsip:
   - Panel masuk ke alur header, bukan overlay/fixed drawer
   - Hamburger tetap di tengah vertikal seperti NALAR
   - Banner benar-benar center
   - Menu utama, submenu, search, dan user navigation
     berada dalam satu bidang header
   - Desktop tidak diubah
   ======================================================= */

:root {
  --aicief-m12-deep: #032f2c;
  --aicief-m12-dark: #022724;
  --aicief-m12-mid: #075047;
  --aicief-m12-gold: #d9a64c;
  --aicief-m12-gold-light: #efc875;
  --aicief-m12-cream: #f8f4e9;
  --aicief-m12-text: #29423c;
}

@media (max-width: 991px) {

  html,
  body,
  .pkp_structure_page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

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

  .pkp_structure_head {
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .pkp_head_wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* Baris poster/header */
  .pkp_site_name_wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 14px 58px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .pkp_site_name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  .pkp_site_name a.is_img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .pkp_site_name a.is_img img,
  .pkp_site_name img {
    display: block !important;
    width: 100% !important;
    max-width: 620px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* =====================================================
     HAMBURGER DI TENGAH VERTIKAL
     ===================================================== */

  .pkp_site_nav_toggle {
    position: absolute !important;
    top: 50% !important;
    left: 9px !important;
    right: auto !important;
    z-index: 10020 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(3,72,63,.30) !important;
    border-radius: 11px !important;
    background:
      linear-gradient(
        135deg,
        var(--aicief-m12-gold-light),
        var(--aicief-m12-gold)
      ) !important;

    color: var(--aicief-m12-deep) !important;
    box-shadow:
      0 7px 17px rgba(2,44,41,.21),
      inset 0 1px 0 rgba(255,255,255,.45) !important;

    transform: translateY(-50%) !important;
    transition:
      background .20s ease,
      box-shadow .20s ease !important;
  }

  /* Sembunyikan teks bawaan, ikon digambar melalui pseudo-element */
  .pkp_site_nav_toggle > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
  }

  .pkp_site_nav_toggle::before {
    content: "☰" !important;
    display: block !important;
    color: var(--aicief-m12-deep) !important;
    font-family: Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform::before,
  .pkp_site_nav_toggle[aria-expanded="true"]::before {
    content: "×" !important;
    font-size: 31px !important;
    font-weight: 500 !important;
    transform: translateY(-2px) !important;
  }

  .pkp_site_nav_toggle:hover,
  .pkp_site_nav_toggle:focus {
    background:
      linear-gradient(
        135deg,
        #f3d18b,
        #dfa943
      ) !important;
    box-shadow:
      0 9px 20px rgba(2,44,41,.25),
      inset 0 1px 0 rgba(255,255,255,.50) !important;
    transform: translateY(-50%) !important;
  }

  /* =====================================================
     PANEL NAVIGASI MENYATU DENGAN HEADER
     Kunci perbedaannya: position static, bukan fixed/absolute.
     ===================================================== */

  nav.pkp_site_nav_menu {
    float: none !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 20px 18px !important;
    box-sizing: border-box !important;

    overflow: visible !important;

    border: 0 !important;
    border-top: 1px solid rgba(217,166,76,.26) !important;
    border-bottom: 2px solid rgba(217,166,76,.74) !important;
    border-radius: 0 !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(217,166,76,.10) 0%,
        transparent 32%
      ),
      linear-gradient(
        180deg,
        rgba(3,47,44,.985) 0%,
        rgba(2,39,36,.995) 100%
      ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /* Semua wrapper masuk satu alur */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary_row,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary_wrapper,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user_wrapper,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_search_wrapper {
    position: static !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li:last-child,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li:last-child {
    border-bottom: 0 !important;
  }

  /* Primary links */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > a,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > span {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    box-sizing: border-box !important;

    color: rgba(255,255,255,.96) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;

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

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > a:hover,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > a:focus,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > span:hover {
    color: var(--aicief-m12-gold-light) !important;
    padding-left: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Submenu tetap bagian dari panel yang sama */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > ul,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li > ul,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul {
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 8px 10px !important;
    padding: 2px 0 3px 17px !important;

    border: 0 !important;
    border-left: 1px solid rgba(217,166,76,.31) !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul::before,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul::after {
    display: none !important;
    content: none !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.045) !important;
    background: transparent !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul li:last-child {
    border-bottom: 0 !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 7px !important;

    color: rgba(255,255,255,.80) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;

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

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul a:hover,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul a:focus {
    color: var(--aicief-m12-gold-light) !important;
    padding-left: 12px !important;
    background: transparent !important;
  }

  /* Search menyatu dan lebih ringkas */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_search_wrapper {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_search {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;

    color: var(--aicief-m12-deep) !important;
    font-size: 14px !important;
    font-weight: 900 !important;

    border: 1px solid rgba(3,72,63,.18) !important;
    border-radius: 11px !important;
    background:
      linear-gradient(
        135deg,
        var(--aicief-m12-gold-light),
        var(--aicief-m12-gold)
      ) !important;

    box-shadow:
      0 7px 16px rgba(0,24,22,.20),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }

  /* User navigation menjadi bagian terakhir */
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user_wrapper {
    margin-top: 13px !important;
    padding-top: 11px !important;
    border-top: 1px solid rgba(217,166,76,.22) !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 0 7px !important;

    color: rgba(255,255,255,.94) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;

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

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li > a:hover,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li > a:focus {
    color: var(--aicief-m12-gold-light) !important;
    padding-left: 12px !important;
    background: transparent !important;
  }

  /* =====================================================
     CARD DESKRIPSI JURNAL MOBILE
     ===================================================== */

  .page_index_journal
  .additional_content
  section.additional_content > div {
    display: block !important;
    width: auto !important;
    max-width: 94% !important;
    margin: 22px auto 26px !important;
    padding: 20px 17px !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(3,72,63,.15) !important;
    border-top: 3px solid var(--aicief-m12-gold) !important;
    border-radius: 17px !important;

    background:
      radial-gradient(
        circle at 96% 5%,
        rgba(217,166,76,.11) 0%,
        transparent 30%
      ),
      linear-gradient(
        145deg,
        rgba(252,250,244,.99) 0%,
        rgba(248,244,233,.96) 100%
      ) !important;

    box-shadow:
      0 14px 30px rgba(2,44,41,.11),
      inset 0 1px 0 rgba(255,255,255,.94) !important;

    text-align: center !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content > div > div:first-child {
    width: 100% !important;
    margin: 0 auto 18px !important;
    text-align: center !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content > div > div:first-child img {
    display: block !important;
    width: 48% !important;
    max-width: 190px !important;
    height: auto !important;
    margin: 0 auto !important;

    border: 1px solid rgba(217,166,76,.30) !important;
    border-radius: 12px !important;

    box-shadow:
      0 12px 24px rgba(2,44,41,.16) !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content > div > div:nth-child(2) {
    max-height: none !important;
    overflow: visible !important;
    color: var(--aicief-m12-text) !important;
    font-size: 13px !important;
    line-height: 1.68 !important;
    text-align: center !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content h1 {
    margin: 0 0 15px !important;
    color: var(--aicief-m12-deep) !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    line-height: 1.38 !important;
    text-align: center !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content p {
    margin: 6px 0 !important;
    color: #465d57 !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
    text-align: center !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content p strong {
    color: var(--aicief-m12-deep) !important;
    font-weight: 850 !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content .btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 43px !important;
    margin-top: 12px !important;
    padding: 10px 17px !important;

    color: var(--aicief-m12-gold-light) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;

    border: 1px solid rgba(217,166,76,.58) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(
        135deg,
        var(--aicief-m12-deep),
        var(--aicief-m12-mid)
      ) !important;

    box-shadow:
      0 8px 18px rgba(2,44,41,.18),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
}

@media (max-width: 430px) {
  .pkp_site_name_wrapper {
    min-height: 96px !important;
    padding: 12px 50px !important;
  }

  .pkp_site_nav_toggle {
    left: 5px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .pkp_site_nav_toggle::before {
    font-size: 23px !important;
  }

  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform::before,
  .pkp_site_nav_toggle[aria-expanded="true"]::before {
    font-size: 29px !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content > div {
    max-width: 96% !important;
    padding: 18px 14px !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content > div > div:first-child img {
    width: 54% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_site_nav_toggle,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen a,
  .page_index_journal
  .additional_content
  section.additional_content .btn-submit {
    transition: none !important;
  }
}

/* =======================================================
   AICIEF FINAL V13 - COMPACT JOURNAL PROFILE
   ======================================================= */

:root {
  --aicief-profile-deep: #032f2c;
  --aicief-profile-mid: #075047;
  --aicief-profile-gold: #d9a64c;
  --aicief-profile-gold-light: #efc875;
  --aicief-profile-text: #405852;
}

.aicief-journal-profile {
  margin: 22px 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.aicief-journal-profile__inner {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(3,72,63,.14) !important;
  border-top: 3px solid var(--aicief-profile-gold) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 96% 5%, rgba(217,166,76,.12) 0%, transparent 27%),
    linear-gradient(145deg, rgba(255,255,255,.99) 0%, rgba(248,244,233,.96) 100%) !important;
  box-shadow:
    0 13px 28px rgba(2,44,41,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.aicief-journal-profile__inner::after {
  content: "" !important;
  position: absolute !important;
  top: -58px !important;
  right: -52px !important;
  width: 145px !important;
  height: 145px !important;
  border: 20px solid rgba(217,166,76,.075) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.aicief-journal-profile__cover {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 150px !important;
  margin: 0 !important;
  padding: 9px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(217,166,76,.28) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(3,47,44,.98), rgba(7,80,71,.94)) !important;
  box-shadow: 0 10px 21px rgba(2,44,41,.16) !important;
}

.aicief-journal-profile__cover img {
  display: block !important;
  width: 100% !important;
  max-width: 130px !important;
  height: auto !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: 0 7px 17px rgba(0,0,0,.18) !important;
}

.aicief-journal-profile__content {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  color: var(--aicief-profile-text) !important;
}

.aicief-journal-profile__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 27px !important;
  margin: 0 0 9px !important;
  padding: 6px 11px !important;
  color: var(--aicief-profile-deep) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(217,166,76,.62) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--aicief-profile-gold-light), var(--aicief-profile-gold)) !important;
  box-shadow:
    0 5px 11px rgba(2,44,41,.10),
    inset 0 1px 0 rgba(255,255,255,.44) !important;
}

.aicief-journal-profile__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--aicief-profile-deep) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.34 !important;
  letter-spacing: -.012em !important;
  text-align: left !important;
}

.aicief-journal-profile__separator {
  width: 100% !important;
  height: 1px !important;
  margin: 11px 0 10px !important;
  background: linear-gradient(90deg, rgba(217,166,76,.72), rgba(3,72,63,.12), transparent) !important;
}

.aicief-journal-profile__meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.aicief-journal-profile__meta-item,
.aicief-journal-profile__meta-item--wide {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 9px !important;
  grid-column: auto !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(3,72,63,.08) !important;
}

.aicief-journal-profile__meta-item:last-child {
  border-bottom: 0 !important;
}

.aicief-journal-profile__meta dt {
  margin: 0 !important;
  color: var(--aicief-profile-mid) !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.aicief-journal-profile__meta dd {
  min-width: 0 !important;
  margin: 0 !important;
  color: #526762 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

.aicief-journal-profile__meta a,
.aicief-journal-profile__meta a:visited {
  color: var(--aicief-profile-mid) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.aicief-journal-profile__meta a:hover,
.aicief-journal-profile__meta a:focus {
  color: #a36f18 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.aicief-journal-profile__actions {
  margin-top: 11px !important;
}

.aicief-journal-profile__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 37px !important;
  padding: 8px 14px !important;
  color: var(--aicief-profile-gold-light) !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: 1px solid rgba(217,166,76,.58) !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--aicief-profile-deep), var(--aicief-profile-mid)) !important;
  box-shadow:
    0 6px 14px rgba(2,44,41,.16),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.aicief-journal-profile__submit:hover,
.aicief-journal-profile__submit:focus {
  color: var(--aicief-profile-deep) !important;
  background: linear-gradient(135deg, var(--aicief-profile-gold-light), var(--aicief-profile-gold)) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 760px) {
  .aicief-journal-profile__inner {
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 15px !important;
  }

  .aicief-journal-profile__cover {
    width: 128px !important;
  }

  .aicief-journal-profile__cover img {
    max-width: 110px !important;
  }

  .aicief-journal-profile__title {
    font-size: 16px !important;
  }

  .aicief-journal-profile__meta-item,
  .aicief-journal-profile__meta-item--wide {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .aicief-journal-profile {
    margin: 18px 0 22px !important;
  }

  .aicief-journal-profile__inner {
    display: grid !important;
    grid-template-columns: 105px minmax(0, 1fr) !important;
    gap: 13px !important;
    width: calc(100% - 16px) !important;
    margin: 0 auto !important;
    padding: 13px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  .aicief-journal-profile__cover {
    width: 105px !important;
    margin: 0 !important;
    padding: 7px !important;
  }

  .aicief-journal-profile__cover img {
    max-width: 91px !important;
  }

  .aicief-journal-profile__eyebrow {
    min-height: 24px !important;
    margin: 0 0 7px !important;
    padding: 5px 9px !important;
    font-size: 8px !important;
  }

  .aicief-journal-profile__title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .aicief-journal-profile__separator {
    margin: 8px 0 7px !important;
  }

  .aicief-journal-profile__meta-item,
  .aicief-journal-profile__meta-item--wide {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 3px 0 !important;
  }

  .aicief-journal-profile__meta dt,
  .aicief-journal-profile__meta dd {
    font-size: 9.8px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .aicief-journal-profile__actions {
    margin-top: 8px !important;
  }

  .aicief-journal-profile__submit {
    width: auto !important;
    min-height: 33px !important;
    padding: 7px 10px !important;
    font-size: 9.8px !important;
  }

  .aicief-journal-profile__inner::after {
    top: -42px !important;
    right: -40px !important;
    width: 100px !important;
    height: 100px !important;
    border-width: 14px !important;
  }
}

@media (max-width: 390px) {
  .aicief-journal-profile__inner {
    display: block !important;
    padding: 14px !important;
    text-align: center !important;
  }

  .aicief-journal-profile__cover {
    width: 118px !important;
    margin: 0 auto 13px !important;
  }

  .aicief-journal-profile__cover img {
    max-width: 102px !important;
  }

  .aicief-journal-profile__eyebrow {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .aicief-journal-profile__title {
    text-align: center !important;
  }

  .aicief-journal-profile__meta-item,
  .aicief-journal-profile__meta-item--wide {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    text-align: center !important;
  }

  .aicief-journal-profile__meta dt,
  .aicief-journal-profile__meta dd {
    text-align: center !important;
  }

  .aicief-journal-profile__submit {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =======================================================
   AICIEF FINAL V14
   METADATA ALIGNMENT FIX
   -------------------------------------------------------
   DOI Prefix, Editor in Chief, dan Publisher dipaksa
   tetap sejajar horizontal dengan nilainya.
   ======================================================= */

.aicief-journal-profile__meta {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Gunakan flex agar nilai tidak turun ke baris baru */
.aicief-journal-profile__meta-item,
.aicief-journal-profile__meta-item--wide {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  box-sizing: border-box !important;

  border-bottom: 1px solid rgba(3,72,63,.08) !important;
}

.aicief-journal-profile__meta-item:last-child,
.aicief-journal-profile__meta-item--wide:last-child {
  border-bottom: 0 !important;
}

/* Label dibuat cukup lebar agar tidak pecah */
.aicief-journal-profile__meta dt {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

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

  color: var(--aicief-profile-mid) !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

/* Nilai selalu melanjutkan ke samping */
.aicief-journal-profile__meta dd {
  flex: 1 1 auto !important;
  min-width: 0 !important;

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

  color: #526762 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;

  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Publisher tetap satu baris label + isi */
.aicief-journal-profile__meta-item--wide dt {
  flex-basis: 112px !important;
}

.aicief-journal-profile__meta-item--wide dd {
  flex: 1 1 auto !important;
}

/* Tablet */
@media (max-width: 760px) {
  .aicief-journal-profile__meta-item,
  .aicief-journal-profile__meta-item--wide {
    gap: 9px !important;
    padding: 5px 0 !important;
  }

  .aicief-journal-profile__meta dt {
    flex-basis: 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    font-size: 10.8px !important;
  }

  .aicief-journal-profile__meta dd {
    font-size: 10.8px !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .aicief-journal-profile__meta-item,
  .aicief-journal-profile__meta-item--wide {
    gap: 7px !important;
    padding: 4px 0 !important;
  }

  .aicief-journal-profile__meta dt {
    flex-basis: 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;

    font-size: 9.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .aicief-journal-profile__meta dd {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }
}

/* Sangat kecil: baru ditumpuk agar tidak sesak */
@media (max-width: 390px) {
  .aicief-journal-profile__meta-item,
  .aicief-journal-profile__meta-item--wide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    text-align: center !important;
  }

  .aicief-journal-profile__meta dt,
  .aicief-journal-profile__meta dd {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* =======================================================
   AICIEF FINAL V15
   BODY AMBIENT ACCENT
   -------------------------------------------------------
   Adaptasi konsep geometri diagonal dan dot field Portal
   UNZAH menjadi identitas AICIEF:
   - ivory conference canvas
   - teal ambient glow
   - copper/gold Islamic rings
   - subtle knowledge-network nodes
   - lebih banyak aksen pada sisi dan sepanjang halaman
   - tidak mengubah layout, card, header, atau footer
   ======================================================= */

:root {
  --aicief-body-bg-top: #f7f9f7;
  --aicief-body-bg-bottom: #f1f5f3;
  --aicief-body-teal: #075047;
  --aicief-body-teal-deep: #032f2c;
  --aicief-body-copper: #d9a64c;
  --aicief-body-copper-light: #efc875;
}

/* Base canvas */
html {
  background: var(--aicief-body-bg-bottom) !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;

  background-color: var(--aicief-body-bg-bottom) !important;
  background-image:
    radial-gradient(
      circle at 14% 7%,
      rgba(239, 200, 117, 0.15) 0%,
      rgba(239, 200, 117, 0.055) 16%,
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(7, 80, 71, 0.11) 0%,
      rgba(7, 80, 71, 0.035) 18%,
      transparent 38%
    ),
    radial-gradient(
      circle at 8% 72%,
      rgba(217, 166, 76, 0.10) 0%,
      rgba(217, 166, 76, 0.035) 19%,
      transparent 39%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(3, 47, 44, 0.09) 0%,
      rgba(3, 47, 44, 0.025) 21%,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      var(--aicief-body-bg-top) 0%,
      #f5f8f6 46%,
      var(--aicief-body-bg-bottom) 100%
    ) !important;

  background-attachment:
    fixed,
    fixed,
    fixed,
    fixed,
    fixed !important;

  overflow-x: hidden !important;
}

/*
 * Layer 1:
 * dot field + diagonal knowledge grid + small nodes.
 */
body::before {
  content: "" !important;
  display: block !important;

  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;

  pointer-events: none !important;

  background-image:
    /* node glows */
    radial-gradient(
      circle at 6% 19%,
      rgba(239, 200, 117, 0.76) 0 1.5px,
      rgba(217, 166, 76, 0.18) 2px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 17% 44%,
      rgba(7, 80, 71, 0.50) 0 1.5px,
      rgba(7, 80, 71, 0.10) 2px 6px,
      transparent 7px
    ),
    radial-gradient(
      circle at 8% 81%,
      rgba(239, 200, 117, 0.64) 0 1.5px,
      rgba(217, 166, 76, 0.14) 2px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 94% 25%,
      rgba(239, 200, 117, 0.72) 0 1.5px,
      rgba(217, 166, 76, 0.16) 2px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 84% 58%,
      rgba(7, 80, 71, 0.48) 0 1.5px,
      rgba(7, 80, 71, 0.10) 2px 6px,
      transparent 7px
    ),
    radial-gradient(
      circle at 96% 84%,
      rgba(239, 200, 117, 0.62) 0 1.5px,
      rgba(217, 166, 76, 0.13) 2px 7px,
      transparent 8px
    ),

    /* diagonal connection lines */
    linear-gradient(
      16deg,
      transparent 0%,
      transparent 11.8%,
      rgba(217, 166, 76, 0.055) 11.95%,
      rgba(217, 166, 76, 0.055) 12.05%,
      transparent 12.2%,
      transparent 100%
    ),
    linear-gradient(
      -14deg,
      transparent 0%,
      transparent 87.7%,
      rgba(7, 80, 71, 0.045) 87.85%,
      rgba(7, 80, 71, 0.045) 87.95%,
      transparent 88.1%,
      transparent 100%
    ),

    /* subtle conference grid */
    repeating-linear-gradient(
      45deg,
      transparent 0 52px,
      rgba(3, 47, 44, 0.018) 53px 54px,
      transparent 55px 108px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 58px,
      rgba(217, 166, 76, 0.017) 59px 60px,
      transparent 61px 120px
    ),

    /* fine dot matrix */
    radial-gradient(
      circle,
      rgba(7, 80, 71, 0.095) 0 0.85px,
      transparent 1.2px
    ) !important;

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    auto,
    auto,
    27px 27px !important;

  background-position:
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center !important;

  opacity: 0.72 !important;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    ) !important;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    ) !important;
}

/*
 * Layer 2:
 * large Islamic ring ornaments on four page zones.
 * These remain at the edges and never obstruct text.
 */
body::after {
  content: "" !important;
  display: block !important;

  position: fixed !important;
  inset: -18px !important;
  z-index: 0 !important;

  pointer-events: none !important;

  background:
    /* upper-left rings */
    radial-gradient(
      circle at -1% 16%,
      transparent 0 58px,
      rgba(217, 166, 76, 0.16) 59px 61px,
      transparent 62px 79px,
      rgba(7, 80, 71, 0.075) 80px 82px,
      transparent 83px 102px,
      rgba(217, 166, 76, 0.075) 103px 105px,
      transparent 106px
    ),

    /* upper-right rings */
    radial-gradient(
      circle at 101% 31%,
      transparent 0 68px,
      rgba(7, 80, 71, 0.105) 69px 71px,
      transparent 72px 92px,
      rgba(217, 166, 76, 0.14) 93px 95px,
      transparent 96px 117px,
      rgba(7, 80, 71, 0.055) 118px 120px,
      transparent 121px
    ),

    /* lower-left rings */
    radial-gradient(
      circle at 1% 69%,
      transparent 0 76px,
      rgba(7, 80, 71, 0.095) 77px 79px,
      transparent 80px 102px,
      rgba(217, 166, 76, 0.13) 103px 105px,
      transparent 106px 130px,
      rgba(7, 80, 71, 0.05) 131px 133px,
      transparent 134px
    ),

    /* lower-right rings */
    radial-gradient(
      circle at 99% 87%,
      transparent 0 61px,
      rgba(217, 166, 76, 0.145) 62px 64px,
      transparent 65px 84px,
      rgba(7, 80, 71, 0.085) 85px 87px,
      transparent 88px 109px,
      rgba(217, 166, 76, 0.06) 110px 112px,
      transparent 113px
    ),

    /* side diamonds inspired by portal geometry */
    linear-gradient(
      45deg,
      transparent 0%,
      transparent 9%,
      rgba(217, 166, 76, 0.027) 9.2%,
      rgba(217, 166, 76, 0.027) 12.5%,
      transparent 12.7%,
      transparent 100%
    ),
    linear-gradient(
      -45deg,
      transparent 0%,
      transparent 86.7%,
      rgba(7, 80, 71, 0.024) 86.9%,
      rgba(7, 80, 71, 0.024) 90.1%,
      transparent 90.3%,
      transparent 100%
    ) !important;

  opacity: 0.90 !important;

  transform: translate3d(0, 0, 0) scale(1.01);
  transform-origin: center center;

  will-change: transform, opacity;

  animation:
    aiciefBodyOrnamentDrift 34s ease-in-out infinite alternate !important;
}

/* Keep every OJS page above ambient layers */
.pkp_structure_page {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* Content stays readable while ambient accents remain visible outside */
.pkp_structure_content {
  position: relative !important;
  z-index: 2 !important;
}

/* Slightly warmer glass on desktop main wrapper */
@media (min-width: 901px) {
  .pkp_structure_content.has_sidebar {
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(252, 250, 244, 0.70) 100%
      ) !important;

    border-color: rgba(3, 72, 63, 0.10) !important;

    box-shadow:
      0 20px 46px rgba(2, 44, 41, 0.105),
      inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(3px) saturate(1.03) !important;
    -webkit-backdrop-filter: blur(3px) saturate(1.03) !important;
  }
}

@keyframes aiciefBodyOrnamentDrift {
  0% {
    transform: translate3d(-4px, 3px, 0) scale(1.005);
    opacity: 0.82;
  }

  50% {
    transform: translate3d(5px, -4px, 0) scale(1.015);
    opacity: 0.96;
  }

  100% {
    transform: translate3d(2px, 5px, 0) scale(1.008);
    opacity: 0.86;
  }
}

/* Tablet: accents remain visible but calmer */
@media (max-width: 992px) {
  body::before {
    opacity: 0.50 !important;
  }

  body::after {
    opacity: 0.66 !important;
  }
}

/* Mobile: fewer visual distractions */
@media (max-width: 768px) {
  body {
    background-image:
      radial-gradient(
        circle at 15% 7%,
        rgba(239, 200, 117, 0.11) 0%,
        transparent 30%
      ),
      radial-gradient(
        circle at 88% 80%,
        rgba(7, 80, 71, 0.07) 0%,
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #f7f9f7 0%,
        #f2f6f4 100%
      ) !important;
  }

  body::before {
    opacity: 0.30 !important;
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      auto,
      auto,
      32px 32px !important;
  }

  body::after {
    inset: -30px !important;
    opacity: 0.42 !important;
  }
}

@media (max-width: 480px) {
  body::before {
    opacity: 0.22 !important;
  }

  body::after {
    opacity: 0.30 !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body::before,
  body::after {
    opacity: 0.16 !important;
  }

  @media (min-width: 901px) {
    .pkp_structure_content.has_sidebar {
      background: rgba(255, 255, 255, 0.94) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
  }
}

/* =======================================================
   AICIEF FINAL V16
   MOBILE JOURNAL PROFILE COLOUR + HOVER FIX
   -------------------------------------------------------
   Memperbaiki konflik selector lama pada additional_content:
   - warna judul dan metadata
   - warna link ISSN
   - warna tombol submit
   - hover tombol dan link
   - hover card/cover yang lebih halus
   ======================================================= */

:root {
  --aicief-profile16-deep: #032f2c;
  --aicief-profile16-mid: #075047;
  --aicief-profile16-gold: #d9a64c;
  --aicief-profile16-gold-light: #efc875;
  --aicief-profile16-text: #405852;
  --aicief-profile16-muted: #667873;
}

/* Berlaku umum agar desktop dan mobile konsisten */
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__title {
  color: var(--aicief-profile16-deep) !important;
  text-shadow: none !important;
}

.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__meta dt {
  color: var(--aicief-profile16-mid) !important;
  font-weight: 850 !important;
}

.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__meta dd {
  color: var(--aicief-profile16-text) !important;
  font-weight: 600 !important;
}

/* Link ISSN mengalahkan aturan link generic additional_content */
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__meta a,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__meta a:visited {
  color: var(--aicief-profile16-mid) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 3px !important;
  transition:
    color .20s ease,
    text-decoration-color .20s ease,
    text-shadow .20s ease !important;
}

.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__meta a:hover,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__meta a:focus {
  color: #a36f18 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(217,166,76,.78) !important;
  text-shadow: 0 0 10px rgba(217,166,76,.12) !important;
}

/* Eyebrow */
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__eyebrow {
  color: var(--aicief-profile16-deep) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-profile16-gold-light),
      var(--aicief-profile16-gold)
    ) !important;
}

/* Tombol submit: selector dibuat lebih kuat daripada selector lama */
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit:visited {
  color: var(--aicief-profile16-gold-light) !important;
  text-decoration: none !important;
  text-decoration-color: transparent !important;

  border-color: rgba(217,166,76,.62) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-profile16-deep) 0%,
      var(--aicief-profile16-mid) 100%
    ) !important;

  box-shadow:
    0 7px 16px rgba(2,44,41,.18),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Pastikan ikon dan seluruh span mengikuti warna tombol */
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit *,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit::before,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit::after {
  color: inherit !important;
  text-decoration: none !important;
}

.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit:hover,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit:focus {
  color: var(--aicief-profile16-deep) !important;
  text-decoration: none !important;

  border-color: var(--aicief-profile16-gold-light) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicief-profile16-gold-light) 0%,
      var(--aicief-profile16-gold) 100%
    ) !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 10px 21px rgba(2,44,41,.22),
    inset 0 1px 0 rgba(255,255,255,.44) !important;
}

/* Hover card dan cover dibuat halus */
.aicief-journal-profile__inner {
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

.aicief-journal-profile__cover,
.aicief-journal-profile__cover img {
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    filter .24s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .aicief-journal-profile__inner:hover {
    border-color: rgba(217,166,76,.52) !important;
    box-shadow:
      0 17px 34px rgba(2,44,41,.13),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  .aicief-journal-profile__inner:hover
  .aicief-journal-profile__cover {
    transform: translateY(-2px) !important;
    box-shadow:
      0 13px 25px rgba(2,44,41,.20) !important;
  }

  .aicief-journal-profile__inner:hover
  .aicief-journal-profile__cover img {
    transform: scale(1.015) !important;
    filter: saturate(1.02) contrast(1.01) !important;
  }
}

/* Mobile-specific visual balance */
@media (max-width: 560px) {
  .page_index_journal
  .additional_content
  section.additional_content
  .aicief-journal-profile__title {
    color: var(--aicief-profile16-deep) !important;
    font-weight: 900 !important;
    letter-spacing: -.008em !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content
  .aicief-journal-profile__meta dt {
    color: var(--aicief-profile16-mid) !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content
  .aicief-journal-profile__meta dd {
    color: #465d57 !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content
  .aicief-journal-profile__submit,
  .page_index_journal
  .additional_content
  section.additional_content
  .aicief-journal-profile__submit:visited {
    color: var(--aicief-profile16-gold-light) !important;
    font-weight: 900 !important;
  }

  .page_index_journal
  .additional_content
  section.additional_content
  .aicief-journal-profile__submit:active {
    color: var(--aicief-profile16-deep) !important;
    background:
      linear-gradient(
        135deg,
        var(--aicief-profile16-gold-light),
        var(--aicief-profile16-gold)
      ) !important;
    transform: translateY(0) scale(.985) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aicief-journal-profile__inner,
  .aicief-journal-profile__cover,
  .aicief-journal-profile__cover img,
  .page_index_journal
  .additional_content
  section.additional_content
  .aicief-journal-profile__submit {
    transition: none !important;
  }
}

/* =======================================================
   ACIE UNZAH THEME V1
   -------------------------------------------------------
   Basis layout dan komponen: AICIEF stylesheet.
   Identitas warna diambil dari header ACIE:
   - deep academic teal
   - muted silver
   - antique academic gold
   - soft ivory canvas

   Fokus patch:
   1. Header, navigasi, dropdown, Search dan user menu
   2. Sidebar, artikel, issue, breadcrumb, auth dan profil
   3. Footer ACIE
   4. Body accent lebih tegas dan ikut bergerak saat scroll
      (tidak fixed/sticky pada viewport)
   ======================================================= */

:root {
  /* ACIE master palette */
  --acie-deep: #123f3f;
  --acie-deeper: #0b3434;
  --acie-dark: #164f4e;
  --acie-mid: #0b5e5d;
  --acie-soft: #3c6464;
  --acie-silver: #c5d0d0;
  --acie-silver-light: #e4e9e9;
  --acie-gold: #d2b55c;
  --acie-gold-light: #ead18a;
  --acie-gold-dark: #a9852b;
  --acie-ivory: #f7f8f5;
  --acie-cream: #f3f1e8;
  --acie-text: #294746;
  --acie-muted: #687d7c;
  --acie-line: rgba(18, 79, 78, 0.14);

  /* Remap seluruh variable AICIEF agar layout lama otomatis
     mengikuti identitas ACIE tanpa mengubah struktur. */
  --aicief-teal-950: var(--acie-deeper);
  --aicief-teal-900: var(--acie-deep);
  --aicief-teal-800: var(--acie-mid);
  --aicief-copper: var(--acie-gold);
  --aicief-copper-light: var(--acie-gold-light);
  --aicief-ivory: var(--acie-ivory);

  --aicief-deep: var(--acie-deep);
  --aicief-dark: var(--acie-dark);
  --aicief-mid: var(--acie-mid);
  --aicief-gold: var(--acie-gold);
  --aicief-gold-light: var(--acie-gold-light);
  --aicief-muted: var(--acie-muted);

  --aicief-nav-deep: var(--acie-deep);
  --aicief-nav-deeper: var(--acie-deeper);
  --aicief-nav-mid: var(--acie-mid);
  --aicief-nav-gold: var(--acie-gold);
  --aicief-nav-gold-light: var(--acie-gold-light);
  --aicief-nav-white: #f6f8f8;

  --aicief-index-deep: var(--acie-deep);
  --aicief-index-mid: var(--acie-mid);
  --aicief-index-gold: var(--acie-gold);
  --aicief-index-gold-light: var(--acie-gold-light);
  --aicief-index-ivory: var(--acie-ivory);
  --aicief-index-ink: var(--acie-text);

  --aicief-detail-deep: var(--acie-deep);
  --aicief-detail-dark: var(--acie-dark);
  --aicief-detail-mid: var(--acie-mid);
  --aicief-detail-gold: var(--acie-gold);
  --aicief-detail-gold-light: var(--acie-gold-light);
  --aicief-detail-ivory: var(--acie-ivory);
  --aicief-detail-white: #fff;
  --aicief-detail-text: var(--acie-text);
  --aicief-detail-muted: var(--acie-muted);

  --aicief-v8-deep: var(--acie-deep);
  --aicief-v8-dark: var(--acie-dark);
  --aicief-v8-mid: var(--acie-mid);
  --aicief-v8-gold: var(--acie-gold);
  --aicief-v8-gold-light: var(--acie-gold-light);
  --aicief-v8-ivory: var(--acie-ivory);
  --aicief-v8-text: var(--acie-text);
  --aicief-v8-muted: var(--acie-muted);

  --aicief-v9-deep: var(--acie-deep);
  --aicief-v9-dark: var(--acie-dark);
  --aicief-v9-mid: var(--acie-mid);
  --aicief-v9-gold: var(--acie-gold);
  --aicief-v9-gold-light: var(--acie-gold-light);
  --aicief-v9-cream: var(--acie-cream);
  --aicief-v9-cream-soft: var(--acie-ivory);
  --aicief-v9-white: #fff;
  --aicief-v9-text: var(--acie-text);
  --aicief-v9-muted: var(--acie-muted);
  --aicief-v9-line: var(--acie-line);

  --aicief-v10-deep: var(--acie-deep);
  --aicief-v10-dark: var(--acie-dark);
  --aicief-v10-mid: var(--acie-mid);
  --aicief-v10-gold: var(--acie-gold);
  --aicief-v10-gold-light: var(--acie-gold-light);
  --aicief-v10-cream: var(--acie-cream);
  --aicief-v10-cream-soft: var(--acie-ivory);
  --aicief-v10-text: var(--acie-text);
  --aicief-v10-muted: var(--acie-muted);

  --aicief-m12-deep: var(--acie-deep);
  --aicief-m12-dark: var(--acie-deeper);
  --aicief-m12-mid: var(--acie-mid);
  --aicief-m12-gold: var(--acie-gold);
  --aicief-m12-gold-light: var(--acie-gold-light);
  --aicief-m12-cream: var(--acie-cream);
  --aicief-m12-text: var(--acie-text);

  --aicief-profile-deep: var(--acie-deep);
  --aicief-profile-mid: var(--acie-mid);
  --aicief-profile-gold: var(--acie-gold);
  --aicief-profile-gold-light: var(--acie-gold-light);
  --aicief-profile-text: var(--acie-text);

  --aicief-profile16-deep: var(--acie-deep);
  --aicief-profile16-mid: var(--acie-mid);
  --aicief-profile16-gold: var(--acie-gold);
  --aicief-profile16-gold-light: var(--acie-gold-light);
  --aicief-profile16-text: var(--acie-text);
  --aicief-profile16-muted: var(--acie-muted);

  --aicief-body-bg-top: #f7f8f5;
  --aicief-body-bg-bottom: #edf2f0;
  --aicief-body-teal: var(--acie-mid);
  --aicief-body-teal-deep: var(--acie-deep);
  --aicief-body-copper: var(--acie-gold);
  --aicief-body-copper-light: var(--acie-gold-light);
}

/* =======================================================
   1. BODY ACIE
   Aksen dibuat lebih tegas dan mengikuti dokumen saat scroll.
   ======================================================= */

html {
  background: #edf2f0 !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;

  background-color: #edf2f0 !important;
  background-image:
    radial-gradient(
      circle at 9% 8%,
      rgba(210,181,92,.22) 0%,
      rgba(210,181,92,.075) 16%,
      transparent 34%
    ),
    radial-gradient(
      circle at 90% 16%,
      rgba(11,94,93,.18) 0%,
      rgba(11,94,93,.055) 20%,
      transparent 39%
    ),
    radial-gradient(
      circle at 8% 74%,
      rgba(18,79,78,.16) 0%,
      rgba(18,79,78,.045) 19%,
      transparent 40%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(210,181,92,.18) 0%,
      rgba(210,181,92,.05) 20%,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #f7f8f5 0%,
      #f2f5f3 46%,
      #edf2f0 100%
    ) !important;

  /* Tidak lagi melekat pada viewport. */
  background-attachment: scroll !important;
}

/* Academic floral-grid layer */
body::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    /* gold knowledge nodes */
    radial-gradient(
      circle at 4% 12%,
      rgba(234,209,138,.96) 0 2px,
      rgba(210,181,92,.28) 2.5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 16% 39%,
      rgba(11,94,93,.72) 0 2px,
      rgba(11,94,93,.16) 2.5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 7% 67%,
      rgba(234,209,138,.90) 0 2px,
      rgba(210,181,92,.24) 2.5px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 17% 91%,
      rgba(18,79,78,.66) 0 2px,
      rgba(18,79,78,.14) 2.5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 96% 19%,
      rgba(234,209,138,.96) 0 2px,
      rgba(210,181,92,.28) 2.5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 84% 45%,
      rgba(11,94,93,.72) 0 2px,
      rgba(11,94,93,.16) 2.5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 94% 72%,
      rgba(234,209,138,.90) 0 2px,
      rgba(210,181,92,.24) 2.5px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 83% 94%,
      rgba(18,79,78,.66) 0 2px,
      rgba(18,79,78,.14) 2.5px 7px,
      transparent 8px
    ),

    /* diagonal academic network */
    repeating-linear-gradient(
      43deg,
      transparent 0 68px,
      rgba(18,79,78,.042) 69px 70px,
      transparent 71px 138px
    ),
    repeating-linear-gradient(
      -43deg,
      transparent 0 74px,
      rgba(210,181,92,.045) 75px 76px,
      transparent 77px 150px
    ),

    /* dot matrix */
    radial-gradient(
      circle,
      rgba(18,79,78,.15) 0 1px,
      transparent 1.35px
    ) !important;

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    auto,
    auto,
    30px 30px !important;

  opacity: .78 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Large scholarly/floral ring accents */
body::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at -2% 13%,
      transparent 0 58px,
      rgba(210,181,92,.25) 59px 62px,
      transparent 63px 78px,
      rgba(11,94,93,.16) 79px 82px,
      transparent 83px 101px,
      rgba(210,181,92,.12) 102px 105px,
      transparent 106px
    ),
    radial-gradient(
      circle at 101% 29%,
      transparent 0 68px,
      rgba(11,94,93,.20) 69px 72px,
      transparent 73px 91px,
      rgba(210,181,92,.22) 92px 95px,
      transparent 96px 116px,
      rgba(18,79,78,.10) 117px 120px,
      transparent 121px
    ),
    radial-gradient(
      circle at -1% 59%,
      transparent 0 72px,
      rgba(18,79,78,.18) 73px 76px,
      transparent 77px 96px,
      rgba(210,181,92,.22) 97px 100px,
      transparent 101px 124px,
      rgba(11,94,93,.09) 125px 128px,
      transparent 129px
    ),
    radial-gradient(
      circle at 101% 78%,
      transparent 0 61px,
      rgba(210,181,92,.24) 62px 65px,
      transparent 66px 84px,
      rgba(11,94,93,.16) 85px 88px,
      transparent 89px 109px,
      rgba(210,181,92,.10) 110px 113px,
      transparent 114px
    ),
    radial-gradient(
      circle at -2% 94%,
      transparent 0 52px,
      rgba(11,94,93,.18) 53px 56px,
      transparent 57px 72px,
      rgba(210,181,92,.17) 73px 76px,
      transparent 77px 95px,
      rgba(18,79,78,.08) 96px 99px,
      transparent 100px
    ),

    /* broad diagonal page ribbons */
    linear-gradient(
      33deg,
      transparent 0%,
      transparent 10%,
      rgba(210,181,92,.055) 10.2%,
      rgba(210,181,92,.055) 13.5%,
      transparent 13.7%,
      transparent 100%
    ),
    linear-gradient(
      -35deg,
      transparent 0%,
      transparent 85.8%,
      rgba(11,94,93,.055) 86%,
      rgba(11,94,93,.055) 89.5%,
      transparent 89.7%,
      transparent 100%
    ) !important;

  opacity: .92 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* OJS page always above ambient decoration */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
  position: relative !important;
}

.pkp_structure_page {
  z-index: 2 !important;
  background: transparent !important;
}

/* Main desktop glass becomes silver-ivory */
@media (min-width: 901px) {
  .pkp_structure_content.has_sidebar {
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.84) 0%,
        rgba(243,245,241,.78) 100%
      ) !important;
    border-color: rgba(18,79,78,.13) !important;
    box-shadow:
      0 20px 46px rgba(18,63,63,.13),
      inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(3px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(3px) saturate(1.02) !important;
  }
}

/* =======================================================
   2. HEADER + NAVIGATION ACIE
   ======================================================= */

.pkp_structure_head {
  isolation: isolate !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-deeper) 0%,
      var(--acie-dark) 48%,
      #244948 100%
    ) !important;
  border-top-color: rgba(210,181,92,.70) !important;
}

/* Floral-book ambience around uploaded ACIE banner */
.pkp_structure_head::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      circle at 8% 22%,
      rgba(234,209,138,.22) 0%,
      rgba(210,181,92,.07) 22%,
      transparent 43%
    ),
    radial-gradient(
      circle at 92% 72%,
      rgba(197,208,208,.18) 0%,
      rgba(197,208,208,.045) 24%,
      transparent 46%
    ),
    repeating-radial-gradient(
      circle at 0% 50%,
      transparent 0 29px,
      rgba(197,208,208,.075) 30px 32px,
      transparent 33px 55px
    ),
    repeating-radial-gradient(
      circle at 100% 45%,
      transparent 0 34px,
      rgba(210,181,92,.085) 35px 37px,
      transparent 38px 62px
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 37%,
      rgba(255,255,255,.02) 43%,
      rgba(210,181,92,.14) 49%,
      rgba(197,208,208,.055) 54%,
      transparent 63%,
      transparent 100%
    ) !important;

  background-repeat: no-repeat !important;
  background-size:
    100% 100%,
    100% 100%,
    330px 330px,
    380px 380px,
    235% 100% !important;
  background-position:
    center,
    center,
    left center,
    right center,
    135% 0 !important;

  opacity: .72 !important;
  filter: none !important;
  box-shadow:
    inset 0 -42px 60px rgba(7,42,42,.24),
    inset 0 22px 38px rgba(7,42,42,.13) !important;

  animation: acieHeaderSweep 13s ease-in-out infinite !important;
}

/* Education constellation accents */
.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      circle at 3.5% 28%,
      rgba(234,209,138,.96) 0 2px,
      rgba(210,181,92,.28) 2.5px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 8% 78%,
      rgba(197,208,208,.86) 0 2px,
      rgba(197,208,208,.18) 2.5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 96.5% 24%,
      rgba(234,209,138,.96) 0 2px,
      rgba(210,181,92,.28) 2.5px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 91% 75%,
      rgba(197,208,208,.86) 0 2px,
      rgba(197,208,208,.18) 2.5px 7px,
      transparent 8px
    ),
    linear-gradient(
      15deg,
      transparent 0 9.8%,
      rgba(210,181,92,.15) 10%,
      transparent 10.3% 100%
    ),
    linear-gradient(
      -15deg,
      transparent 0 89.7%,
      rgba(197,208,208,.13) 90%,
      transparent 90.3% 100%
    ) !important;

  opacity: .67 !important;
  transform: none !important;
  filter: none !important;
  animation: acieHeaderPulse 6.8s ease-in-out infinite !important;
}

@keyframes acieHeaderSweep {
  0%, 18% {
    background-position:
      center, center, left center, right center, 135% 0;
  }
  50% {
    background-position:
      center, center, left center, right center, 42% 0;
  }
  82%, 100% {
    background-position:
      center, center, left center, right center, -35% 0;
  }
}

@keyframes acieHeaderPulse {
  0%, 100% { opacity: .48; }
  50% { opacity: .76; }
}

/* Banner frame only; size and position remain from AICIEF */
.pkp_site_name img,
.pkp_site_name .is_img img {
  border-color: rgba(210,181,92,.56) !important;
  background:
    linear-gradient(
      135deg,
      rgba(11,94,93,.20),
      rgba(197,208,208,.09)
    ) !important;
  filter:
    drop-shadow(0 8px 18px rgba(7,42,42,.32))
    saturate(1.02)
    contrast(1.01) !important;
}

/* Main nav links */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > span,
#navigationUserWrapper a,
#navigationUserWrapper a:visited,
#navigationUser.pkp_navigation_user > li > a,
#navigationUser.pkp_navigation_user > li > a:visited {
  color: #f2f5f5 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.34) !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > span:hover,
.pkp_navigation_primary > li > span:focus,
#navigationUserWrapper > ul > li > a:hover,
#navigationUserWrapper > ul > li > a:focus,
#navigationUser.pkp_navigation_user > li > a:hover,
#navigationUser.pkp_navigation_user > li > a:focus {
  color: var(--acie-gold-light) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.36),
    0 0 12px rgba(210,181,92,.18) !important;
}

/* Active primary menu */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.current > span,
.pkp_navigation_primary > li[aria-current="page"] > a {
  color: var(--acie-gold-light) !important;
}

/* Search */
.pkp_search,
.pkp_navigation_search_wrapper .pkp_search {
  color: var(--acie-deeper) !important;
  border-color: rgba(234,209,138,.72) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
  box-shadow:
    0 7px 18px rgba(7,42,42,.22),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.pkp_search:hover,
.pkp_search:focus {
  color: #fff !important;
  border-color: rgba(197,208,208,.54) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-mid),
      var(--acie-dark)
    ) !important;
}

/* Hamburger */
.pkp_site_nav_toggle {
  color: var(--acie-deeper) !important;
  border-color: rgba(18,79,78,.42) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

.pkp_site_nav_toggle::before {
  color: var(--acie-deeper) !important;
}

/* Desktop dropdowns */
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary > li > ul,
.pkp_navigation_primary li ul,
.pkp_navigation_user .dropdown-menu,
#navigationUser li ul {
  background:
    linear-gradient(
      145deg,
      rgba(18,63,63,.99),
      rgba(11,52,52,.99)
    ) !important;
  border-color: rgba(210,181,92,.52) !important;
  box-shadow:
    0 18px 38px rgba(7,42,42,.42),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.pkp_navigation_primary .dropdown-menu::before,
.pkp_navigation_primary > li > ul::before,
.pkp_navigation_user .dropdown-menu::before,
#navigationUser li ul::before {
  background: var(--acie-deep) !important;
  border-left-color: rgba(210,181,92,.52) !important;
  border-top-color: rgba(210,181,92,.52) !important;
}

.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary > li > ul a,
.pkp_navigation_primary li ul a,
.pkp_navigation_user .dropdown-menu a,
#navigationUser li ul a {
  color: #f1f4f4 !important;
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary > li > ul a:hover,
.pkp_navigation_primary > li > ul a:focus,
.pkp_navigation_primary li ul a:hover,
.pkp_navigation_primary li ul a:focus,
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user .dropdown-menu a:focus,
#navigationUser li ul a:hover,
#navigationUser li ul a:focus {
  color: var(--acie-gold-light) !important;
  background: transparent !important;
}

/* Mobile integrated menu */
@media (max-width: 991px) {
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(210,181,92,.13),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        rgba(18,63,63,.995),
        rgba(11,52,52,.995)
      ) !important;
    border-top-color: rgba(210,181,92,.30) !important;
    border-bottom-color: rgba(210,181,92,.80) !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li {
    border-bottom-color: rgba(197,208,208,.09) !important;
  }

  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > a:hover,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_primary > li > a:focus,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul a:hover,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  ul ul a:focus,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li > a:hover,
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen
  .pkp_navigation_user > li > a:focus {
    color: var(--acie-gold-light) !important;
  }
}

/* =======================================================
   3. SIDEBAR ACIE
   ======================================================= */

.sakinah-sidebar-card {
  border-color: rgba(18,79,78,.16) !important;
  background:
    radial-gradient(
      circle at 98% 4%,
      rgba(210,181,92,.09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(238,242,240,.96)
    ) !important;
  box-shadow:
    0 12px 28px rgba(18,63,63,.12),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

.sakinah-sidebar-card:hover {
  border-color: rgba(210,181,92,.40) !important;
  box-shadow:
    0 16px 34px rgba(18,63,63,.16),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* Only first title in a card is a title bar */
.sakinah-sidebar-card > .sakinah-sidebar-title:first-child {
  color: var(--acie-gold-light) !important;
  border-color: rgba(210,181,92,.50) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-deeper),
      var(--acie-deep) 56%,
      var(--acie-dark)
    ) !important;
  box-shadow:
    0 7px 17px rgba(18,63,63,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.sakinah-sidebar-card > .sakinah-sidebar-title:first-child::before {
  color: var(--acie-deeper) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

.sakinah-info-menu .sakinah-sidebar-menu {
  border-bottom-color: rgba(18,79,78,.12) !important;
}

.sakinah-info-menu .sakinah-sidebar-menu a,
.sakinah-info-menu .sakinah-sidebar-menu a:visited {
  color: var(--acie-deep) !important;
}

.sakinah-info-menu .sakinah-sidebar-menu a::after {
  color: var(--acie-gold-dark) !important;
}

.sakinah-info-menu .sakinah-sidebar-menu a::before {
  background:
    linear-gradient(
      180deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

.sakinah-info-menu .sakinah-sidebar-menu a:hover,
.sakinah-info-menu .sakinah-sidebar-menu a:focus {
  color: var(--acie-gold-dark) !important;
  background:
    linear-gradient(
      90deg,
      rgba(210,181,92,.15),
      rgba(228,233,233,.64)
    ) !important;
}

/* Keep sidebar images blended into the new silver-ivory card */
.sakinah-template-card > a,
.sakinah-tools-card > .sakinah-sidebar-title:not(:first-child) > a,
.sakinah-stat-card > a:not([href*="histats.com/viewstats"]),
.sakinah-stat-card > img:not([src*="0.gif"]),
.sakinah-stat-card > a[href*="histats.com/viewstats"] + img {
  border-color: rgba(18,79,78,.12) !important;
  background:
    linear-gradient(
      145deg,
      rgba(241,244,241,.98),
      rgba(247,248,245,.98)
    ) !important;
}

/* =======================================================
   4. CONTENT LINKS, BREADCRUMB, ARTICLES, ISSUE, AUTH
   ======================================================= */

/* General academic links */
.pkp_structure_main
a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit),
.pkp_structure_main
a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit):visited {
  color: var(--acie-mid) !important;
}

.pkp_structure_main
a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit):hover,
.pkp_structure_main
a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit):focus {
  color: var(--acie-gold-dark) !important;
}

/* Breadcrumb */
.cmp_breadcrumbs,
.cmp_breadcrumbs ol,
.cmp_breadcrumbs ul {
  border-color: rgba(18,79,78,.14) !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94),
      rgba(238,242,240,.88)
    ) !important;
  box-shadow: 0 9px 22px rgba(18,63,63,.09) !important;
}

.cmp_breadcrumbs a,
.cmp_breadcrumbs a:visited {
  color: var(--acie-deep) !important;
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
  color: var(--acie-gold-dark) !important;
  background:
    linear-gradient(
      135deg,
      rgba(210,181,92,.17),
      rgba(228,233,233,.62)
    ) !important;
}

.cmp_breadcrumbs .separator,
.cmp_breadcrumbs li:not(:last-child)::after {
  color: var(--acie-gold) !important;
}

/* Article and issue title links */
.page_index_journal .current_issue .obj_article_summary .title a,
.page_index_journal .current_issue .obj_article_summary .title a:visited,
body.pkp_page_issue .page_issue .obj_article_summary .title a,
body.pkp_page_issue .page_issue .obj_article_summary .title a:visited,
body.pkp_page_issue.pkp_op_archive .obj_issue_summary a.title,
body.pkp_page_issue.pkp_op_archive .obj_issue_summary a.title:visited {
  color: var(--acie-mid) !important;
}

.page_index_journal .current_issue .obj_article_summary .title a:hover,
.page_index_journal .current_issue .obj_article_summary .title a:focus,
body.pkp_page_issue .page_issue .obj_article_summary .title a:hover,
body.pkp_page_issue .page_issue .obj_article_summary .title a:focus,
body.pkp_page_issue.pkp_op_archive .obj_issue_summary a.title:hover,
body.pkp_page_issue.pkp_op_archive .obj_issue_summary a.title:focus {
  color: var(--acie-gold-dark) !important;
}

/* Article cards */
.page_index_journal .current_issue .obj_article_summary,
body.pkp_page_issue .page_issue .obj_article_summary {
  border-color: rgba(18,79,78,.15) !important;
  border-left-color: var(--acie-gold) !important;
  background:
    radial-gradient(
      circle at 96% 12%,
      rgba(210,181,92,.11),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(239,243,241,.95)
    ) !important;
  box-shadow:
    0 9px 22px rgba(18,63,63,.09),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.page_index_journal .current_issue .obj_article_summary:hover,
body.pkp_page_issue .page_issue .obj_article_summary:hover {
  border-color: rgba(210,181,92,.48) !important;
  box-shadow:
    0 15px 31px rgba(18,63,63,.14),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* All PDF/action buttons */
.obj_galley_link.pdf,
body.pkp_page_article
.obj_article_details .entry_details .obj_galley_link.pdf,
.page_index_journal .current_issue .obj_galley_link.pdf,
body.pkp_page_issue .page_issue .obj_galley_link.pdf {
  color: var(--acie-gold-light) !important;
  border-color: rgba(210,181,92,.62) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-deeper),
      var(--acie-dark)
    ) !important;
}

.obj_galley_link.pdf:hover,
.obj_galley_link.pdf:focus,
body.pkp_page_article
.obj_article_details .entry_details .obj_galley_link.pdf:hover,
body.pkp_page_article
.obj_article_details .entry_details .obj_galley_link.pdf:focus,
.page_index_journal .current_issue .obj_galley_link.pdf:hover,
.page_index_journal .current_issue .obj_galley_link.pdf:focus,
body.pkp_page_issue .page_issue .obj_galley_link.pdf:hover,
body.pkp_page_issue .page_issue .obj_galley_link.pdf:focus {
  color: var(--acie-deeper) !important;
  border-color: var(--acie-gold-light) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

/* Issue/archive separators and series pill */
body.pkp_page_issue.pkp_op_archive .obj_issue_summary::after {
  background:
    linear-gradient(
      90deg,
      rgba(210,181,92,.60),
      rgba(18,79,78,.16),
      transparent
    ) !important;
}

body.pkp_page_issue.pkp_op_archive .obj_issue_summary .series,
.page_index_journal .current_issue .obj_article_summary .pages,
body.pkp_page_issue .page_issue .obj_article_summary .pages {
  color: #735f28 !important;
  border-color: rgba(210,181,92,.40) !important;
  background: rgba(210,181,92,.12) !important;
}

/* Label pills */
.page_index_journal .current_issue .sections .section > h3,
body.pkp_page_issue .page_issue .obj_issue_toc .sections .section > h2,
.page_index_journal .page_about > p:has(+ table) strong,
.page_index_journal .page_about > p:nth-of-type(2) strong {
  color: var(--acie-deeper) !important;
  border-color: rgba(210,181,92,.78) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

/* Login/Register */
body.pkp_page_login .page_login > h1,
body.pkp_page_user .page_register > h1,
body.pkp_page_user .page_user > h1 {
  color: var(--acie-deep) !important;
}

body.pkp_page_login .cmp_form label > .label,
body.pkp_page_user .cmp_form label > .label,
body.pkp_page_user .cmp_form .label {
  color: var(--acie-deep) !important;
}

body.pkp_page_login .cmp_form input:focus,
body.pkp_page_user .cmp_form input:focus,
body.pkp_page_user .cmp_form select:focus,
body.pkp_page_user .cmp_form textarea:focus {
  border-color: rgba(210,181,92,.88) !important;
  box-shadow: 0 0 0 4px rgba(210,181,92,.13) !important;
}

body.pkp_page_login .cmp_form button.submit,
body.pkp_page_user .cmp_form button.submit,
body.pkp_page_user .cmp_form button[type="submit"],
body.pkp_page_user .cmp_form input[type="submit"] {
  color: var(--acie-gold-light) !important;
  border-color: rgba(210,181,92,.62) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-deeper),
      var(--acie-dark)
    ) !important;
}

body.pkp_page_login .cmp_form button.submit:hover,
body.pkp_page_login .cmp_form button.submit:focus,
body.pkp_page_user .cmp_form button.submit:hover,
body.pkp_page_user .cmp_form button.submit:focus,
body.pkp_page_user .cmp_form button[type="submit"]:hover,
body.pkp_page_user .cmp_form input[type="submit"]:hover {
  color: var(--acie-deeper) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

/* Article detail */
body.pkp_page_article .obj_article_details > .page_title {
  color: var(--acie-deep) !important;
  border-color: rgba(18,79,78,.15) !important;
  border-left-color: var(--acie-gold) !important;
  background:
    radial-gradient(
      circle at 94% 12%,
      rgba(210,181,92,.12),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(239,243,241,.95)
    ) !important;
}

body.pkp_page_article
.obj_article_details > .row > .entry_details {
  border-color: rgba(210,181,92,.50) !important;
  border-left-color: var(--acie-gold) !important;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(210,181,92,.13),
      transparent 35%
    ),
    linear-gradient(
      150deg,
      rgba(255,255,255,.99),
      rgba(239,243,241,.97)
    ) !important;
}

body.pkp_page_article
.obj_article_details > .row > .entry_details::before {
  color: var(--acie-gold-light) !important;
  border-color: rgba(210,181,92,.40) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-deeper),
      var(--acie-dark)
    ) !important;
}

/* =======================================================
   5. JOURNAL PROFILE ACIE
   Existing aicief-* classes retained for compatibility.
   ======================================================= */

.aicief-journal-profile__inner {
  border-color: rgba(18,79,78,.16) !important;
  border-top-color: var(--acie-gold) !important;
  background:
    radial-gradient(
      circle at 96% 5%,
      rgba(210,181,92,.14),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(239,243,241,.97)
    ) !important;
  box-shadow:
    0 14px 30px rgba(18,63,63,.12),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.aicief-journal-profile__inner::after {
  border-color: rgba(210,181,92,.10) !important;
}

.aicief-journal-profile__cover {
  border-color: rgba(210,181,92,.34) !important;
  background:
    linear-gradient(
      145deg,
      var(--acie-deeper),
      var(--acie-mid)
    ) !important;
}

.aicief-journal-profile__title {
  color: var(--acie-deep) !important;
}

.aicief-journal-profile__meta dt {
  color: var(--acie-mid) !important;
}

.aicief-journal-profile__meta dd {
  color: var(--acie-text) !important;
}

.aicief-journal-profile__meta a,
.aicief-journal-profile__meta a:visited {
  color: var(--acie-mid) !important;
}

.aicief-journal-profile__meta a:hover,
.aicief-journal-profile__meta a:focus {
  color: var(--acie-gold-dark) !important;
}

.aicief-journal-profile__eyebrow {
  color: var(--acie-deeper) !important;
  border-color: rgba(210,181,92,.72) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit:visited {
  color: var(--acie-gold-light) !important;
  border-color: rgba(210,181,92,.64) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-deeper),
      var(--acie-mid)
    ) !important;
}

.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit:hover,
.page_index_journal
.additional_content
section.additional_content
.aicief-journal-profile__submit:focus {
  color: var(--acie-deeper) !important;
  background:
    linear-gradient(
      135deg,
      var(--acie-gold-light),
      var(--acie-gold)
    ) !important;
}

/* =======================================================
   6. FOOTER ACIE
   ======================================================= */

.pkp_structure_footer {
  position: relative !important;
  overflow: hidden !important;
  color: #f2f5f5 !important;
  border-top-color: var(--acie-gold) !important;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(210,181,92,.17),
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 77%,
      rgba(197,208,208,.12),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--acie-deeper) 0%,
      var(--acie-deep) 52%,
      #244948 100%
    ) !important;

  box-shadow: 0 -9px 26px rgba(18,63,63,.20) !important;
}

.pkp_structure_footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    repeating-radial-gradient(
      circle at 0% 50%,
      transparent 0 27px,
      rgba(197,208,208,.075) 28px 30px,
      transparent 31px 54px
    ),
    repeating-radial-gradient(
      circle at 100% 50%,
      transparent 0 32px,
      rgba(210,181,92,.08) 33px 35px,
      transparent 36px 60px
    ),
    radial-gradient(
      circle,
      rgba(210,181,92,.15) 0 1.5px,
      transparent 2px
    ) !important;

  background-size:
    310px 310px,
    350px 350px,
    76px 76px !important;
  background-position:
    left center,
    right center,
    0 0 !important;

  opacity: .48 !important;
}

.pkp_structure_footer::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(234,209,138,.98),
      transparent
    ) !important;
}

.pkp_footer_content,
.pkp_brand_footer {
  position: relative !important;
  z-index: 2 !important;
}

.sakinah-footer-content h3,
.sakinah-footer-content a,
.sakinah-footer-content a:visited {
  color: var(--acie-gold-light) !important;
}

.sakinah-footer-content a:hover,
.sakinah-footer-content a:focus {
  color: var(--acie-silver-light) !important;
}

.sakinah-footer-content p {
  color: rgba(242,245,245,.91) !important;
}

.sakinah-footer-content strong {
  color: #fff !important;
}

.sakinah-footer-license {
  border-top-color: rgba(210,181,92,.24) !important;
}

.sakinah-footer-map {
  border-color: rgba(210,181,92,.34) !important;
  background: rgba(197,208,208,.075) !important;
}

/* =======================================================
   7. RESPONSIVE + ACCESSIBILITY
   ======================================================= */

@media (max-width: 768px) {
  body::before {
    opacity: .50 !important;
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      auto,
      auto,
      34px 34px !important;
  }

  body::after {
    opacity: .66 !important;
  }

  .pkp_structure_head::before {
    opacity: .61 !important;
    animation-duration: 17s !important;
  }

  .pkp_structure_head::after {
    opacity: .52 !important;
    animation-duration: 8.5s !important;
  }
}

@media (max-width: 480px) {
  body::before {
    opacity: .40 !important;
  }

  body::after {
    opacity: .52 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_structure_head::before,
  .pkp_structure_head::after {
    animation: none !important;
  }

  body::before,
  body::after {
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body::before,
  body::after {
    opacity: .20 !important;
  }
}

@media (prefers-reduced-transparency: reduce) and (min-width: 901px) {
  .pkp_structure_content.has_sidebar {
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =======================================================
   ACIE UNZAH THEME V2
   HEADER–FOOTER HARMONY + PORTAL-STYLE BODY ACCENT
   -------------------------------------------------------
   1. Warna header disamakan dengan warna footer ACIE
   2. Ornamen header dibuat lebih lembut dan konsisten
   3. Body memakai pita diagonal bertitik ala Portal UNZAH
   4. Ornamen body ikut bergerak bersama halaman saat scroll
      karena memakai position:absolute, bukan fixed/sticky
   ======================================================= */

:root {
  --acie-v2-deep: #123f3f;
  --acie-v2-deeper: #0b3434;
  --acie-v2-dark: #164f4e;
  --acie-v2-surface: #244948;
  --acie-v2-silver: #c5d0d0;
  --acie-v2-silver-light: #e4e9e9;
  --acie-v2-gold: #d2b55c;
  --acie-v2-gold-light: #ead18a;
  --acie-v2-ivory: #f7f8f5;
  --acie-v2-cream: #f3f1e8;
}

/* =======================================================
   1. HEADER: PALET SAMA DENGAN FOOTER
   ======================================================= */

.pkp_structure_head {
  position: relative !important;
  isolation: isolate !important;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(210,181,92,.17) 0%,
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 77%,
      rgba(197,208,208,.12) 0%,
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--acie-v2-deeper) 0%,
      var(--acie-v2-deep) 52%,
      var(--acie-v2-surface) 100%
    ) !important;

  border-top-color: var(--acie-v2-gold) !important;
  box-shadow:
    inset 0 -28px 46px rgba(5,35,35,.17),
    0 9px 26px rgba(18,63,63,.13) !important;
}

/*
 * Pola header mengikuti pola footer:
 * lingkaran floral di sisi kiri/kanan dan dot matrix halus.
 */
.pkp_structure_head::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    repeating-radial-gradient(
      circle at 0% 50%,
      transparent 0 27px,
      rgba(197,208,208,.075) 28px 30px,
      transparent 31px 54px
    ),
    repeating-radial-gradient(
      circle at 100% 50%,
      transparent 0 32px,
      rgba(210,181,92,.08) 33px 35px,
      transparent 36px 60px
    ),
    radial-gradient(
      circle,
      rgba(210,181,92,.14) 0 1.4px,
      transparent 2px
    ) !important;

  background-size:
    310px 310px,
    350px 350px,
    78px 78px !important;

  background-position:
    left center,
    right center,
    0 0 !important;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;

  opacity: .38 !important;
  filter: none !important;
  box-shadow: none !important;

  transform: translate3d(0,0,0) !important;
  animation: acieV2HeaderPattern 24s ease-in-out infinite alternate !important;
}

/* Kilau tipis dan node kecil, tanpa membuat header terlalu kontras */
.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      circle at 4% 28%,
      rgba(234,209,138,.82) 0 1.7px,
      rgba(210,181,92,.18) 2px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 96% 72%,
      rgba(228,233,233,.72) 0 1.7px,
      rgba(197,208,208,.14) 2px 7px,
      transparent 8px
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 39%,
      rgba(255,255,255,.018) 44%,
      rgba(210,181,92,.095) 49%,
      rgba(228,233,233,.035) 54%,
      transparent 61%,
      transparent 100%
    ) !important;

  background-size:
    100% 100%,
    100% 100%,
    235% 100% !important;

  background-position:
    center,
    center,
    130% 0 !important;

  background-repeat: no-repeat !important;

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

  animation: acieV2HeaderSweep 15s ease-in-out infinite !important;
}

@keyframes acieV2HeaderPattern {
  0% {
    background-position:
      -8px center,
      calc(100% + 8px) center,
      0 0;
  }

  100% {
    background-position:
      8px center,
      calc(100% - 8px) center,
      39px 22px;
  }
}

@keyframes acieV2HeaderSweep {
  0%, 18% {
    background-position:
      center,
      center,
      130% 0;
    opacity: .32;
  }

  50% {
    background-position:
      center,
      center,
      42% 0;
    opacity: .50;
  }

  82%, 100% {
    background-position:
      center,
      center,
      -30% 0;
    opacity: .32;
  }
}

/* =======================================================
   2. BODY: AKSEN ALA PORTAL UNZAH
   ======================================================= */

html {
  background: #eef2f0 !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;

  background-color: #eef2f0 !important;
  background-image:
    radial-gradient(
      circle at 86% 10%,
      rgba(197,208,208,.18) 0%,
      transparent 29%
    ),
    radial-gradient(
      circle at 88% 88%,
      rgba(210,181,92,.10) 0%,
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #fafbf9 0%,
      #f4f7f5 52%,
      #eef2f0 100%
    ) !important;

  /* Seluruh background mengikuti aliran dokumen saat scroll. */
  background-attachment: scroll !important;
}

/*
 * Pita diagonal utama di sisi kiri.
 * Pola dot dan garis silang meniru karakter Portal UNZAH,
 * tetapi memakai teal, silver, dan gold ACIE.
 */
body::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 0 !important;

  pointer-events: none !important;

  background-image:
    radial-gradient(
      circle,
      rgba(210,181,92,.34) 0 1.55px,
      transparent 2.15px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 92px,
      rgba(18,79,78,.065) 93px 95px,
      transparent 96px 187px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 106px,
      rgba(197,208,208,.17) 107px 109px,
      transparent 110px 215px
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.96) 0%,
      rgba(247,248,245,.93) 48%,
      rgba(243,241,232,.86) 100%
    ) !important;

  background-size:
    23px 23px,
    auto,
    auto,
    auto !important;

  background-position:
    0 0,
    center,
    center,
    center !important;

  background-repeat:
    repeat,
    repeat,
    repeat,
    no-repeat !important;

  /*
   * Bentuk pita dibuat lebar di kiri atas, menyilang ke tengah,
   * kemudian kembali melebar di bagian bawah.
   */
  clip-path:
    polygon(
      0 0,
      17% 0,
      42% 41%,
      18% 100%,
      0 100%
    ) !important;

  -webkit-clip-path:
    polygon(
      0 0,
      17% 0,
      42% 41%,
      18% 100%,
      0 100%
    ) !important;

  opacity: .78 !important;

  filter:
    drop-shadow(2px 0 0 rgba(210,181,92,.24))
    drop-shadow(5px 0 0 rgba(18,79,78,.055)) !important;

  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/*
 * Garis tepi diagonal dan aksen tipis pada sisi kanan.
 * Layer ini tetap absolute sehingga ikut bergeser saat scroll.
 */
body::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 0 !important;

  pointer-events: none !important;

  background-image:
    /* garis emas pada tepi pita utama */
    linear-gradient(
      132deg,
      transparent 0%,
      transparent 27.45%,
      rgba(210,181,92,.52) 27.58%,
      rgba(234,209,138,.78) 27.68%,
      transparent 27.82%,
      transparent 100%
    ),

    /* garis silver/teal pendamping */
    linear-gradient(
      132deg,
      transparent 0%,
      transparent 29.0%,
      rgba(18,79,78,.10) 29.12%,
      rgba(197,208,208,.36) 29.24%,
      transparent 29.38%,
      transparent 100%
    ),

    /* aksen diagonal kanan bawah */
    linear-gradient(
      312deg,
      transparent 0%,
      transparent 84.3%,
      rgba(210,181,92,.24) 84.43%,
      rgba(234,209,138,.42) 84.54%,
      transparent 84.70%,
      transparent 100%
    ),

    /* bidang cahaya sangat lembut */
    radial-gradient(
      ellipse at 93% 19%,
      rgba(18,79,78,.075) 0%,
      transparent 33%
    ),
    radial-gradient(
      ellipse at 91% 82%,
      rgba(210,181,92,.075) 0%,
      transparent 35%
    ) !important;

  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;

  opacity: .92 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Pastikan semua struktur OJS berada di atas ornamen */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer_wrapper {
  position: relative !important;
  z-index: 2 !important;
}

/* Wrapper utama tetap transparan agar aksen terlihat di sekelilingnya */
.pkp_structure_page {
  background: transparent !important;
}

/* =======================================================
   3. RESPONSIVE
   ======================================================= */

@media (max-width: 900px) {
  body::before {
    clip-path:
      polygon(
        0 0,
        23% 0,
        56% 37%,
        25% 100%,
        0 100%
      ) !important;

    -webkit-clip-path:
      polygon(
        0 0,
        23% 0,
        56% 37%,
        25% 100%,
        0 100%
      ) !important;

    background-size:
      27px 27px,
      auto,
      auto,
      auto !important;

    opacity: .57 !important;
  }

  body::after {
    opacity: .64 !important;
  }

  .pkp_structure_head::before {
    opacity: .32 !important;
    animation-duration: 28s !important;
  }

  .pkp_structure_head::after {
    opacity: .35 !important;
    animation-duration: 18s !important;
  }
}

@media (max-width: 560px) {
  body::before {
    clip-path:
      polygon(
        0 0,
        28% 0,
        70% 30%,
        31% 100%,
        0 100%
      ) !important;

    -webkit-clip-path:
      polygon(
        0 0,
        28% 0,
        70% 30%,
        31% 100%,
        0 100%
      ) !important;

    opacity: .39 !important;
  }

  body::after {
    opacity: .42 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_structure_head::before,
  .pkp_structure_head::after {
    animation: none !important;
  }

  body::before,
  body::after {
    animation: none !important;
    transform: none !important;
  }
}

/* =======================================================
   ACIE UNZAH THEME V3
   HEADER–FOOTER COLOUR HARMONY
   -------------------------------------------------------
   Menyamakan basis warna header dan footer dengan warna
   poster ACIE: teal akademik, sedikit silver, dan gold.
   Body accent dari V2 tetap dipertahankan.
   ======================================================= */

:root {
  --acie-v3-teal-950: #0a3333;
  --acie-v3-teal-900: #0d4140;
  --acie-v3-teal-800: #105652;
  --acie-v3-teal-700: #1f5f5b;
  --acie-v3-slate: #344d4d;
  --acie-v3-silver: #c8d3d2;
  --acie-v3-gold: #d4b65d;
  --acie-v3-gold-light: #ecd38d;
}

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

html body .pkp_structure_head {
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(212,182,93,.14) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(200,211,210,.10) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--acie-v3-teal-950) 0%,
      var(--acie-v3-teal-800) 50%,
      var(--acie-v3-slate) 100%
    ) !important;

  border-top-color: var(--acie-v3-gold) !important;

  box-shadow:
    inset 0 -24px 42px rgba(4,31,31,.15),
    0 8px 24px rgba(10,51,51,.14) !important;
}

/* Ornamen header dibuat lebih senada dengan poster */
html body .pkp_structure_head::before {
  background-image:
    repeating-radial-gradient(
      circle at 0% 50%,
      transparent 0 28px,
      rgba(200,211,210,.075) 29px 31px,
      transparent 32px 56px
    ),
    repeating-radial-gradient(
      circle at 100% 50%,
      transparent 0 34px,
      rgba(212,182,93,.075) 35px 37px,
      transparent 38px 63px
    ),
    radial-gradient(
      circle,
      rgba(212,182,93,.12) 0 1.35px,
      transparent 2px
    ) !important;

  background-size:
    320px 320px,
    360px 360px,
    84px 84px !important;

  background-position:
    left center,
    right center,
    0 0 !important;

  opacity: .30 !important;
  filter: none !important;
}

html body .pkp_structure_head::after {
  background-image:
    radial-gradient(
      circle at 4% 28%,
      rgba(236,211,141,.78) 0 1.6px,
      rgba(212,182,93,.15) 2px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 96% 72%,
      rgba(200,211,210,.68) 0 1.6px,
      rgba(200,211,210,.12) 2px 7px,
      transparent 8px
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,.018) 44%,
      rgba(212,182,93,.085) 49%,
      rgba(200,211,210,.03) 54%,
      transparent 61%,
      transparent 100%
    ) !important;

  opacity: .34 !important;
}

/* Navigasi tetap menyatu dengan bidang header */
html body .pkp_site_nav_menu,
html body .pkp_navigation_primary_row {
  background: transparent !important;
}

/* =======================================================
   FOOTER
   Basis warna dibuat sama persis dengan header.
   ======================================================= */

html body .pkp_structure_footer_wrapper,
html body .pkp_structure_footer {
  background:
    radial-gradient(
      circle at 14% 18%,
      rgba(212,182,93,.14) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 87% 82%,
      rgba(200,211,210,.10) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--acie-v3-teal-950) 0%,
      var(--acie-v3-teal-800) 50%,
      var(--acie-v3-slate) 100%
    ) !important;

  border-top-color: var(--acie-v3-gold) !important;

  box-shadow:
    inset 0 24px 42px rgba(4,31,31,.12),
    0 -8px 24px rgba(10,51,51,.13) !important;
}

/* Hapus warna footer lama yang membuatnya tampak kehijauan/olive */
html body .pkp_structure_footer::before {
  background:
    radial-gradient(
      circle at 0% 50%,
      transparent 0 34px,
      rgba(200,211,210,.075) 35px 37px,
      transparent 38px 64px
    ),
    radial-gradient(
      circle at 100% 50%,
      transparent 0 38px,
      rgba(212,182,93,.075) 39px 41px,
      transparent 42px 70px
    ),
    radial-gradient(
      circle,
      rgba(212,182,93,.10) 0 1.25px,
      transparent 1.9px
    ) !important;

  background-size:
    330px 330px,
    370px 370px,
    88px 88px !important;

  background-position:
    left center,
    right center,
    0 0 !important;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;

  opacity: .24 !important;
  filter: none !important;
}

/* Garis highlight gold yang sama seperti header */
html body .pkp_structure_footer::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(236,211,141,.88),
      transparent
    ) !important;
}

/* Warna isi footer */
html body .pkp_footer_content,
html body .pkp_footer_content p,
html body .pkp_footer_content li,
html body .pkp_footer_content span,
html body .pkp_footer_content strong {
  color: rgba(242,246,245,.94) !important;
}

html body .pkp_footer_content h1,
html body .pkp_footer_content h2,
html body .pkp_footer_content h3,
html body .pkp_footer_content h4,
html body .pkp_footer_content a,
html body .pkp_footer_content a:visited,
html body .sakinah-footer-content h3,
html body .sakinah-footer-content a,
html body .sakinah-footer-content a:visited {
  color: var(--acie-v3-gold-light) !important;
}

html body .pkp_footer_content a:hover,
html body .pkp_footer_content a:focus,
html body .sakinah-footer-content a:hover,
html body .sakinah-footer-content a:focus {
  color: #ffffff !important;
}

/* Logo footer ACIE tetap terbaca di atas teal */
html body .sakinah-footer-logo img,
html body .pkp_footer_content img {
  filter:
    saturate(.95)
    contrast(1.02)
    brightness(1.02) !important;
}

/* License dan map */
html body .sakinah-footer-license {
  border-top-color: rgba(212,182,93,.22) !important;
}

html body .sakinah-footer-map {
  border-color: rgba(212,182,93,.30) !important;
  background: rgba(255,255,255,.055) !important;
}

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media (max-width: 991px) {
  html body .pkp_structure_head::before,
  html body .pkp_structure_footer::before {
    opacity: .22 !important;
  }

  html body .pkp_structure_head::after {
    opacity: .27 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .pkp_structure_head::before,
  html body .pkp_structure_head::after {
    animation: none !important;
  }
}

/* =======================================================
   ACIE UNZAH THEME V4
   DEFINITIVE HEADER COLOUR + CRISP PORTAL BODY ACCENT
   -------------------------------------------------------
   - Menimpa seluruh warisan biru pada header
   - Basis header dibuat dekat dengan poster dan footer ACIE
   - Selector dibuat lebih spesifik karena site CSS dimuat
     setelah journal CSS
   - Aksen body dibuat tajam, tanpa blur/drop-shadow
   - Semua ornamen body mengikuti scroll halaman
   ======================================================= */

:root {
  --acie-v4-deep: #0a3b3a;
  --acie-v4-mid: #0f5b57;
  --acie-v4-soft: #315754;
  --acie-v4-silver: #c7d2d1;
  --acie-v4-gold: #d4b65d;
  --acie-v4-gold-light: #ecd38d;
  --acie-v4-page: #f6f8f6;
}

/* =======================================================
   1. HEADER — RESET TOTAL WARNA BIRU
   ======================================================= */

html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer.pkp_structure_head {
  isolation: isolate !important;
  background-color: var(--acie-v4-deep) !important;
  background-image:
    radial-gradient(
      circle at 10% 18%,
      rgba(212,182,93,.12) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(199,210,209,.09) 0%,
      transparent 34%
    ),
    linear-gradient(
      118deg,
      #083837 0%,
      var(--acie-v4-mid) 48%,
      var(--acie-v4-soft) 100%
    ) !important;
  border-top: 3px solid var(--acie-v4-gold) !important;
  box-shadow:
    inset 0 -24px 42px rgba(4,30,29,.14),
    0 8px 22px rgba(10,59,58,.13) !important;
}

/* Semua wrapper internal transparan agar tidak menampilkan lapisan biru lama. */
html body.has_site_logo
header#headerNavigationContainer .pkp_head_wrapper,
html body.has_site_logo
header#headerNavigationContainer .pkp_site_name_wrapper,
html body.has_site_logo
header#headerNavigationContainer .pkp_site_nav_menu,
html body.has_site_logo
header#headerNavigationContainer .pkp_navigation_primary_row,
html body.has_site_logo
header#headerNavigationContainer .pkp_navigation_primary_wrapper,
html body.has_site_logo
header#headerNavigationContainer #navigationUserWrapper {
  background-color: transparent !important;
  background-image: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Reset penuh pseudo-element lama sebelum memasang ornamen baru. */
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-color: transparent !important;
  background-image:
    repeating-radial-gradient(
      circle at 0% 50%,
      transparent 0 31px,
      rgba(199,210,209,.075) 32px 34px,
      transparent 35px 61px
    ),
    repeating-radial-gradient(
      circle at 100% 50%,
      transparent 0 36px,
      rgba(212,182,93,.070) 37px 39px,
      transparent 40px 68px
    ),
    radial-gradient(
      circle,
      rgba(212,182,93,.16) 0 1.25px,
      transparent 1.9px
    ) !important;
  background-size:
    330px 330px,
    380px 380px,
    86px 86px !important;
  background-position:
    left center,
    right center,
    0 0 !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;

  opacity: .31 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
  transform: none !important;
  animation: acieV4HeaderPattern 26s ease-in-out infinite alternate !important;
}

html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background-color: transparent !important;
  background-image:
    radial-gradient(
      circle at 3.5% 28%,
      rgba(236,211,141,.80) 0 1.7px,
      rgba(212,182,93,.15) 2px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 96.5% 72%,
      rgba(199,210,209,.72) 0 1.7px,
      rgba(199,210,209,.12) 2px 7px,
      transparent 8px
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,.018) 44%,
      rgba(212,182,93,.080) 49%,
      rgba(199,210,209,.028) 54%,
      transparent 61%,
      transparent 100%
    ) !important;
  background-size:
    100% 100%,
    100% 100%,
    235% 100% !important;
  background-position:
    center,
    center,
    130% 0 !important;
  background-repeat: no-repeat !important;

  opacity: .34 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
  transform: none !important;
  animation: acieV4HeaderSweep 16s ease-in-out infinite !important;
}

html body.has_site_logo
header#headerNavigationContainer .pkp_head_wrapper {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes acieV4HeaderPattern {
  from {
    background-position:
      -8px center,
      calc(100% + 8px) center,
      0 0;
  }
  to {
    background-position:
      8px center,
      calc(100% - 8px) center,
      43px 24px;
  }
}

@keyframes acieV4HeaderSweep {
  0%, 18% {
    background-position: center, center, 130% 0;
    opacity: .25;
  }
  50% {
    background-position: center, center, 42% 0;
    opacity: .40;
  }
  82%, 100% {
    background-position: center, center, -30% 0;
    opacity: .25;
  }
}

/* =======================================================
   2. BODY — GARIS PORTAL TEGAS, TANPA BLUR
   ======================================================= */

html body {
  background-color: #eef2f0 !important;
  background-image:
    linear-gradient(
      180deg,
      #fafbf9 0%,
      #f5f7f5 50%,
      #eef2f0 100%
    ) !important;
  background-attachment: scroll !important;
}

/* Pita diagonal bertitik. */
html body::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-color: transparent !important;
  background-image:
    radial-gradient(
      circle,
      rgba(212,182,93,.38) 0 1.55px,
      transparent 1.7px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 92px,
      rgba(15,91,87,.11) 92px 94px,
      transparent 94px 186px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 106px,
      rgba(199,210,209,.33) 106px 108px,
      transparent 108px 214px
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98) 0%,
      rgba(247,248,245,.96) 48%,
      rgba(243,241,232,.92) 100%
    ) !important;
  background-size:
    23px 23px,
    auto,
    auto,
    auto !important;
  background-position:
    0 0,
    center,
    center,
    center !important;
  background-repeat:
    repeat,
    repeat,
    repeat,
    no-repeat !important;

  clip-path: polygon(0 0, 17% 0, 42% 41%, 18% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 0, 17% 0, 42% 41%, 18% 100%, 0 100%) !important;

  opacity: .83 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}

/* Garis batas pita dan aksen diagonal kanan dibuat presisi. */
html body::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-color: transparent !important;
  background-image:
    linear-gradient(
      132deg,
      transparent 0%,
      transparent 27.42%,
      rgba(212,182,93,.92) 27.50%,
      rgba(236,211,141,.96) 27.60%,
      transparent 27.70%,
      transparent 100%
    ),
    linear-gradient(
      132deg,
      transparent 0%,
      transparent 28.93%,
      rgba(15,91,87,.30) 29.02%,
      rgba(199,210,209,.62) 29.12%,
      transparent 29.22%,
      transparent 100%
    ),
    linear-gradient(
      312deg,
      transparent 0%,
      transparent 84.25%,
      rgba(212,182,93,.54) 84.34%,
      rgba(236,211,141,.70) 84.44%,
      transparent 84.55%,
      transparent 100%
    ) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  opacity: .94 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}

/* Hilangkan efek blur lama pada panel konten yang membuat garis kabur. */
html body .pkp_structure_content,
html body .pkp_structure_content.has_sidebar,
html body .pkp_structure_main,
html body .pkp_structure_sidebar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .pkp_structure_page,
html body .pkp_structure_content,
html body .pkp_structure_main,
html body .pkp_structure_sidebar,
html body .pkp_structure_footer_wrapper {
  position: relative !important;
  z-index: 2 !important;
}

html body .pkp_structure_page {
  background: transparent !important;
}

@media (max-width: 900px) {
  html body::before {
    clip-path: polygon(0 0, 23% 0, 56% 37%, 25% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, 23% 0, 56% 37%, 25% 100%, 0 100%) !important;
    opacity: .62 !important;
  }

  html body::after {
    opacity: .72 !important;
  }
}

@media (max-width: 560px) {
  html body::before {
    clip-path: polygon(0 0, 28% 0, 70% 30%, 31% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, 28% 0, 70% 30%, 31% 100%, 0 100%) !important;
    opacity: .46 !important;
  }

  html body::after {
    opacity: .54 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.has_site_logo
  .pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::before,
  html body.has_site_logo
  .pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::after {
    animation: none !important;
  }
}

/* =======================================================
   AICROM UNZAH THEME V1
   AICROM BLUE • SKY • GOLD
   -------------------------------------------------------
   Basis: ACIE UNZAH v4
   Identitas visual:
   - royal navy dan conference blue
   - sky blue sebagai aksen dialog
   - vivid gold dari logo AICROM
   - pola "moderation waves", node dialog, dan open-book lines
   - seluruh ornamen body mengikuti scroll, bukan fixed/sticky
   ======================================================= */

:root {
  /* Palet utama AICROM */
  --aicrom-navy-950: #13375f;
  --aicrom-navy-900: #194777;
  --aicrom-blue-800: #245d92;
  --aicrom-blue-700: #3278b0;
  --aicrom-sky: #2ca7df;
  --aicrom-sky-light: #8bd8f4;
  --aicrom-gold: #f0c62f;
  --aicrom-gold-strong: #ffd31a;
  --aicrom-gold-light: #ffe58a;
  --aicrom-white: #f7f9fc;
  --aicrom-ice: #eef4f8;
  --aicrom-text: #29445f;
  --aicrom-muted: #65798b;
  --aicrom-line: rgba(25, 71, 119, .14);

  /*
   * Pemetaan ulang seluruh variabel lama.
   * Class HTML lama tetap dapat dipakai tanpa perubahan.
   */
  --acie-deeper: var(--aicrom-navy-950);
  --acie-deep: var(--aicrom-navy-900);
  --acie-dark: var(--aicrom-blue-800);
  --acie-mid: var(--aicrom-blue-700);
  --acie-silver: #cbd8e2;
  --acie-silver-light: #edf3f7;
  --acie-gold: var(--aicrom-gold);
  --acie-gold-light: var(--aicrom-gold-light);
  --acie-gold-dark: #a97700;
  --acie-ivory: var(--aicrom-white);
  --acie-cream: #f5f8fa;
  --acie-text: var(--aicrom-text);
  --acie-muted: var(--aicrom-muted);
  --acie-line: var(--aicrom-line);

  --acie-v2-deep: var(--aicrom-navy-900);
  --acie-v2-deeper: var(--aicrom-navy-950);
  --acie-v2-surface: var(--aicrom-blue-700);
  --acie-v2-silver: #cbd8e2;
  --acie-v2-gold: var(--aicrom-gold);

  --acie-v3-teal-950: var(--aicrom-navy-950);
  --acie-v3-teal-900: var(--aicrom-navy-900);
  --acie-v3-teal-800: var(--aicrom-blue-800);
  --acie-v3-teal-700: var(--aicrom-blue-700);
  --acie-v3-slate: #3e6f98;
  --acie-v3-silver: #cbd8e2;
  --acie-v3-gold: var(--aicrom-gold);
  --acie-v3-gold-light: var(--aicrom-gold-light);

  --acie-v4-deep: var(--aicrom-navy-900);
  --acie-v4-mid: var(--aicrom-blue-800);
  --acie-v4-soft: #4385b8;
  --acie-v4-silver: #cbd8e2;
  --acie-v4-gold: var(--aicrom-gold);
  --acie-v4-gold-light: var(--aicrom-gold-light);
  --acie-v4-page: var(--aicrom-ice);

  --aicief-deep: var(--aicrom-navy-950);
  --aicief-dark: var(--aicrom-navy-900);
  --aicief-mid: var(--aicrom-blue-700);
  --aicief-teal-950: var(--aicrom-navy-950);
  --aicief-teal-900: var(--aicrom-navy-900);
  --aicief-teal-800: var(--aicrom-blue-800);
  --aicief-gold: var(--aicrom-gold);
  --aicief-gold-light: var(--aicrom-gold-light);
  --aicief-copper: var(--aicrom-gold);
  --aicief-copper-light: var(--aicrom-gold-light);
  --aicief-ivory: var(--aicrom-white);
  --aicief-muted: var(--aicrom-muted);

  --aicief-nav-deep: var(--aicrom-navy-900);
  --aicief-nav-deeper: var(--aicrom-navy-950);
  --aicief-nav-mid: var(--aicrom-blue-700);
  --aicief-nav-gold: var(--aicrom-gold);
  --aicief-nav-gold-light: var(--aicrom-gold-light);
  --aicief-nav-white: #ffffff;

  --aicief-index-deep: var(--aicrom-navy-950);
  --aicief-index-mid: var(--aicrom-blue-700);
  --aicief-index-gold: var(--aicrom-gold);
  --aicief-index-gold-light: var(--aicrom-gold-light);
  --aicief-index-ivory: var(--aicrom-white);
  --aicief-index-ink: var(--aicrom-text);

  --aicief-detail-deep: var(--aicrom-navy-950);
  --aicief-detail-dark: var(--aicrom-navy-900);
  --aicief-detail-mid: var(--aicrom-blue-700);
  --aicief-detail-gold: var(--aicrom-gold);
  --aicief-detail-gold-light: var(--aicrom-gold-light);
  --aicief-detail-ivory: var(--aicrom-white);
  --aicief-detail-white: #ffffff;
  --aicief-detail-text: var(--aicrom-text);
  --aicief-detail-muted: var(--aicrom-muted);

  --aicief-m12-deep: var(--aicrom-navy-950);
  --aicief-m12-dark: var(--aicrom-navy-900);
  --aicief-m12-mid: var(--aicrom-blue-700);
  --aicief-m12-gold: var(--aicrom-gold);
  --aicief-m12-gold-light: var(--aicrom-gold-light);
  --aicief-m12-cream: var(--aicrom-ice);
  --aicief-m12-text: var(--aicrom-text);

  --aicief-profile-deep: var(--aicrom-navy-950);
  --aicief-profile-mid: var(--aicrom-blue-700);
  --aicief-profile-gold: var(--aicrom-gold);
  --aicief-profile-gold-light: var(--aicrom-gold-light);
  --aicief-profile-text: var(--aicrom-text);

  --aicief-profile16-deep: var(--aicrom-navy-950);
  --aicief-profile16-mid: var(--aicrom-blue-700);
  --aicief-profile16-gold: var(--aicrom-gold);
  --aicief-profile16-gold-light: var(--aicrom-gold-light);
  --aicief-profile16-text: var(--aicrom-text);
  --aicief-profile16-muted: var(--aicrom-muted);

  --aicief-body-bg-top: #f8fbfd;
  --aicief-body-bg-bottom: var(--aicrom-ice);
  --aicief-body-teal: var(--aicrom-blue-700);
  --aicief-body-teal-deep: var(--aicrom-navy-900);
  --aicief-body-copper: var(--aicrom-gold);
  --aicief-body-copper-light: var(--aicrom-gold-light);
}

/* =======================================================
   1. HEADER AICROM
   ======================================================= */

html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer.pkp_structure_head {
  isolation: isolate !important;
  overflow: visible !important;

  background-color: var(--aicrom-navy-900) !important;
  background-image:
    radial-gradient(
      ellipse at 8% 42%,
      rgba(255, 211, 26, .15) 0%,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 92% 56%,
      rgba(44, 167, 223, .20) 0%,
      transparent 35%
    ),
    linear-gradient(
      112deg,
      var(--aicrom-navy-950) 0%,
      var(--aicrom-blue-800) 49%,
      #4388bd 100%
    ) !important;

  border-top: 3px solid var(--aicrom-gold) !important;
  box-shadow:
    inset 0 -30px 52px rgba(10, 38, 71, .18),
    0 9px 25px rgba(19, 55, 95, .18) !important;
}

/* Reset seluruh bidang internal agar tidak membawa warna tema lama. */
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
.pkp_head_wrapper,
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
.pkp_site_name_wrapper,
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
.pkp_site_name,
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
.pkp_site_nav_menu,
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
.pkp_navigation_primary_row,
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
.pkp_navigation_primary_wrapper,
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
#navigationUserWrapper {
  background-color: transparent !important;
  background-image: none !important;
}

/*
 * Layer "moderation waves":
 * dua kelompok gelombang dari kiri dan kanan melambangkan
 * dialog, keseimbangan, dan titik temu.
 */
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    repeating-radial-gradient(
      ellipse at -3% 52%,
      transparent 0 34px,
      rgba(255,255,255,.065) 35px 37px,
      transparent 38px 65px,
      rgba(255, 211, 26, .055) 66px 68px,
      transparent 69px 98px
    ),
    repeating-radial-gradient(
      ellipse at 103% 48%,
      transparent 0 38px,
      rgba(255,255,255,.055) 39px 41px,
      transparent 42px 72px,
      rgba(44, 167, 223, .07) 73px 75px,
      transparent 76px 108px
    ),
    repeating-linear-gradient(
      118deg,
      transparent 0 88px,
      rgba(255,255,255,.025) 89px 90px,
      transparent 91px 177px
    ),
    radial-gradient(
      circle,
      rgba(255, 211, 26, .14) 0 1.25px,
      transparent 1.9px
    ) !important;

  background-size:
    410px 300px,
    440px 320px,
    auto,
    96px 96px !important;

  background-position:
    -34px center,
    calc(100% + 36px) center,
    center,
    0 0 !important;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    repeat !important;

  opacity: .55 !important;
  filter: none !important;
  transform: translate3d(0,0,0) !important;

  animation:
    aicromHeaderWaves 22s ease-in-out infinite alternate !important;
}

/*
 * Layer "dialogue orbit":
 * pasangan gold–sky bergerak saling mendekat lalu menjauh.
 */
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      circle at 6% 27%,
      rgba(255,255,255,.92) 0 1.5px,
      rgba(255,211,26,.80) 2px 3.7px,
      rgba(255,211,26,.14) 4px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 94% 72%,
      rgba(255,255,255,.90) 0 1.5px,
      rgba(44,167,223,.82) 2px 3.7px,
      rgba(44,167,223,.15) 4px 9px,
      transparent 10px
    ),
    linear-gradient(
      104deg,
      transparent 0%,
      transparent 36%,
      rgba(255,211,26,.00) 40%,
      rgba(255,211,26,.13) 47%,
      rgba(255,255,255,.055) 50%,
      rgba(44,167,223,.13) 53%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.026) 49.6%,
      rgba(255,211,26,.12) 49.8%,
      rgba(44,167,223,.12) 50.2%,
      rgba(255,255,255,.026) 50.4%,
      transparent 100%
    ) !important;

  background-size:
    100% 100%,
    100% 100%,
    240% 100%,
    100% 100% !important;

  background-position:
    center,
    center,
    135% 0,
    center !important;

  background-repeat: no-repeat !important;

  opacity: .56 !important;
  filter: none !important;
  will-change: background-position, opacity;

  animation:
    aicromDialogueSweep 13s ease-in-out infinite !important;
}

@keyframes aicromHeaderWaves {
  0% {
    background-position:
      -48px center,
      calc(100% + 50px) center,
      center,
      0 0;
    opacity: .43;
  }

  100% {
    background-position:
      -20px center,
      calc(100% + 20px) center,
      center,
      48px 24px;
    opacity: .62;
  }
}

@keyframes aicromDialogueSweep {
  0%, 14% {
    background-position:
      center,
      center,
      135% 0,
      center;
    opacity: .40;
  }

  50% {
    background-position:
      center,
      center,
      42% 0,
      center;
    opacity: .66;
  }

  86%, 100% {
    background-position:
      center,
      center,
      -35% 0,
      center;
    opacity: .40;
  }
}

/* Banner frame */
html body.has_site_logo
.pkp_structure_page > header#headerNavigationContainer
.pkp_site_name a.is_img {
  border-color: rgba(255, 211, 26, .58) !important;
  background: rgba(13, 47, 85, .22) !important;
  box-shadow:
    0 12px 29px rgba(8, 34, 66, .24),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* =======================================================
   2. NAVIGATION, DROPDOWN, DAN SEARCH
   ======================================================= */

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > span,
#navigationUserWrapper > ul > li > a,
#navigationUser > li > a {
  color: rgba(255,255,255,.98) !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > span:hover,
.pkp_navigation_primary > li > span:focus,
#navigationUserWrapper > ul > li > a:hover,
#navigationUserWrapper > ul > li > a:focus,
#navigationUser > li > a:hover,
#navigationUser > li > a:focus {
  color: var(--aicrom-gold-light) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow:
    0 2px 5px rgba(8,34,66,.42),
    0 0 12px rgba(255,211,26,.16) !important;
}

.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary > li > ul,
.pkp_navigation_primary li ul,
.pkp_navigation_user .dropdown-menu,
#navigationUser li ul {
  background:
    linear-gradient(
      145deg,
      rgba(19,55,95,.992) 0%,
      rgba(25,71,119,.992) 100%
    ) !important;

  border-color: rgba(240,198,47,.54) !important;

  box-shadow:
    0 18px 40px rgba(8,34,66,.40),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary li ul a:hover,
.pkp_navigation_primary li ul a:focus,
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user .dropdown-menu a:focus,
#navigationUser li ul a:hover,
#navigationUser li ul a:focus {
  color: var(--aicrom-gold-light) !important;
  background: transparent !important;
}

.pkp_search,
.pkp_search_desktop,
.pkp_site_nav_menu .pkp_search {
  color: var(--aicrom-navy-950) !important;
  border-color: rgba(255,255,255,.20) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-gold-light),
      var(--aicrom-gold)
    ) !important;

  box-shadow:
    0 8px 18px rgba(8,34,66,.20),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

/* =======================================================
   3. BODY AICROM — BALANCED DIALOGUE FIELD
   ======================================================= */

html {
  background: #eaf1f7 !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;

  background-color: #eaf1f7 !important;
  background-image:
    radial-gradient(
      ellipse at 11% 9%,
      rgba(255,211,26,.11) 0%,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 89% 17%,
      rgba(44,167,223,.12) 0%,
      transparent 34%
    ),
    radial-gradient(
      ellipse at 15% 86%,
      rgba(36,93,146,.07) 0%,
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #f9fbfd 0%,
      #f1f6fa 48%,
      #eaf1f7 100%
    ) !important;

  background-attachment: scroll !important;
}

/*
 * Layer A: dua kelompok busur dialog dari sisi kiri dan kanan.
 * Tidak memakai pita diagonal Portal/ACIE.
 */
html body::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    repeating-radial-gradient(
      ellipse at -7% 17%,
      transparent 0 62px,
      rgba(240,198,47,.18) 63px 65px,
      transparent 66px 94px,
      rgba(25,71,119,.055) 95px 97px,
      transparent 98px 130px
    ),
    repeating-radial-gradient(
      ellipse at 107% 48%,
      transparent 0 70px,
      rgba(44,167,223,.16) 71px 73px,
      transparent 74px 105px,
      rgba(25,71,119,.055) 106px 108px,
      transparent 109px 144px
    ),
    repeating-radial-gradient(
      ellipse at -5% 82%,
      transparent 0 78px,
      rgba(36,93,146,.10) 79px 81px,
      transparent 82px 116px,
      rgba(240,198,47,.13) 117px 119px,
      transparent 120px 158px
    ),
    radial-gradient(
      circle,
      rgba(25,71,119,.12) 0 1px,
      transparent 1.55px
    ) !important;

  background-size:
    540px 470px,
    590px 500px,
    570px 500px,
    30px 30px !important;

  background-position:
    -105px 4%,
    calc(100% + 125px) 40%,
    -120px 94%,
    0 0 !important;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat !important;

  opacity: .78 !important;
  filter: none !important;
  transform: none !important;
  will-change: background-position;

  animation:
    aicromBodyWaves 32s ease-in-out infinite alternate !important;
}

/*
 * Layer B: open-book chevrons, garis keseimbangan, dan node.
 * Garis dibuat tegas, tanpa blur atau drop-shadow.
 */
html body::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    /* open-book chevrons kiri */
    repeating-linear-gradient(
      38deg,
      transparent 0 92px,
      rgba(240,198,47,.10) 93px 95px,
      transparent 96px 184px
    ),
    repeating-linear-gradient(
      -38deg,
      transparent 0 92px,
      rgba(25,71,119,.065) 93px 95px,
      transparent 96px 184px
    ),

    /* garis gold dan sky yang bertemu di tengah */
    linear-gradient(
      128deg,
      transparent 0%,
      transparent 24.8%,
      rgba(240,198,47,.30) 24.95%,
      rgba(255,211,26,.55) 25.06%,
      transparent 25.20%,
      transparent 100%
    ),
    linear-gradient(
      232deg,
      transparent 0%,
      transparent 76.0%,
      rgba(44,167,223,.28) 76.14%,
      rgba(139,216,244,.52) 76.25%,
      transparent 76.40%,
      transparent 100%
    ),

    /* moderation nodes */
    radial-gradient(
      circle at 7% 31%,
      rgba(255,255,255,.95) 0 1.4px,
      rgba(240,198,47,.76) 2px 3.6px,
      rgba(240,198,47,.11) 4px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 93% 36%,
      rgba(255,255,255,.95) 0 1.4px,
      rgba(44,167,223,.76) 2px 3.6px,
      rgba(44,167,223,.11) 4px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 16% 74%,
      rgba(255,255,255,.94) 0 1.4px,
      rgba(36,93,146,.68) 2px 3.5px,
      rgba(36,93,146,.10) 4px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 84% 83%,
      rgba(255,255,255,.94) 0 1.4px,
      rgba(240,198,47,.68) 2px 3.5px,
      rgba(240,198,47,.10) 4px 8px,
      transparent 9px
    ) !important;

  background-size:
    auto,
    auto,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100% !important;

  background-position:
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center !important;

  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat !important;

  opacity: .66 !important;
  filter: none !important;
  transform: none !important;
  will-change: background-position, opacity;

  animation:
    aicromBodyDialogue 26s ease-in-out infinite alternate !important;
}

@keyframes aicromBodyWaves {
  0% {
    background-position:
      -118px 3%,
      calc(100% + 138px) 39%,
      -132px 95%,
      0 0;
  }

  100% {
    background-position:
      -82px 6%,
      calc(100% + 100px) 44%,
      -96px 90%,
      15px 15px;
  }
}

@keyframes aicromBodyDialogue {
  0% {
    background-position:
      0 0,
      0 0,
      center,
      center,
      center,
      center,
      center,
      center;
    opacity: .52;
  }

  100% {
    background-position:
      28px 18px,
      -28px 18px,
      center,
      center,
      center,
      center,
      center,
      center;
    opacity: .73;
  }
}

/* Seluruh struktur OJS berada di atas ornamen. */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer_wrapper {
  position: relative !important;
  z-index: 2 !important;
}

.pkp_structure_page {
  background: transparent !important;
}

@media (min-width: 901px) {
  .pkp_structure_content.has_sidebar {
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.87) 0%,
        rgba(245,249,252,.82) 100%
      ) !important;

    border-color: rgba(25,71,119,.12) !important;

    box-shadow:
      0 20px 44px rgba(19,55,95,.11),
      inset 0 1px 0 rgba(255,255,255,.94) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =======================================================
   4. SIDEBAR, CONTENT, ARTICLE, DAN PROFILE
   ======================================================= */

.sakinah-sidebar-card > .sakinah-sidebar-title:first-child,
.sakinah-sidebar-title:first-child {
  color: var(--aicrom-gold-light) !important;
  border-color: rgba(240,198,47,.48) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-navy-950) 0%,
      var(--aicrom-blue-800) 100%
    ) !important;

  box-shadow:
    0 7px 17px rgba(19,55,95,.18),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.sakinah-sidebar-card > .sakinah-sidebar-title:first-child::before,
.sakinah-sidebar-title:first-child::before {
  color: var(--aicrom-navy-950) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-gold-light),
      var(--aicrom-gold)
    ) !important;
}

.sakinah-info-menu .sakinah-sidebar-menu a,
.sakinah-info-menu .sakinah-sidebar-menu a:visited,
.pkp_structure_main a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit),
.pkp_structure_main a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit):visited {
  color: var(--aicrom-navy-900) !important;
}

.sakinah-info-menu .sakinah-sidebar-menu a:hover,
.sakinah-info-menu .sakinah-sidebar-menu a:focus,
.pkp_structure_main a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit):hover,
.pkp_structure_main a:not(.obj_galley_link):not(.btn-submit):not(.aicief-journal-profile__submit):focus {
  color: #a97700 !important;
}

.cmp_breadcrumbs a,
.cmp_breadcrumbs a:visited,
.obj_article_summary .title a,
.obj_article_summary .title a:visited,
.obj_issue_summary a.title,
.obj_issue_summary a.title:visited {
  color: var(--aicrom-navy-900) !important;
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus,
.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus,
.obj_issue_summary a.title:hover,
.obj_issue_summary a.title:focus {
  color: #a97700 !important;
}

.page_index_journal .current_issue .obj_article_summary,
body.pkp_page_issue .page_issue .obj_article_summary,
body.pkp_page_issue.pkp_op_archive .obj_issue_summary {
  border-left-color: var(--aicrom-gold) !important;
  border-color: rgba(25,71,119,.15) !important;

  background:
    radial-gradient(
      circle at 96% 12%,
      rgba(44,167,223,.085) 0%,
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99) 0%,
      rgba(241,247,251,.95) 100%
    ) !important;

  box-shadow:
    0 9px 22px rgba(19,55,95,.085),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.obj_galley_link.pdf,
.page_index_journal .current_issue .obj_galley_link.pdf,
body.pkp_page_issue .page_issue .obj_galley_link.pdf,
body.pkp_page_article .entry_details .obj_galley_link.pdf {
  color: var(--aicrom-gold-light) !important;
  border-color: rgba(240,198,47,.64) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-navy-950),
      var(--aicrom-blue-800)
    ) !important;
}

.obj_galley_link.pdf:hover,
.obj_galley_link.pdf:focus,
.page_index_journal .current_issue .obj_galley_link.pdf:hover,
.page_index_journal .current_issue .obj_galley_link.pdf:focus,
body.pkp_page_issue .page_issue .obj_galley_link.pdf:hover,
body.pkp_page_issue .page_issue .obj_galley_link.pdf:focus,
body.pkp_page_article .entry_details .obj_galley_link.pdf:hover,
body.pkp_page_article .entry_details .obj_galley_link.pdf:focus {
  color: var(--aicrom-navy-950) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-gold-light),
      var(--aicrom-gold)
    ) !important;
}

.page_index_journal .current_issue .sections .section > h3,
body.pkp_page_issue .page_issue .obj_issue_toc .sections .section > h2,
.page_index_journal .page_about > p:has(+ table) strong,
.page_index_journal .page_about > p:nth-of-type(2) strong {
  color: var(--aicrom-navy-950) !important;
  border-color: rgba(240,198,47,.72) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-gold-light),
      var(--aicrom-gold)
    ) !important;
}

.aicief-journal-profile__inner {
  border-color: rgba(25,71,119,.16) !important;
  border-top-color: var(--aicrom-gold) !important;

  background:
    radial-gradient(
      circle at 96% 5%,
      rgba(44,167,223,.10) 0%,
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99) 0%,
      rgba(240,246,251,.96) 100%
    ) !important;
}

.aicief-journal-profile__cover {
  border-color: rgba(240,198,47,.35) !important;
  background:
    linear-gradient(
      145deg,
      var(--aicrom-navy-950),
      var(--aicrom-blue-800)
    ) !important;
}

.aicief-journal-profile__title,
.aicief-journal-profile__meta dt {
  color: var(--aicrom-navy-900) !important;
}

.aicief-journal-profile__meta dd {
  color: var(--aicrom-text) !important;
}

.aicief-journal-profile__submit,
.aicief-journal-profile__submit:visited {
  color: var(--aicrom-gold-light) !important;
  border-color: rgba(240,198,47,.62) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-navy-950),
      var(--aicrom-blue-800)
    ) !important;
}

.aicief-journal-profile__submit:hover,
.aicief-journal-profile__submit:focus {
  color: var(--aicrom-navy-950) !important;
  background:
    linear-gradient(
      135deg,
      var(--aicrom-gold-light),
      var(--aicrom-gold)
    ) !important;
}

/* =======================================================
   5. FOOTER AICROM
   ======================================================= */

html body .pkp_structure_footer_wrapper,
html body .pkp_structure_footer {
  position: relative !important;
  overflow: hidden !important;

  color: #f5f8fb !important;
  border-top: 3px solid var(--aicrom-gold) !important;

  background:
    radial-gradient(
      ellipse at 9% 25%,
      rgba(255,211,26,.13) 0%,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 91% 74%,
      rgba(44,167,223,.17) 0%,
      transparent 35%
    ),
    linear-gradient(
      112deg,
      var(--aicrom-navy-950) 0%,
      var(--aicrom-blue-800) 52%,
      #3e82b6 100%
    ) !important;

  box-shadow:
    inset 0 25px 45px rgba(8,34,66,.14),
    0 -9px 26px rgba(19,55,95,.18) !important;
}

html body .pkp_structure_footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    repeating-radial-gradient(
      ellipse at -3% 50%,
      transparent 0 34px,
      rgba(255,255,255,.055) 35px 37px,
      transparent 38px 66px,
      rgba(255,211,26,.05) 67px 69px,
      transparent 70px 100px
    ),
    repeating-radial-gradient(
      ellipse at 103% 50%,
      transparent 0 38px,
      rgba(255,255,255,.05) 39px 41px,
      transparent 42px 73px,
      rgba(44,167,223,.06) 74px 76px,
      transparent 77px 110px
    ),
    radial-gradient(
      circle,
      rgba(255,211,26,.10) 0 1.2px,
      transparent 1.85px
    ) !important;

  background-size:
    390px 300px,
    430px 320px,
    100px 100px !important;

  background-position:
    -30px center,
    calc(100% + 30px) center,
    0 0 !important;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;

  opacity: .42 !important;
}

html body .pkp_structure_footer::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,229,138,.90),
      transparent
    ) !important;
}

html body .pkp_footer_content,
html body .pkp_footer_content p,
html body .pkp_footer_content li,
html body .pkp_footer_content span,
html body .pkp_footer_content strong {
  color: rgba(245,248,251,.95) !important;
}

html body .pkp_footer_content h1,
html body .pkp_footer_content h2,
html body .pkp_footer_content h3,
html body .pkp_footer_content h4,
html body .pkp_footer_content a,
html body .pkp_footer_content a:visited,
html body .sakinah-footer-content h3,
html body .sakinah-footer-content a,
html body .sakinah-footer-content a:visited {
  color: var(--aicrom-gold-light) !important;
}

html body .pkp_footer_content a:hover,
html body .pkp_footer_content a:focus,
html body .sakinah-footer-content a:hover,
html body .sakinah-footer-content a:focus {
  color: #ffffff !important;
}

/* =======================================================
   6. MOBILE
   ======================================================= */

@media (max-width: 991px) {
  nav.pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(44,167,223,.15) 0%,
        transparent 34%
      ),
      linear-gradient(
        180deg,
        rgba(19,55,95,.995) 0%,
        rgba(25,71,119,.995) 100%
      ) !important;

    border-color: rgba(240,198,47,.48) !important;
  }

  .pkp_site_nav_toggle {
    color: var(--aicrom-navy-950) !important;
    border-color: rgba(19,55,95,.30) !important;
    background:
      linear-gradient(
        135deg,
        var(--aicrom-gold-light),
        var(--aicrom-gold)
      ) !important;
  }

  html body::before {
    opacity: .56 !important;
    background-size:
      440px 410px,
      470px 430px,
      450px 420px,
      34px 34px !important;
  }

  html body::after {
    opacity: .48 !important;
  }
}

@media (max-width: 560px) {
  html body::before {
    opacity: .39 !important;
  }

  html body::after {
    opacity: .34 !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  html body.has_site_logo
  .pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::before,
  html body.has_site_logo
  .pkp_structure_page > header#headerNavigationContainer.pkp_structure_head::after,
  html body::before,
  html body::after {
    animation: none !important;
  }
}

/* =======================================================
   AICROM UNZAH THEME V2
   PORTAL-INSPIRED BODY ACCENT
   -------------------------------------------------------
   - Meniru karakter aksen Portal UNZAH yang lebih tenang
   - Satu bidang diagonal bermotif titik
   - Garis gold dan sky blue dibuat tajam
   - Tanpa gelombang besar, node ramai, blur, atau animasi
   - Ornamen mengikuti scroll karena position:absolute
   ======================================================= */

:root {
  --aicrom-body-navy: #194777;
  --aicrom-body-blue: #3278b0;
  --aicrom-body-sky: #2ca7df;
  --aicrom-body-gold: #f0c62f;
  --aicrom-body-gold-soft: #ffe58a;
  --aicrom-body-ice: #eef4f8;
  --aicrom-body-white: #fbfcfd;
}

/* Kanvas utama dibuat bersih seperti portal */
html {
  background: var(--aicrom-body-ice) !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;

  background-color: var(--aicrom-body-ice) !important;
  background-image:
    linear-gradient(
      180deg,
      #fbfcfd 0%,
      #f5f9fc 48%,
      #eef4f8 100%
    ) !important;

  background-attachment: scroll !important;
}

/*
 * Reset total aksen AICROM v1 yang terlalu ramai.
 * Diganti satu panel diagonal bertitik seperti Portal UNZAH.
 */
html body::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      circle,
      rgba(240, 198, 47, .30) 0 1.45px,
      transparent 2px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 102px,
      rgba(25, 71, 119, .060) 103px 105px,
      transparent 106px 205px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 112px,
      rgba(44, 167, 223, .065) 113px 115px,
      transparent 116px 225px
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98) 0%,
      rgba(247,250,252,.96) 56%,
      rgba(238,244,248,.90) 100%
    ) !important;

  background-size:
    24px 24px,
    auto,
    auto,
    auto !important;

  background-position:
    0 0,
    center,
    center,
    center !important;

  background-repeat:
    repeat,
    repeat,
    repeat,
    no-repeat !important;

  /* Bentuk pita Portal: lebar di kiri, menyilang ke tengah */
  clip-path:
    polygon(
      0 0,
      18% 0,
      43% 39%,
      19% 100%,
      0 100%
    ) !important;

  -webkit-clip-path:
    polygon(
      0 0,
      18% 0,
      43% 39%,
      19% 100%,
      0 100%
    ) !important;

  opacity: .76 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/*
 * Garis tegas pada tepi pita dan satu aksen diagonal kanan.
 * Tidak memakai blur atau drop-shadow.
 */
html body::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    /* garis emas utama */
    linear-gradient(
      132deg,
      transparent 0%,
      transparent 27.35%,
      rgba(240,198,47,.64) 27.48%,
      rgba(255,229,138,.94) 27.59%,
      transparent 27.73%,
      transparent 100%
    ),

    /* garis sky blue pendamping */
    linear-gradient(
      132deg,
      transparent 0%,
      transparent 29.10%,
      rgba(44,167,223,.52) 29.22%,
      rgba(139,216,244,.82) 29.34%,
      transparent 29.48%,
      transparent 100%
    ),

    /* satu garis diagonal kanan bawah */
    linear-gradient(
      312deg,
      transparent 0%,
      transparent 86.0%,
      rgba(25,71,119,.18) 86.13%,
      rgba(44,167,223,.42) 86.25%,
      transparent 86.40%,
      transparent 100%
    ),

    /* cahaya biru yang sangat lembut di kanan */
    radial-gradient(
      ellipse at 92% 18%,
      rgba(44,167,223,.075) 0%,
      transparent 34%
    ),
    radial-gradient(
      ellipse at 91% 85%,
      rgba(240,198,47,.055) 0%,
      transparent 36%
    ) !important;

  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;

  opacity: .90 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Pastikan struktur halaman tetap di atas ornamen */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer_wrapper {
  position: relative !important;
  z-index: 2 !important;
}

.pkp_structure_page {
  background: transparent !important;
}

/* Panel konten tanpa blur agar garis background tetap tegas */
@media (min-width: 901px) {
  .pkp_structure_content.has_sidebar {
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.90) 0%,
        rgba(246,250,252,.85) 100%
      ) !important;

    border-color: rgba(25,71,119,.11) !important;

    box-shadow:
      0 20px 44px rgba(19,55,95,.10),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Tablet */
@media (max-width: 900px) {
  html body::before {
    clip-path:
      polygon(
        0 0,
        24% 0,
        57% 37%,
        26% 100%,
        0 100%
      ) !important;

    -webkit-clip-path:
      polygon(
        0 0,
        24% 0,
        57% 37%,
        26% 100%,
        0 100%
      ) !important;

    background-size:
      28px 28px,
      auto,
      auto,
      auto !important;

    opacity: .56 !important;
  }

  html body::after {
    opacity: .63 !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  html body::before {
    clip-path:
      polygon(
        0 0,
        29% 0,
        70% 31%,
        32% 100%,
        0 100%
      ) !important;

    -webkit-clip-path:
      polygon(
        0 0,
        29% 0,
        70% 31%,
        32% 100%,
        0 100%
      ) !important;

    opacity: .38 !important;
  }

  html body::after {
    opacity: .40 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body::before,
  html body::after {
    animation: none !important;
    transform: none !important;
  }
}

/* =======================================================
   AICROM UNZAH THEME V3
   LUXURY MINIMAL BODY
   -------------------------------------------------------
   - Menghapus aksen body yang terlalu ramai
   - Menghapus garis diagonal biru dan kuning
   - Tanpa animasi, blur, glow, node, atau orbit
   - Menyisakan satu bidang ivory diagonal yang sangat halus
   - Pola titik emas dibuat jarang dan samar
   - Seluruh ornamen mengikuti scroll
   ======================================================= */

:root {
  --aicrom-v3-page-top: #fbfcfd;
  --aicrom-v3-page-mid: #f5f8fa;
  --aicrom-v3-page-bottom: #edf3f7;
  --aicrom-v3-ivory: #f7f5ee;
  --aicrom-v3-gold-soft: rgba(240, 198, 47, .18);
  --aicrom-v3-line-soft: rgba(25, 71, 119, .035);
}

/* Kanvas body yang bersih */
html {
  background: var(--aicrom-v3-page-bottom) !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;

  background-color: var(--aicrom-v3-page-bottom) !important;
  background-image:
    linear-gradient(
      180deg,
      var(--aicrom-v3-page-top) 0%,
      var(--aicrom-v3-page-mid) 52%,
      var(--aicrom-v3-page-bottom) 100%
    ) !important;

  background-attachment: scroll !important;
}

/*
 * Satu aksen Portal-style yang sangat tenang:
 * bidang ivory diagonal dengan titik emas jarang.
 */
html body::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      circle,
      var(--aicrom-v3-gold-soft) 0 1.15px,
      transparent 1.75px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 150px,
      var(--aicrom-v3-line-soft) 151px 152px,
      transparent 153px 300px
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98) 0%,
      rgba(247,245,238,.92) 100%
    ) !important;

  background-size:
    34px 34px,
    auto,
    auto !important;

  background-position:
    0 0,
    center,
    center !important;

  background-repeat:
    repeat,
    repeat,
    no-repeat !important;

  clip-path:
    polygon(
      0 0,
      14% 0,
      34% 40%,
      15% 100%,
      0 100%
    ) !important;

  -webkit-clip-path:
    polygon(
      0 0,
      14% 0,
      34% 40%,
      15% 100%,
      0 100%
    ) !important;

  opacity: .42 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Hapus seluruh lapisan aksen tambahan */
html body::after {
  display: none !important;
  content: none !important;

  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

/* Seluruh struktur OJS tetap di atas background */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer_wrapper {
  position: relative !important;
  z-index: 2 !important;
}

.pkp_structure_page {
  background: transparent !important;
}

/* Konten tetap bersih, tanpa glass blur */
@media (min-width: 901px) {
  .pkp_structure_content.has_sidebar {
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.94) 0%,
        rgba(248,250,252,.90) 100%
      ) !important;

    border-color: rgba(25,71,119,.09) !important;

    box-shadow:
      0 18px 38px rgba(19,55,95,.085),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Tablet */
@media (max-width: 900px) {
  html body::before {
    clip-path:
      polygon(
        0 0,
        19% 0,
        44% 38%,
        20% 100%,
        0 100%
      ) !important;

    -webkit-clip-path:
      polygon(
        0 0,
        19% 0,
        44% 38%,
        20% 100%,
        0 100%
      ) !important;

    background-size:
      40px 40px,
      auto,
      auto !important;

    opacity: .29 !important;
  }
}

/* Mobile: aksen dibuat hampir tidak terlihat */
@media (max-width: 560px) {
  html body::before {
    clip-path:
      polygon(
        0 0,
        23% 0,
        53% 32%,
        24% 100%,
        0 100%
      ) !important;

    -webkit-clip-path:
      polygon(
        0 0,
        23% 0,
        53% 32%,
        24% 100%,
        0 100%
      ) !important;

    opacity: .18 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body::before,
  html body::after {
    animation: none !important;
    transform: none !important;
  }
}