/* ============================================================
   CATALOG PORTAL THEME — OJS 3.3.x  v1.8
   - Deskripsi thumbnail disembunyikan
   - Background & header islami (ornamen geometrik)
   - Animasi keren: shimmer, float, stagger, glow
   ============================================================ */

/* ============================================================
   GLOBAL MINIMAL
   ============================================================ */
.cmp_skip_to_content {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important;
}
.cmp_skip_to_content a:focus {
    position: fixed !important; top: 8px !important; left: 8px !important;
    width: auto !important; height: auto !important; clip: auto !important;
    z-index: 9999 !important; padding: 7px 14px !important; border-radius: 6px !important;
    background: #4a7c2f !important; color: #fff !important;
}
.pkp_screen_reader {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
}
#poweredBy, .pkp_brand_footer { display: none !important; }

/* ============================================================
   VARIABEL
   ============================================================ */
.page_index_site {
    --cp-primary:      #2e7d4f;
    --cp-primary-dk:   #1a5435;
    --cp-primary-lt:   #48a86e;
    --cp-primary-glow: rgba(46,125,79,0.35);
    --cp-gold:         #c9a84c;
    --cp-gold-lt:      #e8c96e;
    --cp-accent:       #edf7f1;
    --cp-text:         #1a1a1a;
    --cp-muted:        #5a6b5e;
    --cp-border:       #c8dfd0;
    --cp-white:        #ffffff;
    --cp-shadow:       0 4px 18px rgba(0,0,0,.12);
    --cp-shadow-up:    0 16px 40px rgba(46,125,79,.28);
    --cp-radius:       12px;
    --cp-font:         'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --cp-font-serif:   Georgia, 'Times New Roman', serif;
}

/* ============================================================
   ANIMASI KEYFRAMES
   ============================================================ */

