/* SIMPUL Unja Publisher - animasi "Academic Premium" dan pencarian terpadu (versi 18).
 * Semua aturan gerak berada di bawah kelas .fx (dipasang fx.js hanya bila pengguna tidak memilih "kurangi gerakan").
 * Warna memakai variabel tema yang sudah ada (--hero, --brand, --cta, --surface, ...), jadi tetap cocok di tema terang/gelap
 * dan mengikuti warna yang diatur di Kelola Situs. */

:root{ --fx-ease: cubic-bezier(.22,.8,.24,1); --fx-ease-out: cubic-bezier(.16,1,.3,1); }

/* ========== 6. Menu atas melayang (berlaku juga tanpa animasi: hanya warna dan bayangan) ========== */
header.top{transition:background-color .35s ease, box-shadow .35s ease, border-color .35s ease}
header.top.fx-scrolled{box-shadow:0 10px 30px rgba(1,15,35,.28);border-bottom-color:rgba(255,255,255,.12)}
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))) and (background:color-mix(in srgb, red 50%, transparent)){
  header.top.fx-scrolled{background:color-mix(in srgb, var(--hero) 80%, transparent);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
}
.top .nav a{position:relative}
.top .nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--cta,#FF8A1F);transform:scaleX(0);transform-origin:center;transition:transform .35s var(--fx-ease)}
.top .nav a.fx-cur,.top .nav a[aria-current="page"]{color:#fff}
.top .nav a.fx-cur::after,.top .nav a[aria-current="page"]::after{transform:scaleX(1)}
.fx .top .nav a:hover::after{transform:scaleX(.55)}
.fx .top .nav a.fx-cur:hover::after,.fx .top .nav a[aria-current="page"]:hover::after{transform:scaleX(1)}

/* ========== 1. Hero sinematik ========== */
.fx .hero .bg{scale:1.06;translate:0 var(--fx-py,0px);will-change:translate}
.fx .hero.fx-intro .bg{animation:fxZoom 2.4s var(--fx-ease-out) backwards}
.fx .hero.fx-intro .txt > *{animation:fxRise .95s var(--fx-ease-out) backwards}
.fx .hero.fx-intro .txt > :nth-child(1){animation-delay:.15s}
.fx .hero.fx-intro .txt > :nth-child(2){animation-delay:.3s}
.fx .hero.fx-intro .txt > :nth-child(3){animation-delay:.45s}
.fx .hero.fx-intro .txt > :nth-child(4){animation-delay:.6s}
.fx .hero.fx-intro .cta .btn{animation:fxRise .8s var(--fx-ease-out) backwards}
.fx .hero.fx-intro .cta .btn:nth-child(1){animation-delay:.7s}
.fx .hero.fx-intro .cta .btn:nth-child(2){animation-delay:.8s}
.fx .hero.fx-intro .cta .btn:nth-child(3){animation-delay:.9s}
.fx .hero.fx-intro::after{animation:fxFade 1.6s ease backwards}
.hero .fx-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;mix-blend-mode:screen;
  background:radial-gradient(520px circle at var(--fx-mx,70%) var(--fx-my,40%), rgba(110,165,255,.24), rgba(110,165,255,.08) 38%, transparent 62%)}
.hero.fx-lit .fx-glow{opacity:1}
.fx .hero .btn{transition:transform .3s var(--fx-ease), box-shadow .3s ease, border-color .2s, background-color .2s}
.fx .hero .btn:hover{transform:translateY(-2px)}
.fx .hero .btn.solid:hover,.fx .hero .btn.primary:hover{box-shadow:0 10px 26px rgba(255,138,31,.35)}

@keyframes fxZoom{from{scale:1.16;filter:saturate(.85)}to{scale:1.06;filter:none}}
@keyframes fxRise{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}

/* ========== 3. Muncul saat digulir ========== */
.fx .fx-r{opacity:0;transform:translateY(22px);transition:opacity .7s var(--fx-ease-out), transform .8s var(--fx-ease-out)!important;transition-delay:calc(var(--fx-i,0) * 70ms)!important}
.fx .fx-r.fx-in{opacity:1;transform:none}
.fx .fx-r.fx-now{transition:none!important}
.fx .statstrip .fx-r{transform:translateY(12px)}
@media print{.fx-r{opacity:1!important;transform:none!important}}

/* ========== 2. Kartu layanan 3D ========== */
.card.svc,button.kp{position:relative;transform-style:preserve-3d}
.fx .card.svc,.fx button.kp{transition:transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease), border-color .25s, opacity .7s var(--fx-ease-out)}
.fx .card.svc:hover,.fx button.kp:hover{transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateY(-6px);box-shadow:0 22px 44px rgba(1,29,63,.16), 0 4px 12px rgba(1,29,63,.08);border-color:var(--brand)}
.fx .card.svc.fx-tilting,.fx button.kp.fx-tilting{transition:transform .12s linear, box-shadow .5s var(--fx-ease), border-color .25s}
.card.svc::after,button.kp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(360px circle at var(--fx-gx,50%) var(--fx-gy,0%), rgba(255,255,255,.55), rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.fx .card.svc:hover::after,.fx button.kp:hover::after{opacity:1}
.fx .svc .ic{transition:transform .5s var(--fx-ease), background-color .3s, color .3s}
.fx .card.svc:hover .ic{transform:translateZ(30px) translateY(-3px) rotate(-8deg) scale(1.08);background:var(--brand);color:var(--brand-text)}
.fx .card.svc h3,.fx button.kp b{transition:transform .5s var(--fx-ease)}
.fx .card.svc:hover h3{transform:translateZ(18px)}
.fx button.kp:hover b{transform:translateZ(24px) scale(1.04)}
.fx button.kp .more{transition:transform .35s var(--fx-ease)}
.fx button.kp:hover .more{transform:translateX(4px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card.svc::after,:root:not([data-theme="light"]) button.kp::after{mix-blend-mode:overlay;opacity:0}}
:root[data-theme="dark"] .card.svc::after,:root[data-theme="dark"] button.kp::after{mix-blend-mode:overlay}

/* Kartu lain: terangkat halus */
.fx .card.stat,.fx .pcard,.fx .dcol,.fx .mcard,.fx .vcard{transition:transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease), opacity .7s var(--fx-ease-out)}
.fx .card.stat:hover,.fx .pcard:hover,.fx .dcol:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(1,29,63,.12)}
.fx .statstrip .it{transition:background-color .3s ease, opacity .7s var(--fx-ease-out), transform .8s var(--fx-ease-out)}
.fx .statstrip .it:hover{background:var(--brand-soft)}

