/* ==========================================
   1. PENGATURAN WARNA LATAR (BACKGROUND)
========================================== */
html, body {
    background-color: #f8f5e2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head {
    background-color: transparent !important; 
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important; 
    position: relative; 
}

.pkp_structure_main {
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05); 
}

/* ==========================================
   2. PENGATURAN HEADER & BANNER FULL-WIDTH
========================================== */
.pkp_head_wrapper {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important; 
    width: 100% !important;
    display: block !important;
}

.pkp_site_name_wrapper, 
.pkp_site_name {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img img {
    content: url('https://journal.denashurya.com/public/journals/11/pageHeaderLogoImage_en.jpg?v=999') !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important; 
    object-fit: cover !important; 
    display: block !important;
    margin: 0 !important;
}

/* ==========================================
   3. PENGATURAN MENU REGISTER & LOGIN
========================================== */
.pkp_navigation_user_wrapper {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 99;
}

.pkp_navigation_user li a {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 6px 14px;
    border-radius: 4px;
    color: #000 !important;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

/* ==========================================
   4. EFEK HOVER & ANIMASI
========================================== */
.qm-hover { transition: all 0.3s ease-in-out !important; }
.qm-hover:hover {
  background-color: #F3E8F4 !important;
  padding-left: 24px !important; 
}
.qm-hover:hover .qm-icon-box {
  background-color: #FFC72C !important; 
  transform: rotate(10deg) scale(1.1); 
  transition: all 0.3s ease;
}

.btn-hover { transition: all 0.3s ease-in-out !important; }
.btn-hover:hover {
  transform: translateY(-4px) !important; 
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
  filter: brightness(1.08) !important; 
}

.tool-hover { transition: transform 0.3s ease, border-color 0.3s ease !important; }
.tool-hover:hover {
  transform: scale(1.05) !important; 
  border-color: #FFC72C !important; 
}

.ast-index-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.75; 
  filter: grayscale(15%); 
}
.ast-index-img {
  height: auto;
  max-height: 28px; 
  width: auto;
  max-width: 75px; 
  object-fit: contain;
}
.ast-index-link:hover {
  opacity: 1 !important; 
  filter: grayscale(0%) !important; 
  transform: scale(1.12); 
}
.ast-index-link:active { transform: scale(0.94); }

.ast-template-row:hover {
  background-color: #1a592b !important; 
  border-left-color: #00c2ad !important; 
  transform: translateY(-2px); 
  box-shadow: 0 4px 10px rgba(0, 168, 150, 0.25); 
}
.ast-template-row:hover .ast-template-icon { transform: scale(1.15); }
.ast-template-row:active {
  transform: scale(0.97) translateY(-2px) !important; 
  background-color: #0f361a !important;
}

.ast-tool-link {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.85;
}
.ast-tool-link:hover {
  opacity: 1 !important;
  background-color: #ffffff !important;
  border-color: #00a896 !important; 
  box-shadow: 0 4px 10px rgba(0, 168, 150, 0.15); 
  transform: translateY(-2px); 
}
.ast-tool-link:active { transform: scale(0.95) translateY(-2px); }

.ast-stat-box { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.ast-stat-box:hover {
  background-color: #ffffff !important;
  border-color: #00a896 !important; 
  box-shadow: 0 4px 10px rgba(0, 168, 150, 0.15); 
  transform: translateY(-2px); 
}
.ast-stat-box img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ==========================================
   5. TATA LETAK DESKTOP (LAYAR LEBAR)
========================================== */
@media (min-width: 992px) {
    .page_index_journal {
        display: grid;
        grid-template-columns: 64% 36%; 
        column-gap: 35px;
        row-gap: 25px;
        align-items: start;
    }

    .homepage_image {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin-top: 14px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .homepage_image img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px;
        box-shadow: 0 10px 25px rgba(20, 69, 33, 0.12);
        transition: transform 0.4s ease;
    }
    
    .homepage_image img:hover {
        transform: scale(1.02);
    }

    .journal_description, 
    .about_journal, 
    .homepage_about,
    .journal-description,
    .obj_journal_description {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        text-align: justify !important;
        padding-top: 5px;
        padding-right: 28px !important; 
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    .page_index_journal > :not(.homepage_image):not(.journal_description):not(.about_journal):not(.homepage_about):not(.journal-description):not(.obj_journal_description) {
        grid-column: 1 / span 2 !important;
        grid-row: auto !important;
        margin-top: 30px;
    }
}

/* ==========================================
   6. TATA LETAK MOBILE (SMARTPHONE & TABLET)
========================================== */
@media (max-width: 991px) {
    .page_index_journal {
        display: flex;
        flex-direction: column-reverse; /* Mengatur teks di bawah gambar */
        gap: 20px;
    }
    
    .homepage_image {
        margin-top: 0 !important;
        width: 100% !important;
    }
    
    .homepage_image img {
        width: 100% !important;
        max-width: 350px; /* Gambar tidak akan melebar raksasa di HP */
        margin: 0 auto;
        display: block;
        border-radius: 6px;
        box-shadow: 0 5px 15px rgba(20, 69, 33, 0.1);
    }
    
    .journal_description, 
    .about_journal, 
    .homepage_about,
    .journal-description,
    .obj_journal_description {
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        text-align: justify;
    }
}