/* Kartu muncul dari bawah */
@keyframes cp-rise {
    from { opacity: 0; transform: translateY(32px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ornamen berputar pelan */
@keyframes cp-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes cp-spin-rev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Shimmer — kilap emas bergerak di header */
@keyframes cp-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

/* Glow berdenyut di ornamen */
@keyframes cp-pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 0.8; transform: scale(1.08); }
}

/* Teks welcome fade-in turun */
@keyframes cp-welcome-in {
    from { opacity: 0; transform: translateY(-16px); letter-spacing: .5em; }
    to   { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}

/* Garis dekoratif grow */
@keyframes cp-line-grow {
    from { width: 0; opacity: 0; }
    to   { width: 80px; opacity: 1; }
}

/* Float naik turun — kartu hover */
@keyframes cp-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

/* ============================================================
   BODY — background islami
   ============================================================ */
body:has(.page_index_site) {
    background-color: #0d3320 !important;
    background-image:
        /* Bintang 8 sudut — ornamen islami */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none'%3E%3C!-- bintang 8 sudut --%3E%3Cpath d='M60 8 L67 38 L95 28 L78 52 L108 60 L78 68 L95 92 L67 82 L60 112 L53 82 L25 92 L42 68 L12 60 L42 52 L25 28 L53 38 Z' fill='rgba(201,168,76,0.06)'/%3E%3C!-- lingkaran dalam --%3E%3Ccircle cx='60' cy='60' r='22' fill='none' stroke='rgba(201,168,76,0.05)' stroke-width='1'/%3E%3C!-- kotak diagonal --%3E%3Crect x='42' y='42' width='36' height='36' fill='none' stroke='rgba(201,168,76,0.04)' stroke-width='0.8' transform='rotate(45 60 60)'/%3E%3C!-- titik sudut --%3E%3Ccircle cx='60' cy='16' r='2' fill='rgba(201,168,76,0.07)'/%3E%3Ccircle cx='104' cy='60' r='2' fill='rgba(201,168,76,0.07)'/%3E%3Ccircle cx='60' cy='104' r='2' fill='rgba(201,168,76,0.07)'/%3E%3Ccircle cx='16' cy='60' r='2' fill='rgba(201,168,76,0.07)'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 120px 120px !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
}

/* ============================================================
   HEADER — islami dengan ornamen dan shimmer emas
   ============================================================ */
body:has(.page_index_site) .pkp_structure_head {
    background: linear-gradient(135deg,
        #1a5435 0%,
        #2e7d4f 40%,
        #1a5435 100%) !important;
    border-bottom: 3px solid #c9a84c !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
    position: sticky !important; top: 0 !important; z-index: 1000 !important;
    overflow: hidden !important;
}

/* Lapisan shimmer emas di header */
body:has(.page_index_site) .pkp_structure_head::before {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(201,168,76,0.08) 45%,
        rgba(232,201,110,0.14) 50%,
        rgba(201,168,76,0.08) 55%,
        transparent 70%
    ) !important;
    background-size: 600px 100% !important;
    animation: cp-shimmer 4s linear infinite !important;
    pointer-events: none !important;
}

/* Ornamen bintang kiri header */
body:has(.page_index_site) .pkp_structure_head::after {
    content: '' !important;
    position: absolute !important;
    right: 20px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important; height: 56px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L58 35 L88 28 L70 52 L95 65 L65 68 L68 98 L50 78 L32 98 L35 68 L5 65 L30 52 L12 28 L42 35 Z' fill='rgba(201,168,76,0.2)' stroke='rgba(201,168,76,0.3)' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-size: contain !important; background-repeat: no-repeat !important;
    animation: cp-spin-slow 20s linear infinite !important;
    opacity: .6 !important; pointer-events: none !important;
}

body:has(.page_index_site) .pkp_head_wrapper {
    max-width: 1280px !important; margin: 0 auto !important;
    padding: 0 28px !important; display: flex !important;
    align-items: center !important; justify-content: space-between !important;
    min-height: 80px !important; gap: 20px !important; position: relative !important;
}
body:has(.page_index_site) .pkp_site_name_wrapper {
    display: flex !important; align-items: center !important; flex-shrink: 0 !important;
}
body:has(.page_index_site) .pkp_site_name { display: flex !important; align-items: center !important; }
body:has(.page_index_site) .pkp_site_name a {
    display: flex !important; align-items: center !important;
    gap: 14px !important; text-decoration: none !important;
}
body:has(.page_index_site) .pkp_site_name img {
    max-height: 56px !important; width: auto !important; display: block !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)) !important;
}
body:has(.page_index_site) .pkp_site_name a.is_text {
    font-family: Georgia, serif !important; font-size: 1.3rem !important;
    font-weight: 700 !important; color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
body:has(.page_index_site) .pkp_site_nav_toggle { display: none !important; }

/* Nav menu */
body:has(.page_index_site) .pkp_site_nav_menu {
    display: flex !important; align-items: center !important; flex-shrink: 0 !important;
}
body:has(.page_index_site) .pkp_navigation_primary_row { display: flex !important; align-items: center !important; }
body:has(.page_index_site) .pkp_navigation_primary_wrapper ul,
body:has(.page_index_site) .pkp_navigation_primary ul {
    display: flex !important; flex-direction: row !important;
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    gap: 3px !important; align-items: center !important;
}
body:has(.page_index_site) .pkp_navigation_primary ul li a {
    display: inline-block !important; padding: 9px 18px !important;
    font-size: .86rem !important; font-weight: 700 !important;
    color: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(201,168,76,.3) !important; border-radius: 6px !important;
    text-decoration: none !important; white-space: nowrap !important;
    background: rgba(255,255,255,.06) !important;
    transition: background .2s, color .2s, border-color .2s !important;
}
body:has(.page_index_site) .pkp_navigation_primary ul li a:hover {
    background: rgba(201,168,76,.18) !important;
    border-color: rgba(201,168,76,.6) !important; color: #e8c96e !important;
}
body:has(.page_index_site) .pkp_navigation_primary ul li.current > a {
    background: rgba(201,168,76,.22) !important;
    border-color: #c9a84c !important; color: #e8c96e !important;
}

/* ============================================================
   KONTEN AREA
   ============================================================ */
body:has(.page_index_site) .pkp_structure_content {
    padding: 28px 20px 52px !important;
}
body:has(.page_index_site) .pkp_structure_main {
    max-width: 1280px !important; margin: 0 auto !important;
    background: rgba(255,255,255,.97) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15) !important;
    padding: 0 0 36px !important; overflow: hidden !important;
    border: 1px solid rgba(201,168,76,.2) !important;
}

/* ============================================================
   BANNER WELCOME — ornamen islami di atas grid
   ============================================================ */
.page_index_site .journals > h2 {
    font-size: 0 !important; line-height: 0 !important;
    color: transparent !important; padding: 0 !important;
    margin: 0 !important; border: none !important;
    position: relative !important; display: block !important;
}

/* Background ornamen di area welcome */
.page_index_site .journals > h2::before {
    content: 'Selamat Datang di Rumah Jurnal STAI Pelabuhan Ratu, Sukabumi' !important;
    display: block !important;
    font-family: var(--cp-font-serif) !important;
    font-size: clamp(1.1rem, 2vw, 1.65rem) !important;
    font-style: italic !important; font-weight: 700 !important;
    color: var(--cp-primary) !important;
    text-align: center !important;
    padding: 44px 32px 18px !important;
    line-height: 1.4 !important;
    animation: cp-welcome-in .8s ease both !important;

    /* Background ornamen arabesque di welcome area */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none'%3E%3Cpath d='M30 3 L34 22 L52 16 L41 32 L56 38 L40 41 L44 60 L30 48 L16 60 L20 41 L4 38 L19 32 L8 16 L26 22 Z' fill='rgba(46,125,79,0.04)'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 60px 60px !important;
}