/* ========== 5. Berita, buku, dan galeri ========== */
.fx .nfeat,.fx .nitem,.fx .ncard,.fx .bcard{transition:transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease), border-color .25s, opacity .7s var(--fx-ease-out)}
.fx .nfeat:hover,.fx .nitem:hover,.fx .ncard:hover,.fx .bcard:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(1,29,63,.14)}
.fx .nfeat img,.fx .ncard img{transition:transform 1.1s var(--fx-ease), filter .6s ease}
.fx .nfeat:hover img,.fx .ncard:hover img{transform:scale(1.06);filter:saturate(1.08)}
.ncard{overflow:hidden}
.fx .nitem img{transition:filter .5s ease, transform .6s var(--fx-ease)}
.fx .nitem:hover img{filter:saturate(1.12) brightness(1.04);transform:scale(1.03)}
.fx .bcard .cover{transition:box-shadow .45s var(--fx-ease)}
.fx .bcard:hover .cover{box-shadow:0 14px 30px rgba(1,29,63,.22)}
.fx .bcard .cover.hasimg img{transition:transform 1s var(--fx-ease)}
.fx .bcard:hover .cover.hasimg img{transform:scale(1.05)}
.fx .gthumb img{transition:transform .9s var(--fx-ease), filter .5s ease}
.fx .gthumb:hover img{transform:scale(1.07);filter:saturate(1.1)}
.fx .nfeat .more,.fx .ncard .more{display:inline-block;transition:transform .35s var(--fx-ease)}
.fx .nfeat:hover .more,.fx .ncard:hover .more{transform:translateX(5px)}