/* Garis dekoratif emas di bawah welcome */
.page_index_site .journals > h2::after {
    content: '' !important; display: block !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        transparent, var(--cp-gold, #c9a84c) 20%,
        var(--cp-gold-lt, #e8c96e) 50%,
        var(--cp-gold, #c9a84c) 80%, transparent) !important;
    border-radius: 2px !important;
    margin: 8px auto 28px !important;
    animation: cp-line-grow .8s .4s ease both !important;
    width: 200px !important;
    max-width: 60% !important;
}

/* ============================================================
   GRID 5 KOLOM
   ============================================================ */
.page_index_site .journals ul {
    list-style: none !important; margin: 0 !important;
    padding: 8px 24px 16px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
}

/* ============================================================
   KARTU JURNAL — animasi stagger masuk
   ============================================================ */
.page_index_site .journals ul li.has_thumb {
    background: var(--cp-white) !important;
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    border: 1px solid var(--cp-border) !important;
    overflow: hidden !important; display: flex !important;
    flex-direction: column !important;
    /* Animasi masuk stagger */
    animation: cp-rise .55s cubic-bezier(0.34,1.4,0.64,1) both !important;
    transition:
        box-shadow .3s ease,
        transform .3s cubic-bezier(0.34,1.4,0.64,1),
        border-color .3s ease !important;
    transform-style: flat !important;
    position: relative !important;
}
/* Delay stagger per kartu */
.page_index_site .journals ul li.has_thumb:nth-child(1) { animation-delay: .05s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(2) { animation-delay: .10s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(3) { animation-delay: .15s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(4) { animation-delay: .20s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(5) { animation-delay: .25s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(6) { animation-delay: .30s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(7) { animation-delay: .35s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(8) { animation-delay: .40s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(9) { animation-delay: .45s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(10){ animation-delay: .50s !important; }
.page_index_site .journals ul li.has_thumb:nth-child(n+11){ animation-delay: .55s !important; }

/* Hover — naik + glow hijau */
.page_index_site .journals ul li.has_thumb:hover {
    box-shadow:
        var(--cp-shadow-up),
        0 0 0 2px rgba(46,125,79,.15),
        0 0 20px var(--cp-primary-glow) !important;
    transform: translateY(-8px) scale(1.01) !important;
    border-color: var(--cp-primary-lt) !important;
}

/* Ornamen sudut kanan bawah kartu */
.page_index_site .journals ul li.has_thumb::after {
    content: '' !important;
    position: absolute !important; bottom: 0 !important; right: 0 !important;
    width: 36px !important; height: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L23 14 L35 10 L28 20 L38 25 L26 27 L28 40 L20 32 L12 40 L14 27 L2 25 L12 20 L5 10 L17 14 Z' fill='rgba(46,125,79,0.06)'/%3E%3C/svg%3E") !important;
    background-size: contain !important; background-repeat: no-repeat !important;
    pointer-events: none !important; opacity: 0 !important;
    transition: opacity .3s !important;
}
.page_index_site .journals ul li.has_thumb:hover::after {
    opacity: 1 !important;
}

/* ============================================================
   THUMB — zoom halus, NO FLIP
   ============================================================ */
.page_index_site .journals ul li.has_thumb .thumb {
    width: 100% !important; aspect-ratio: 3/4 !important;
    overflow: hidden !important; display: block !important;
    position: relative !important;
    background: var(--cp-accent) !important;
    border-bottom: 2px solid var(--cp-border) !important;
    perspective: none !important; transform-style: flat !important; transform: none !important;
}

/* Overlay gradient saat hover */
.page_index_site .journals ul li.has_thumb .thumb::after {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(
        to top,
        rgba(46,125,79,.5) 0%,
        rgba(46,125,79,.1) 40%,
        transparent 65%
    ) !important;
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    pointer-events: none !important; z-index: 1 !important;
}
.page_index_site .journals ul li.has_thumb:hover .thumb::after {
    opacity: 1 !important;
}

.page_index_site .journals ul li.has_thumb .thumb a {
    display: block !important; width: 100% !important; height: 100% !important;
}
.page_index_site .journals ul li.has_thumb .thumb img,
.page_index_site .journals ul li.has_thumb:hover .thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center top !important;
    display: block !important; max-width: none !important;
    transition: transform .5s cubic-bezier(0.25,0.46,0.45,0.94) !important;
    transform: scale(1) !important;
    backface-visibility: visible !important; rotate: none !important;
    animation: none !important; filter: none !important;
}
.page_index_site .journals ul li.has_thumb:hover .thumb img {
    transform: scale(1.09) !important;
}

/* ============================================================
   BODY KARTU — TANPA DESKRIPSI
   ============================================================ */
.page_index_site .journals ul li.has_thumb .body {
    padding: 11px 12px 12px !important;
    display: flex !important; flex-direction: column !important;
    gap: 8px !important; flex: 1 !important;
}

/* Judul jurnal */
.page_index_site .journals ul li.has_thumb .body h3 {
    font-size: .82rem !important; font-weight: 700 !important;
    color: var(--cp-text) !important; line-height: 1.4 !important; margin: 0 !important;
}
.page_index_site .journals ul li.has_thumb .body h3 a {
    color: var(--cp-text) !important; text-decoration: none !important;
    transition: color .15s !important;
}
.page_index_site .journals ul li.has_thumb .body h3 a:hover {
    color: var(--cp-primary) !important;
}

/* ❌ SEMBUNYIKAN DESKRIPSI */
.page_index_site .journals ul li.has_thumb .body .description {
    display: none !important;
}

/* Sembunyikan juga spam SEO */
.page_index_site .journals ul li .body .description div[style*="left: -"],
.page_index_site .journals ul li .body .description div[style*="position: absolute"] {
    display: none !important;
}

/* ============================================================
   TOMBOL LINKS
   ============================================================ */
.page_index_site .journals ul li.has_thumb .body ul.links {
    display: flex !important; flex-direction: column !important; gap: 5px !important;
    list-style: none !important; margin: auto 0 0 !important; padding: 0 !important;
    grid-template-columns: unset !important;
}
.page_index_site .journals ul li.has_thumb .body ul.links li.view a {
    display: block !important; width: 100% !important; text-align: center !important;
    padding: 8px 10px !important;
    background: var(--cp-primary) !important; color: #fff !important;
    border: 2px solid var(--cp-primary) !important; border-radius: 6px !important;
    font-size: .76rem !important; font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .2s, color .2s, transform .15s !important;
}
.page_index_site .journals ul li.has_thumb .body ul.links li.view a:hover {
    background: transparent !important; color: var(--cp-primary) !important;
    transform: scale(1.02) !important;
}
.page_index_site .journals ul li.has_thumb .body ul.links li.current a {
    display: block !important; width: 100% !important; text-align: center !important;
    padding: 6px 10px !important; background: transparent !important;
    color: var(--cp-muted) !important; border: 2px solid var(--cp-border) !important;
    border-radius: 6px !important; font-size: .73rem !important; font-weight: 600 !important;
    text-decoration: none !important; transition: background .18s, border-color .18s !important;
}
.page_index_site .journals ul li.has_thumb .body ul.links li.current a:hover {
    background: var(--cp-accent) !important; border-color: var(--cp-primary-lt) !important;
    color: var(--cp-primary) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
body:has(.page_index_site) .pkp_structure_footer_wrapper {
    background: linear-gradient(135deg, #0d3320 0%, #1a5435 100%) !important;
    color: rgba(255,255,255,.82) !important;
    border-top: 2px solid rgba(201,168,76,.3) !important;
}
body:has(.page_index_site) .pkp_structure_footer {
    max-width: 1280px !important; margin: 0 auto !important;
    padding: 28px !important; font-size: .87rem !important;
}
body:has(.page_index_site) .pkp_footer_content { color: rgba(255,255,255,.82) !important; }
body:has(.page_index_site) .pkp_footer_content a,
body:has(.page_index_site) .pkp_structure_footer a {
    color: #c9a84c !important; transition: color .15s !important;
}
body:has(.page_index_site) .pkp_footer_content a:hover,
body:has(.page_index_site) .pkp_structure_footer a:hover { color: #e8c96e !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .page_index_site .journals ul { grid-template-columns: repeat(4,1fr) !important; }
}
@media (max-width: 900px) {
    .page_index_site .journals ul { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 600px) {
    .page_index_site .journals ul {
        grid-template-columns: repeat(2,1fr) !important;
        gap: 12px !important; padding: 10px 14px 12px !important;
    }
    body:has(.page_index_site) .pkp_structure_content { padding: 14px 10px 36px !important; }
    body:has(.page_index_site) .pkp_head_wrapper { padding: 0 16px !important; min-height: 64px !important; }
}