/* Perpindahan halaman: memudar lembut */
.fx .fx-page{animation:fxPage .5s var(--fx-ease-out) both}
@keyframes fxPage{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fx .overlay > .card,.fx .overlay > form{animation:fxPop .38s var(--fx-ease-out) both}
@keyframes fxPop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.fx .toast{animation:fxToast .35s var(--fx-ease-out) both}
@keyframes fxToast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

@media (prefers-reduced-motion:reduce){
  .fx-r{opacity:1!important;transform:none!important;transition:none!important}
  .hero .bg{translate:none!important}
}

/* ========== Pencarian terpadu ========== */
.cari-btn{display:inline-flex;align-items:center;gap:7px}
.cari-btn span{font-size:14px}
@media(max-width:1100px){.cari-btn span{display:none}}
/* HP: di halaman publik tombol Cari pindah ke menu ☰ agar menu atas tidak melebar; logo dekoratif disembunyikan di layar sangat sempit */
@media(max-width:560px){.top .tright:has(.mnavbtn) .cari-btn{display:none}}
@media(max-width:400px){.top .brand .sep,.top .brand .bk{display:none}.top .tright{gap:4px}.top .tright .btn{padding-left:9px;padding-right:9px}}
.top .mnav .mnav-cari{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:10px;margin:8px 0 6px;padding:10px 12px;text-decoration:none}
html.cari-on{overflow:hidden}
.cari-ov{position:fixed;inset:0;z-index:70;background:rgba(3,10,26,.55);display:flex;justify-content:center;align-items:flex-start;padding:max(6vh,16px) 12px 16px;overflow:auto}
@supports (backdrop-filter:blur(2px)){.cari-ov{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}
.cari-panel{width:100%;max-width:780px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(1,15,35,.4);display:flex;flex-direction:column;max-height:calc(100vh - 12vh);overflow:hidden}
.fx .cari-panel{animation:fxPop .3s var(--fx-ease-out) both}
.cari-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cari-head > i{color:var(--brand);font-size:18px}
.cari-head input{flex:1;min-width:0;border:0;background:transparent;font-size:18px;padding:8px 0;outline:none;color:var(--text)}
.cari-head input::-webkit-search-cancel-button{display:none}
.cari-head .btn{display:inline-flex;gap:6px;align-items:center}
.cari-esc{font-size:12px;color:var(--muted)}
@media(max-width:600px){.cari-esc{display:none}.cari-head input{font-size:16px}}
.cari-tabs{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cari-tabs::-webkit-scrollbar{display:none}
.cari-tabs button{flex:none;border:1px solid var(--line);background:transparent;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--text);transition:background-color .2s, border-color .2s, color .2s}
.cari-tabs button span{font-size:11px;background:var(--bg);border-radius:99px;padding:1px 7px;color:var(--muted);font-variant-numeric:tabular-nums}
.cari-tabs button:hover{border-color:var(--brand)}
.cari-tabs button.on{background:var(--hero);border-color:var(--hero);color:#fff}
.cari-tabs button.on span{background:rgba(255,255,255,.18);color:#fff}
.cari-tabs button.zero{opacity:.5}
.cari-res{overflow:auto;padding:6px 8px 12px;flex:1;min-height:160px;transition:opacity .2s}
.cari-res.busy{opacity:.6}
.cari-g{padding:6px 6px 4px}
.cari-g h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-family:var(--font-b);font-weight:700;padding:10px 8px 6px;display:flex;gap:8px;align-items:center}
.cari-g h3 span{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0}
.cari-sub{font-size:12px;color:var(--muted);padding:6px 10px 2px;font-weight:600}
.cari-sub span{font-weight:400}
.cari-it{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;border:1px solid transparent;background:transparent;border-radius:12px;padding:10px;cursor:pointer;color:var(--text);transition:background-color .15s, border-color .15s}
.cari-it:hover,.cari-it.sel,.cari-it:focus-visible{background:var(--bg);border-color:var(--line)}
.cari-it.sel{border-color:var(--brand)}
.cari-it .ci{flex:none;width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:15px}
.cari-it .cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cari-it .cb b{font-size:15px;line-height:1.35}
.cari-it .cb small{color:var(--muted);font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cari-it .cr{flex:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:40%}
.cari-it mark{background:color-mix(in srgb, var(--accent) 45%, transparent);color:inherit;border-radius:3px;padding:0 1px}
.cari-it .cdet{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.cari-it .cgo{color:var(--brand);font-weight:600}
.cari-more{display:block;margin:4px 10px 8px;border:0;background:transparent;color:var(--brand);font-weight:600;cursor:pointer;padding:6px 0;font-size:14px}
.cari-more:hover{text-decoration:underline}
.cari-hint{padding:36px 20px;text-align:center;color:var(--muted)}
.cari-hint i{font-size:28px;color:var(--brand);opacity:.8}
.cari-hint p{max-width:46ch;margin:10px auto 0}
.cari-hint.bad{color:var(--bad)}
.cari-load{display:flex;gap:8px;justify-content:center;padding:44px 0}
.cari-load span{width:9px;height:9px;border-radius:50%;background:var(--brand);opacity:.3;animation:fxDot 1s ease-in-out infinite}
.cari-load span:nth-child(2){animation-delay:.15s}.cari-load span:nth-child(3){animation-delay:.3s}
@keyframes fxDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
.cari-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.cari-foot kbd{font:inherit;font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;margin-right:2px;background:var(--bg)}
@media(max-width:600px){.cari-ov{padding:0}.cari-panel{max-height:100vh;height:100%;border-radius:0;max-width:none}.cari-foot span:first-child{display:none}.cari-it .cr{max-width:34%}}
@media (prefers-reduced-motion:reduce){.cari-load span{animation:none;opacity:.6}}

/* ========== Kesehatan sistem (Kelola Situs, Admin Super) ========== */
.sehat-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.sehat-badge{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:6px 14px;font-weight:700}
.sehat-badge.ok{background:var(--ok-bg);color:var(--ok)}
.sehat-badge.warn{background:var(--warn-bg);color:var(--warn)}
.sehat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}
.sehat-grid > div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.sehat-grid b{display:block;font-family:var(--font-d);font-size:22px;line-height:1.15}
.sehat-grid small{color:var(--muted)}
.sehat-warn{margin:10px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.sehat-warn li{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:9px 12px;font-size:14px}
.sehat-pre{white-space:pre-wrap;font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;max-height:280px;overflow:auto;margin:8px 0}
.sehat-cron{display:block;font-size:13px;background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;word-break:break-all;margin:6px 0}

/* ========== v18.1: angka dan kartu jurnal yang bisa diklik ========== */
.statstrip a.it{display:block;position:relative;text-decoration:none;color:inherit;cursor:pointer}
.statstrip a.it:focus-visible{outline-offset:-3px}
.stgo-ic{position:absolute;right:14px;top:16px;font-size:13px;color:var(--brand);opacity:0;transform:translateX(-6px);transition:opacity .25s ease, transform .3s var(--fx-ease)}
.statstrip a.it:hover .stgo-ic,.statstrip a.it:focus-visible .stgo-ic,button.card.stat:hover .stgo-ic,button.card.stat:focus-visible .stgo-ic{opacity:1;transform:none}
.statstrip a.it:hover span{color:var(--text)}
button.card.stat{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;position:relative;display:block}
button.card.stat:hover,button.card.stat[aria-pressed="true"]{border-color:var(--brand)}
button.card.stat[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
.bars button.row{width:100%;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:4px 6px;margin:5px -6px;border-radius:8px;box-sizing:content-box;transition:background-color .2s}
.bars button.row:hover,.bars button.row.on{background:var(--bg)}
.bars button.row.on span{font-weight:700;color:var(--brand)}
.jfchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.jfc{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:background-color .2s, border-color .2s, color .2s}
.jfc span{font-size:11px;background:var(--bg);border-radius:99px;padding:1px 7px;color:var(--muted);font-variant-numeric:tabular-nums}
.jfc:hover{border-color:var(--brand)}
.jfc.on{background:var(--hero);border-color:var(--hero);color:#fff}
.jfc.on span{background:rgba(255,255,255,.18);color:#fff}
.jfcount{color:var(--muted);font-size:13px;margin:0 0 8px}