/* =====================================================================
   JDIH UNP — Tema Hukum
   Palet: biru tinta (navy) + emas antik + kertas krem. Huruf: Playfair Display (judul) + Plus Jakarta Sans.
   ===================================================================== */
:root {
    --navy-950: #071230; --navy-900: #0b1b45; --navy-800: #0f2460; --navy-700: #1a3a8f; --navy-600: #2a4fb0;
    --gold-700: #8f6f12; --gold-600: #a8841a; --gold-500: #c9a227; --gold-400: #d9b94a; --gold-300: #e7cf7a; --gold-100: #f6efd2;
    --paper: #f7f4ec; --paper-2: #efe9d9; --ink: #1b2540; --muted: #5b6578; --line: #e1d9c3; --burgundy: #7a1f2b;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --topbar-h: 40px; --header-h: 84px; --head-h: 124px;
    --radius: 10px; --shadow-sm: 0 2px 10px rgba(11, 27, 69, .08); --shadow-md: 0 14px 32px rgba(11, 27, 69, .14);
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .serif { font-family: var(--font-serif); }
a { transition: color .2s ease; }
body.j-loading { overflow: hidden; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex-shrink: 0; }
#main-content { padding-top: 0 !important; }
.j-fade-target { opacity: 0; transition: opacity .8s ease; }

/* ---------- Ornamen: garis emas ganda dengan wajik ---------- */
.rule-gold { display: flex; align-items: center; gap: 10px; color: var(--gold-500); }
.rule-gold::before, .rule-gold::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-500)); }
.rule-gold::after { background: linear-gradient(270deg, transparent, var(--gold-500)); }
.rule-gold i { width: 7px; height: 7px; background: var(--gold-500); transform: rotate(45deg); display: block; }
.dotgrid { background-image: radial-gradient(rgba(231, 207, 122, .16) 1px, transparent 1px); background-size: 26px 26px; }
.wm { position: absolute; pointer-events: none; color: #fff; opacity: .07; }

/* =====================================================================
   LOADING SCREEN
   ===================================================================== */
.jl { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; overflow: hidden; background: transparent; }
/* dua pintu: gradasi sambung antara kiri & kanan, membuka saat selesai */
.jl-half { position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 0; background: radial-gradient(circle at 50% 42%, #16307a 0%, #0b1b45 42%, var(--navy-950) 78%); background-size: 200% 100%; transition: transform .95s cubic-bezier(.77, 0, .18, 1); will-change: transform; }
.jl-half.l { left: 0; background-position: left center; }
.jl-half.r { right: 0; background-position: right center; }
.jl.is-open .jl-half.l { transform: translateX(-101%); } .jl.is-open .jl-half.r { transform: translateX(101%); }
.jl::before { content: ''; position: absolute; inset: 0; z-index: 1; opacity: .6; background-image: radial-gradient(rgba(231, 207, 122, .14) 1px, transparent 1px); background-size: 28px 28px; transition: opacity .4s ease; }
/* sorotan cahaya ala ruang sidang */
.jl-lightcone { position: absolute; z-index: 1; top: -8%; left: 50%; width: 92vw; height: 125%; transform: translateX(-50%); pointer-events: none; transition: opacity .45s ease;
                background: conic-gradient(from 180deg at 50% 0%, transparent 150deg, rgba(231, 207, 122, .11) 172deg, rgba(231, 207, 122, .17) 180deg, rgba(231, 207, 122, .11) 188deg, transparent 210deg);
                -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, transparent 78%); animation: jlLight 6s ease-in-out infinite alternate; }
@keyframes jlLight { from { opacity: .55; } to { opacity: 1; } }
.jl-wm { position: absolute; z-index: 1; bottom: -6%; width: min(46vw, 430px); height: min(46vw, 430px); color: #fff; opacity: .06; pointer-events: none; transition: opacity .45s ease; animation: jlWmIn 1.6s ease both; }
.jl-wm.l { left: -3%; } .jl-wm.r { right: -3%; }
@keyframes jlWmIn { from { opacity: 0; transform: translateY(40px); } to { opacity: .06; transform: none; } }
.jl-dust { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: opacity .45s ease; }
.jl-dust i { position: absolute; bottom: -12px; border-radius: 50%; background: var(--gold-300); box-shadow: 0 0 8px rgba(231, 207, 122, .9); opacity: var(--o, .4); animation: jlDust linear infinite; }
@keyframes jlDust { to { transform: translateY(-105vh) translateX(18px); opacity: 0; } }
.jl-seam { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--gold-300), transparent); opacity: 0; transition: opacity .35s ease; }
.jl.is-done .jl-seam { opacity: .9; } .jl.is-open .jl-seam { opacity: 0; }
.jl.is-done .jl-half.l { box-shadow: 1px 0 0 rgba(231, 207, 122, .55); } .jl.is-done .jl-half.r { box-shadow: -1px 0 0 rgba(231, 207, 122, .55); }
.jl.is-done::before, .jl.is-done .jl-lightcone, .jl.is-done .jl-wm, .jl.is-done .jl-dust { opacity: 0; }

.jl-inner { position: relative; z-index: 3; text-align: center; padding: 0 20px; transition: opacity .45s ease, transform .45s ease; }
.jl.is-done .jl-inner { opacity: 0; transform: scale(1.06); }

.jl-trio { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 28px); width: min(560px, 94vw); margin: 0 auto 30px; }
.jl-trio::before { content: ''; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(231, 207, 122, .75) 18%, rgba(231, 207, 122, .75) 82%, transparent); }
.jl-trio::after { content: ''; position: absolute; top: 50%; left: 6%; width: 90px; height: 3px; margin-top: -1px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff8d6, transparent); animation: jlTravel 2.6s ease-in-out infinite; }
@keyframes jlTravel { 0% { left: 6%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 78%; opacity: 0; } }
.jl-disc { position: relative; z-index: 2; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: jlPop .8s cubic-bezier(.2, .9, .3, 1.25) both; }
.jl-disc.logo { width: clamp(78px, 17vw, 120px); height: clamp(78px, 17vw, 120px); background: radial-gradient(circle at 50% 30%, #ffffff, #f2ecd9); border: 3px solid var(--gold-400); box-shadow: 0 0 0 7px rgba(201, 162, 39, .16), 0 16px 40px rgba(0, 0, 0, .5); }
.jl-disc.logo img { width: 74%; height: 74%; object-fit: contain; display: block; }
.jl-disc.l { animation-delay: .25s; } .jl-disc.r { animation-delay: .4s; }
.jl-disc.mid { width: clamp(108px, 23vw, 164px); height: clamp(108px, 23vw, 164px); background: radial-gradient(circle at 50% 32%, #1a3a8f, #0a1a45 75%); border: 1px solid rgba(231, 207, 122, .6);
               box-shadow: 0 0 0 7px rgba(201, 162, 39, .1), 0 0 64px rgba(201, 162, 39, .28), inset 0 0 38px rgba(201, 162, 39, .12); }
.jl-disc.mid::after { content: ''; position: absolute; inset: -11px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gold-400); border-right-color: rgba(231, 207, 122, .3); animation: jlSpin 2.4s linear infinite; }
.jl-disc.mid::before { content: ''; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle at 50% 0, var(--gold-300) 0 3.5px, transparent 4.5px); animation: jlSpin 5.5s linear infinite reverse; }
.jl-ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(231, 207, 122, .6); animation: jlRipple 2.8s ease-out infinite; pointer-events: none; }
.jl-ripple.d2 { animation-delay: 1.4s; }
@keyframes jlRipple { from { transform: scale(1); opacity: .7; } to { transform: scale(2); opacity: 0; } }
@keyframes jlPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.jl-svg { position: relative; width: 66%; height: 66%; overflow: visible; }
.jl-svg .g { stroke: var(--gold-300); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.jl-svg .gf { fill: var(--gold-300); stroke: none; }
.jl-beam { transform-origin: 100px 40px; animation: jlBeam 3s ease-in-out infinite; }
.jl-panL { transform-origin: 30px 40px; animation: jlPanL 3s ease-in-out infinite; }
.jl-panR { transform-origin: 170px 40px; animation: jlPanL 3s ease-in-out infinite; }
@keyframes jlBeam { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes jlPanL { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
@keyframes jlSpin { to { transform: rotate(360deg); } }

.jl-title { font-family: var(--font-serif); font-size: clamp(28px, 5vw, 44px); font-weight: 700; color: #fff; margin: 0; line-height: 1.2; animation: jlTitle 1.1s .45s cubic-bezier(.2, .8, .2, 1) both; }
.jl-title span { color: var(--gold-400); }
@keyframes jlTitle { from { opacity: 0; letter-spacing: .38em; filter: blur(8px); } to { opacity: 1; letter-spacing: .02em; filter: none; } }
.jl-rule { max-width: 230px; margin: 12px auto 12px; animation: jlFade .8s 1s both; }
.jl-sub { color: var(--gold-300); font-size: 11.5px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; margin: 0 0 30px; animation: jlFade .8s 1.1s both; }
@keyframes jlFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jl-bar-wrap { width: min(320px, 80vw); margin: 0 auto; animation: jlFade .8s 1.25s both; }
.jl-meta { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #9fb0d6; }
.jl-meta b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.jl-bar { height: 6px; background: rgba(255, 255, 255, .12); border-radius: 99px; overflow: visible; position: relative; }
.jl-bar i { display: block; position: relative; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); border-radius: 99px; box-shadow: 0 0 14px rgba(231, 207, 122, .55); transition: width .12s linear; }
.jl-bar i::after { content: ''; position: absolute; right: -4px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #fff8d6; box-shadow: 0 0 12px 3px rgba(231, 207, 122, .9); }
.jl-steps { display: flex; justify-content: center; gap: clamp(8px, 3vw, 24px); width: min(420px, 92vw); margin: 24px auto 0; animation: jlFade .8s 1.4s both; }
.jl-steps .st { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; color: rgba(255, 255, 255, .26); transition: color .4s ease, text-shadow .4s ease; }
.jl-steps .st .ic { font-size: 22px; transition: transform .4s cubic-bezier(.2, .9, .3, 1.4); }
.jl-steps .st em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.jl-steps .st.on { color: var(--gold-300); text-shadow: 0 0 18px rgba(231, 207, 122, .6); }
.jl-steps .st.on .ic { transform: scale(1.22) translateY(-2px); }
.jl-quote { margin-top: 26px; font-family: var(--font-serif); font-style: italic; color: rgba(255, 255, 255, .5); font-size: 13.5px; animation: jlFade .8s 1.6s both; }
/* =====================================================================
   TOP BAR + HEADER (satu header untuk semua halaman)
   ===================================================================== */
.top-bar { position: fixed; top: 0; left: 0; width: 100%; height: var(--topbar-h); z-index: 1051; display: flex; align-items: center;
           background: var(--navy-950); color: #cdd6ee; font-size: 12.5px; font-weight: 500; border-bottom: 1px solid rgba(231, 207, 122, .22); transition: transform .35s ease; }
.top-bar.hide { transform: translateY(-100%); }
.top-bar .container { display: flex; align-items: center; justify-content: space-between; }
.top-left { display: flex; align-items: center; gap: 12px; }
.top-left a { color: #e8edfa; text-decoration: none; }
.top-left a:hover { color: var(--gold-300); }
.top-left i { color: var(--gold-400); font-size: 13px; }
.top-left .divider { color: rgba(255, 255, 255, .25); }
.top-right { display: flex; align-items: center; gap: 4px; }
.top-right a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #cdd6ee; border-radius: 50%; text-decoration: none; transition: all .2s ease; }
.top-right a:hover { color: var(--navy-950); background: var(--gold-400); }

#header.jh-header { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--header-h); z-index: 1050; display: flex; align-items: center;
                    background: rgba(255, 255, 255, .98) !important; backdrop-filter: blur(10px); border-bottom: 3px solid var(--gold-500);
                    box-shadow: 0 6px 24px rgba(7, 18, 48, .1); transition: top .35s ease, height .35s ease; }
#header.jh-header.scrolled { top: 0; height: 72px; }
#header.jh-header .logo img { max-height: 54px; width: auto; object-fit: contain; transition: max-height .3s ease; }
#header.jh-header.scrolled .logo img { max-height: 46px; }

.navbar-menu-desktop .mobile-menu-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.navbar-menu-desktop .mobile-menu-item { position: relative; }
.navbar-menu-desktop .mobile-menu-link { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 0; background: transparent !important; border: 0;
        color: var(--navy-800) !important; font-weight: 700; font-size: 13.5px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; position: relative; transform: none !important; }
.navbar-menu-desktop .mobile-menu-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.navbar-menu-desktop .mobile-menu-item:hover > .mobile-menu-link::after,
.navbar-menu-desktop .mobile-menu-item.is-active > .mobile-menu-link::after { transform: scaleX(1); }
.navbar-menu-desktop .mobile-menu-item:hover > .mobile-menu-link { color: var(--gold-700) !important; }
.navbar-menu-desktop .mobile-menu-icon { display: inline-flex; align-items: center; color: var(--gold-600); font-size: 16px; }
/* panah penanda dropdown (template lama menyembunyikannya di layar lebar) */
.navbar-menu-desktop .mobile-menu-link .mobile-menu-chevron { display: inline-block !important; margin-left: 1px; font-size: 10px; color: var(--gold-600); -webkit-text-stroke: .6px currentColor; transition: transform .25s ease, color .2s ease; }
.navbar-menu-desktop .dropdown:hover > .mobile-menu-link .mobile-menu-chevron { transform: rotate(180deg); color: var(--navy-800); }
.navbar-menu-desktop .dropdown > ul { display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; width: max-content; max-width: 340px; padding: 8px; list-style: none; margin: 0; z-index: 999; text-align: left;
        background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold-500); border-radius: 0 0 12px 12px; box-shadow: 0 18px 40px rgba(7, 18, 48, .18); }
.navbar-menu-desktop .dropdown > ul::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.navbar-menu-desktop .dropdown > ul::after { content: ''; position: absolute; top: -9px; left: 26px; width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); border-top-color: var(--gold-500); transform: rotate(45deg); }
.navbar-menu-desktop .dropdown.dd-right > ul { left: auto; right: 0; } .navbar-menu-desktop .dropdown.dd-right > ul::after { left: auto; right: 26px; }
.navbar-menu-desktop .dropdown:hover > ul { display: block; animation: jhDrop .22s ease; }
@keyframes jhDrop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.navbar-menu-desktop .dropdown > ul li { min-width: 0 !important; width: 100%; list-style: none; margin: 0; padding: 0; }
.navbar-menu-desktop .dropdown > ul li + li { border-top: 1px solid #f1ece0; }
.navbar-menu-desktop .dropdown > ul li a { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; width: 100%; padding: 11px 14px !important; border-radius: 6px; text-align: left !important;
        color: var(--ink) !important; font-size: 14px !important; font-weight: 600; line-height: 1.35; text-decoration: none; white-space: normal; transition: background .18s ease, color .18s ease, padding-left .18s ease; }
.navbar-menu-desktop .dropdown > ul li a i, .navbar-menu-desktop .dropdown > ul li a .ic { flex: 0 0 22px; width: 22px; margin: 0 !important; text-align: center; color: var(--gold-600); font-size: 17px !important; }
.navbar-menu-desktop .dropdown > ul li a i.bi-chevron-right { font-size: 11px !important; color: var(--gold-500); }
.navbar-menu-desktop .dropdown > ul li a:hover { background: var(--gold-100); color: var(--navy-800) !important; padding-left: 18px !important; }
.navbar-menu-desktop .dropdown > ul li a:hover i, .navbar-menu-desktop .dropdown > ul li a:hover .ic { color: var(--navy-800); }.mobile-nav-toggle { color: var(--navy-800) !important; }

/* Drawer mobile */
.mobile-nav-header { background: var(--navy-900) !important; border-bottom: 3px solid var(--gold-500) !important; }
.mobile-nav-drawer .mobile-menu-link { font-weight: 700; }

/* =====================================================================
   HERO HALAMAN DALAM  (partials/page-hero)
   ===================================================================== */
.ph { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; padding: calc(var(--head-h) + 44px) 0 52px; isolation: isolate; }
.ph-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.ph::before { opacity: var(--ov, 1); content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(7, 18, 48, .94) 0%, rgba(11, 27, 69, .86) 55%, rgba(15, 36, 96, .72) 100%); }
.ph.no-img::before { background: radial-gradient(circle at 85% 20%, #1a3a8f 0%, var(--navy-900) 55%, var(--navy-950) 100%); }
.ph .dotgrid { position: absolute; inset: 0; z-index: -1; }
.ph::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-600)); }
.ph .wm { right: 4%; top: 50%; transform: translateY(-50%); width: 280px; height: 280px; z-index: -1; opacity: .08; }
.ph-crumb { font-size: 13px; color: rgba(255, 255, 255, .65); margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ph-crumb a { color: rgba(255, 255, 255, .65); text-decoration: none; }
.ph-crumb a:hover { color: var(--gold-300); }
.ph-crumb .sep { color: var(--gold-500); }
.ph-main { display: flex; align-items: center; gap: 20px; }
.ph-medal { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--gold-300);
            border: 1.5px solid var(--gold-500); background: rgba(201, 162, 39, .1); box-shadow: 0 0 0 5px rgba(201, 162, 39, .1); }
.ph h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.25; margin: 0; color: #fff; max-width: 880px; }
.ph p.sub { margin: 8px 0 0; color: rgba(255, 255, 255, .78); max-width: 620px; font-size: 15px; line-height: 1.65; }
.ph-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.ph-meta i { color: var(--gold-400); margin-right: 6px; }
.ph-search { display: flex; gap: 8px; width: 100%; max-width: 440px; }
.ph-search input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; font-size: 14px; }
.ph-search input::placeholder { color: rgba(255, 255, 255, .6); }
.ph-search input:focus { outline: none; background: #fff; color: var(--ink); }
.ph-search button { height: 46px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--gold-500); color: var(--navy-950); font-weight: 800; font-size: 14px; cursor: pointer; }
.ph-search button:hover { background: var(--gold-400); }

/* =====================================================================
   KOMPONEN UMUM
   ===================================================================== */
.sec { padding: 84px 0; position: relative; }
.sec-paper { background: var(--paper); }
.sec-white { background: #fff; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.sec-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-700); font-weight: 800; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.sec-eyebrow .ic { font-size: 16px; color: var(--gold-500); }
.sec-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; color: var(--navy-800); margin: 10px 0 14px; }
.sec-head p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 14px auto 0; }
.sec-head .rule-gold { max-width: 180px; margin: 0 auto; }
.sec-dark .sec-head h2 { color: #fff; } .sec-dark .sec-head p { color: rgba(255, 255, 255, .72); } .sec-dark .sec-eyebrow { color: var(--gold-300); }

.btn-gold, .btn-navy, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 8px; font-weight: 800; font-size: 14.5px; text-decoration: none; border: 2px solid transparent; transition: all .22s ease; cursor: pointer; }
.btn-gold { background: var(--gold-500); color: var(--navy-950); } .btn-gold:hover { background: var(--gold-400); color: var(--navy-950); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(201, 162, 39, .35); }
.btn-navy { background: var(--navy-800); color: #fff; } .btn-navy:hover { background: var(--navy-900); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 36, 96, .3); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); } .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* =====================================================================
   BERANDA — HERO SLIDER
   ===================================================================== */
.hh { position: relative; color: #fff; background: var(--navy-950); overflow: hidden; }
.hh-slides { position: absolute; inset: 0; z-index: 0; }
.hh-slides .swiper-wrapper, .hh-slides .swiper-slide { height: 100%; }
.hh-slides .bg { width: 100%; height: 100%; background-size: cover; background-position: center; }
.hh-ov { opacity: var(--ov, 1); position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(7, 18, 48, .95) 0%, rgba(11, 27, 69, .82) 52%, rgba(15, 36, 96, .5) 100%); }
.hh-ov.no-img { background: radial-gradient(circle at 82% 30%, #1d3f9d 0%, var(--navy-900) 48%, var(--navy-950) 100%); }
.hh .dotgrid { position: absolute; inset: 0; z-index: 1; }
.hh-body { position: relative; z-index: 3; min-height: 700px; display: flex; align-items: center; padding-top: calc(var(--head-h) + 40px); padding-bottom: 130px; }.hh .wm { z-index: 1; opacity: .09; }
.hh-in { position: relative; z-index: 3; max-width: 760px; }
.hh-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border: 1px solid rgba(231, 207, 122, .5); background: rgba(201, 162, 39, .12); color: var(--gold-300); border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hh h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); font-weight: 800; line-height: 1.12; margin: 22px 0 18px; color: #fff; letter-spacing: -.01em; }
.hh h1 em { font-style: normal; color: var(--gold-400); }
.hh p.lead { font-size: clamp(1rem, 1.8vw, 1.18rem); color: rgba(255, 255, 255, .82); line-height: 1.75; max-width: 620px; margin: 0 0 30px; }
.hh-search { display: flex; gap: 0; background: #fff; border-radius: 10px; padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); max-width: 700px; }
.hh-search .fld { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-width: 0; }
.hh-search .fld .ic, .hh-search .fld i { color: var(--gold-600); font-size: 19px; }
.hh-search input { flex: 1; min-width: 0; border: 0; outline: 0; height: 52px; font-size: 15px; color: var(--ink); background: transparent; }
.hh-search select { border: 0; border-left: 1px solid var(--line); outline: 0; background: transparent; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--navy-800); max-width: 190px; }
.hh-search button { border: 0; background: var(--navy-800); color: #fff; font-weight: 800; padding: 0 26px; border-radius: 7px; font-size: 14.5px; cursor: pointer; transition: background .2s; }
.hh-search button:hover { background: var(--gold-600); }
.hh-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hh-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .06); transition: all .2s; }
.hh-chip:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.hh-chip b { color: var(--gold-300); } .hh-chip:hover b { color: var(--navy-950); }
.hh-pg { position: absolute; left: 0; right: 0; bottom: 150px; z-index: 4; text-align: center; }
.hh-pg .swiper-pagination-bullet { display: inline-block; border-radius: 50%; margin: 0 4px; cursor: pointer; background: #fff; opacity: .5; width: 9px; height: 9px; } .hh-pg .swiper-pagination-bullet-active { background: var(--gold-400); opacity: 1; width: 26px; border-radius: 5px; }
.hh-stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.hh-stats .wrap { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); border-top: 4px solid var(--gold-500); }
.hh-stat { display: flex; align-items: center; gap: 16px; padding: 22px 28px; border-right: 1px solid var(--line); }
.hh-stat:last-child { border-right: 0; }
.hh-stat .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--navy-800); color: var(--gold-300); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.hh-stat .n { font-family: var(--font-serif); font-size: 2rem; font-weight: 800; color: var(--navy-800); line-height: 1; }
.hh-stat .l { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* ---------- Bingkai lengkung hero beranda ---------- */
.hh-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 34px; align-items: center; width: 100%; }
.hh-art { display: flex; justify-content: center; align-items: center; }
.hh-frame { position: relative; width: min(100%, 380px); margin: 0 auto; padding: 0 18px 20px 0; }
.hh-frame::before { content: ''; position: absolute; top: 20px; left: 20px; right: 0; bottom: 0; border: 2px solid var(--gold-400); border-radius: 190px 190px 16px 16px; }
.hh-arch { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 190px 190px 14px 14px; overflow: hidden; background: var(--navy-800); border: 1px solid rgba(231, 207, 122, .45); box-shadow: 0 28px 60px rgba(0, 0, 0, .42); }
.hh-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-arch.no-img { background: radial-gradient(circle at 50% 34%, #3a6ee0 0%, #1d4399 42%, #0e2560 100%); display: flex; align-items: center; justify-content: center; }
.hh-arch .dotgrid { position: absolute; inset: 0; }
.hh-emblem { position: relative; width: 56%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 118px; color: var(--gold-300);
             border: 2px solid rgba(231, 207, 122, .7); background: rgba(7, 18, 48, .35); box-shadow: 0 0 0 10px rgba(231, 207, 122, .1), inset 0 0 40px rgba(231, 207, 122, .08); }
.hh-motto { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: rgba(255, 255, 255, .72); }
.hh-badge { position: absolute; top: 58px; right: -6px; width: 104px; height: 104px; border-radius: 50%; background: var(--gold-500); color: var(--navy-950); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
            border: 4px solid #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.hh-badge b { font-family: var(--font-serif); font-size: 1.7rem; line-height: 1; font-weight: 800; }
.hh-badge small { font-size: 10.5px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.hh-latest { position: absolute; left: -26px; bottom: 44px; width: 230px; padding: 13px 16px 14px; background: #fff; border-left: 4px solid var(--gold-500); border-radius: 0 10px 10px 0; text-decoration: none; box-shadow: 0 16px 36px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.hh-latest:hover { transform: translateY(-3px); }
.hh-latest small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 3px; }
.hh-latest b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-serif); font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--navy-800); }
@media (max-width: 1199px) { .hh-frame { width: min(100%, 330px); } .hh-emblem { font-size: 96px; } .hh-badge { width: 90px; height: 90px; top: 44px; } .hh-badge b { font-size: 1.45rem; } .hh-latest { left: -14px; width: 200px; } }
@media (max-width: 991px) { .hh-grid { grid-template-columns: minmax(0, 1fr); } }/* =====================================================================
   BERANDA — KATEGORI, TENTANG, STATISTIK, BERITA, AJAKAN
   ===================================================================== */
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px 24px; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tcard::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-400); color: var(--ink); }
.tcard:hover::before { transform: scaleX(1); }
.tcard .ico { width: 62px; height: 62px; border-radius: 50%; background: var(--navy-800); color: var(--gold-300); display: flex; align-items: center; justify-content: center; font-size: 29px; margin-bottom: 20px; box-shadow: 0 0 0 5px var(--gold-100); }
.tcard h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy-800); margin: 0 0 8px; }
.tcard p { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin: 0 0 20px; flex: 1; }
.tcard .row2 { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
.tcard .num { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 800; color: var(--navy-800); line-height: 1; }
.tcard .num small { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 5px; }
.tcard .go { color: var(--gold-600); font-size: 20px; transition: transform .2s; } .tcard:hover .go { transform: translateX(4px); }

.status-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.scard { display: flex; align-items: center; gap: 18px; padding: 20px 26px; border-radius: var(--radius); text-decoration: none; background: var(--navy-800); color: #fff; border: 1px solid var(--navy-700); transition: transform .2s, box-shadow .2s; }
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: #fff; }
.scard .ico { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(231, 207, 122, .15); color: var(--gold-300); border: 1px solid rgba(231, 207, 122, .4); }
.scard.bad .ico { background: rgba(255, 255, 255, .08); color: #f1b4bb; border-color: rgba(241, 180, 187, .4); }
.scard .t { font-weight: 800; font-size: 16px; } .scard .d { font-size: 13px; color: rgba(255, 255, 255, .7); margin-top: 2px; }
.scard .n { margin-left: auto; font-family: var(--font-serif); font-size: 2.2rem; font-weight: 800; color: var(--gold-300); }

.about { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.about-img { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--navy-800); box-shadow: var(--shadow-md); }
.about-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-img.no-img { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 70% 25%, #1a3a8f, var(--navy-900) 60%, var(--navy-950)); }
.about-img.no-img .ic { font-size: 150px; color: rgba(231, 207, 122, .85); }
.about-img.no-img .dotgrid { position: absolute; inset: 0; }
.about-frame { position: absolute; inset: 14px; border: 1.5px solid rgba(231, 207, 122, .55); border-radius: 8px; pointer-events: none; }
.about-badge { position: absolute; right: -18px; bottom: 28px; background: var(--gold-500); color: var(--navy-950); padding: 14px 20px; border-radius: 10px 0 0 10px; box-shadow: var(--shadow-md); text-align: center; z-index: 2; }
.about-badge b { display: block; font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; } .about-badge span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--navy-800); margin: 12px 0 18px; }
.about p { color: var(--muted); line-height: 1.85; font-size: 15.5px; }
.about ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.about li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--ink); font-size: 15px; }
.about li .ic, .about li i { color: var(--gold-500); font-size: 21px; margin-top: 1px; }

.stats-band { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
.stats-band .dotgrid { position: absolute; inset: 0; }
.kpis { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.kpi { text-align: center; padding: 14px 16px; border-right: 1px solid rgba(231, 207, 122, .25); }
.kpi:last-child { border-right: 0; }
.kpi .ico { font-size: 34px; color: var(--gold-400); margin-bottom: 10px; }
.kpi .n { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; line-height: 1; color: #fff; }
.kpi .l { margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }

.chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 18px; box-shadow: var(--shadow-sm); height: 100%; }
.chart-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy-800); display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.chart-card h3 .ic, .chart-card h3 i { color: var(--gold-600); font-size: 22px; }

.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pcard { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-decoration: none; color: var(--ink); transition: all .22s ease; }
.pcard:hover { border-color: var(--gold-400); box-shadow: var(--shadow-md); transform: translateY(-3px); color: var(--ink); }
.pcard .ico { width: 46px; height: 46px; border-radius: 8px; background: var(--navy-800); color: var(--gold-300); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.pcard .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
.pcard .t { font-family: var(--font-serif); font-weight: 700; color: var(--navy-800); line-height: 1.4; margin: 3px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .m { font-size: 12.5px; color: var(--muted); }

.cta { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; padding: 84px 0; isolation: isolate; text-align: center; }
.cta .bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.cta::before { opacity: var(--ov, 1); content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(7, 18, 48, .94), rgba(15, 36, 96, .84)); }
.cta .wm { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 420px; height: 420px; z-index: -1; opacity: .06; }
.cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; color: #fff; margin: 14px 0 14px; }
.cta p { color: rgba(255, 255, 255, .78); max-width: 620px; margin: 0 auto 30px; font-size: 16px; line-height: 1.7; }
.cta .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Tautan JDIH terkait ---------- */
.tl-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.tl-card { position: relative; flex: 0 0 calc((100% - 66px) / 4); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 18px 20px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold-500); border-radius: 14px; text-decoration: none; color: var(--navy-800); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tl-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 90px; background: linear-gradient(180deg, var(--gold-100), transparent); opacity: .7; pointer-events: none; }
.tl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-400); color: var(--navy-800); }
.tl-logo { position: relative; width: 92px; height: 92px; border-radius: 50%; background: #fff; border: 3px solid var(--gold-400); box-shadow: 0 0 0 6px var(--gold-100), 0 10px 22px rgba(11, 27, 69, .12); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--gold-600); font-size: 38px; margin-bottom: 18px; transition: transform .25s ease; }
.tl-card:hover .tl-logo { transform: scale(1.06); }
.tl-logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.tl-name { position: relative; flex: 1; font-family: var(--font-serif); font-weight: 700; font-size: 15.5px; line-height: 1.4; margin-bottom: 14px; display: flex; align-items: center; }
.tl-visit { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); padding-top: 12px; border-top: 1px solid var(--line); width: 100%; justify-content: center; }
.tl-card:hover .tl-visit { color: var(--navy-800); }
.tl-visit i { transition: transform .2s ease; } .tl-card:hover .tl-visit i { transform: translate(2px, -2px); }
@media (max-width: 1100px) { .tl-card { flex-basis: calc((100% - 44px) / 3); } }
@media (max-width: 768px) { .tl-card { flex-basis: calc((100% - 22px) / 2); } .tl-logo { width: 80px; height: 80px; } }
@media (max-width: 440px) { .tl-card { flex-basis: 100%; } }
/* ---------- Kartu berita (dipakai beranda & halaman berita) ---------- */
.nw-img { position: relative; display: block; overflow: hidden; background: #e6e9ef; aspect-ratio: 16 / 10; }
.nw-img img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform .35s ease; }
.nw-img:hover img.cover { transform: scale(1.03); }
.nw-img .ph-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e9e4d3, #dcd5bd); color: rgba(15, 36, 96, .28); font-size: 54px; }
.nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.nw-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.nw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-400); }
.nw-badge { position: absolute; left: 14px; top: 14px; z-index: 1; background: var(--navy-800); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.nw-card .body { padding: 20px 22px 0; display: flex; flex-direction: column; flex: 1; }
.nw-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-title a { color: var(--navy-800); text-decoration: none; }
.nw-title a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.nw-ex { font-size: 14px; color: var(--muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.nw-card .foot { padding: 18px 22px; }
.nw-more { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--navy-800); }
.nw-card .go { width: 32px; height: 32px; border-radius: 50%; background: var(--navy-800); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; }
.nw-card:hover .go { background: var(--gold-500); color: var(--navy-950); transform: translateX(3px); }

/* ---------- Paginasi ---------- */
.pagination .page-link { border: 1px solid var(--line); border-radius: 6px !important; margin: 0 2px; color: var(--navy-800); font-weight: 700; background: #fff; box-shadow: none; }
.pagination .page-link:hover { background: var(--gold-100); color: var(--navy-800); }
.pagination .page-item.active .page-link { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* =====================================================================
   FOOTER (satu footer untuk semua halaman)
   ===================================================================== */
.jf { position: relative; background: var(--navy-950); color: #b9c5e4; isolation: isolate; overflow: hidden; margin-top: 0; }
.jf .bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.jf::before { opacity: var(--ov, 1); content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 18, 48, .96), rgba(7, 18, 48, .985)); }
.jf-top { height: 5px; background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-600)); }
.jf-main { padding: 64px 0 40px; }
.jf .wm { right: -40px; bottom: -40px; width: 380px; height: 380px; z-index: -1; opacity: .05; }
.jf-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.jf-logos { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid rgba(231, 207, 122, .4); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.jf-logos img { height: 40px; width: auto; } .jf-logos i { width: 1px; height: 30px; background: rgba(231, 207, 122, .4); }
.jf-brand .t1 { font-family: var(--font-serif); color: #fff; font-weight: 700; font-size: 18px; line-height: 1.2; } .jf-brand .t2 { color: var(--gold-400); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.jf p { line-height: 1.8; font-size: 14px; margin: 0 0 20px; } .jf p b { color: var(--gold-300); }
.jf h6 { font-family: var(--font-serif); color: #fff; font-size: 16px; font-weight: 700; margin: 4px 0 18px; padding-bottom: 12px; position: relative; }
.jf h6::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--gold-500); }
.jf ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.jf ul a { color: #b9c5e4; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.jf ul a i { color: var(--gold-500); font-size: 11px; }
.jf ul a:hover { color: var(--gold-300); transform: translateX(4px); }
.jf-contact { display: grid; gap: 13px; font-size: 14px; }
.jf-contact div { display: flex; gap: 12px; align-items: flex-start; } .jf-contact i { color: var(--gold-400); font-size: 16px; margin-top: 2px; }
.jf-stats { border-top: 1px solid rgba(231, 207, 122, .2); border-bottom: 1px solid rgba(231, 207, 122, .2); padding: 22px 0; }
.jf-stats .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 44px; }
.jf-stats .lbl { color: var(--gold-300); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.jf-stats .it { text-align: center; } .jf-stats .it b { display: block; font-family: var(--font-serif); font-size: 1.6rem; color: #fff; line-height: 1; }
.jf-stats .it span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8d9bc4; }
.jf-bottom { padding: 22px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: 13.5px; }
.jf-bottom b { color: var(--gold-300); }
.jf-social { display: flex; gap: 8px; }
.jf-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(231, 207, 122, .4); display: flex; align-items: center; justify-content: center; color: var(--gold-300); text-decoration: none; transition: all .2s; }
.jf-social a:hover { background: var(--gold-500); color: var(--navy-950); }

.back-to-top { position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px; border-radius: 50%; background: var(--navy-800); color: var(--gold-300); border: 2px solid var(--gold-500); display: flex; align-items: center; justify-content: center; font-size: 18px; text-decoration: none; z-index: 999; box-shadow: 0 8px 20px rgba(7, 18, 48, .35); transition: all .25s ease; }
.back-to-top:hover { background: var(--gold-500); color: var(--navy-950); transform: translateY(-4px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .kpi:nth-child(2) { border-right: 0; } }
@media (max-width: 991px) {
    .about { grid-template-columns: 1fr; gap: 40px; } .about-badge { right: 0; }
    .nw-grid, .ngrid, .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hh-body { min-height: 0; padding-bottom: 160px; }
    .hh-stats .wrap { grid-template-columns: repeat(3, 1fr); } .hh-stat { padding: 16px 14px; gap: 12px; } .hh-stat .ico { width: 44px; height: 44px; flex: 0 0 auto; } .hh-stat .n { font-size: 1.6rem; }
    .hh-pg { bottom: auto; top: calc(var(--head-h) + 6px); }
    .status-pair { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    :root { --head-h: 84px; --header-h: 84px; }
    .top-bar { display: none; }
    #header.jh-header { top: 0 !important; height: 84px; }
    .ph { padding-top: calc(var(--head-h) + 28px); padding-bottom: 38px; } .ph-medal { width: 52px; height: 52px; font-size: 23px; } .ph .wm { display: none; }
    .hh-body { padding-top: calc(var(--head-h) + 28px); padding-bottom: 160px; }
    .hh-search { flex-wrap: wrap; } .hh-search .fld { flex: 1 1 100%; } .hh-search select { max-width: none; flex: 1; border-left: 0; border-top: 1px solid var(--line); height: 46px; } .hh-search button { height: 46px; flex: 0 0 auto; }
    .sec { padding: 60px 0; } .sec-head { margin-bottom: 36px; }
    .jf-main { padding: 44px 0 28px; }
}
@media (max-width: 575px) {
    .hh-body { padding-bottom: 270px; } .hh-stats .wrap { grid-template-columns: 1fr; } .hh-stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 18px; } .hh-stat:last-child { border-bottom: 0; }
    .tgrid, .nw-grid, .ngrid, .pgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .kpis { grid-template-columns: 1fr 1fr; } .kpi { border-right: 0 !important; } .jf-bottom { justify-content: center; text-align: center; }
    .ph-main { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .jl-beam, .jl-panL, .jl-panR, .jl-disc, .jl-disc.mid::after, .jl-disc.mid::before, .jl-trio::after, .jl-ripple, .jl-dust i, .jl-lightcone, .jl-half { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- Kartu halaman & tipografi isi (halaman profil / tentang) ---------- */
.page-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 42px 46px; position: relative; }
.page-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-600)); border-radius: 12px 12px 0 0; }
.prose-j { font-size: 17px; line-height: 1.85; color: #334155; overflow-wrap: anywhere; }
.prose-j > *:first-child { margin-top: 0; }
.prose-j p { margin: 0 0 1.25rem; }
.prose-j h1, .prose-j h2, .prose-j h3, .prose-j h4, .prose-j h5, .prose-j h6 { color: var(--navy-800) !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 2rem 0 .8rem !important; }
.prose-j h1 { font-size: 1.9rem !important; } .prose-j h2 { font-size: 1.6rem !important; } .prose-j h3 { font-size: 1.35rem !important; } .prose-j h4, .prose-j h5, .prose-j h6 { font-size: 1.12rem !important; }
.prose-j h1 *, .prose-j h2 *, .prose-j h3 *, .prose-j h4 * { color: inherit !important; font-size: inherit !important; }
.prose-j ul, .prose-j ol { margin: 0 0 1.25rem; padding-left: 1.6rem; } .prose-j ul { list-style: disc; } .prose-j ol { list-style: decimal; }
.prose-j li { margin-bottom: .35rem; }
.prose-j a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; } .prose-j a:hover { color: var(--gold-700); }
.prose-j blockquote { margin: 1.5rem 0; padding: .9rem 1.2rem; border-left: 4px solid var(--gold-500); background: var(--gold-100); color: #475569; }
.prose-j img { display: block; max-width: 100%; height: auto !important; border-radius: 8px; margin: 1.5rem auto; }
.prose-j table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 15px; }
.prose-j th, .prose-j td { border: 1px solid var(--line); padding: 8px 12px; } .prose-j th { background: var(--paper-2); }
.prose-j iframe, .prose-j video { max-width: 100%; border-radius: 8px; }
@media (max-width: 768px) { .page-card { padding: 26px 20px; } .prose-j { font-size: 16px; } }

/* ---------- Gaya gambar (Studio) ---------- */
[data-img] { transform: scale(var(--zoom, 1)); filter: blur(var(--blur, 0px)); transform-origin: var(--pos, 50% 50%); will-change: transform; }
div[data-img] { background-position: var(--pos, center); background-size: var(--fit, cover); background-repeat: no-repeat; }
img[data-img] { object-position: var(--pos, center); object-fit: var(--fit, cover); }
[data-anim="zoom"] { animation: siZoom 24s ease-in-out infinite alternate; }
[data-anim="pan"] { animation: siPan 30s ease-in-out infinite alternate; }
@keyframes siZoom { from { transform: scale(var(--zoom, 1)); } to { transform: scale(calc(var(--zoom, 1) * 1.14)); } }
@keyframes siPan { from { transform: scale(calc(var(--zoom, 1) * 1.1)) translateX(-2.5%); } to { transform: scale(calc(var(--zoom, 1) * 1.1)) translateX(2.5%); } }
@media (prefers-reduced-motion: reduce) { [data-anim] { animation: none !important; } }
/* ---------- Gambar bebas (Studio) ---------- */
.hh, .jf, .about-img, .hh-arch { isolation: isolate; }
img.jl-lay.jl-lay { position: absolute; right: auto; left: var(--x, 50%); top: var(--t, 50%); bottom: var(--b, auto); width: var(--w, 30%); max-width: none; height: auto; object-fit: fill; transform: translate(-50%, var(--ty, -50%)) rotate(var(--r, 0deg)); opacity: var(--op, 1); border-radius: var(--rd, 0); box-shadow: var(--sh, none); pointer-events: none; user-select: none; z-index: 20; }
img.jl-lay.nyatu { z-index: var(--nz, -1); }
.hh img.jl-lay.nyatu { --nz: 2; } .about-img img.jl-lay.nyatu, .hh-arch img.jl-lay.nyatu, .jf img.jl-lay.nyatu { --nz: 0; }
.jf-main, .jf-stats, .jf > .container { position: relative; z-index: 1; }
img.jl-lay[data-la="float"] { animation: jlFloat 5s ease-in-out infinite; }
img.jl-lay[data-la="pulse"] { animation: jlPulse 3.6s ease-in-out infinite; }
img.jl-lay[data-la="sway"] { animation: jlSway 6s ease-in-out infinite; }
@keyframes jlFloat { 0%, 100% { transform: translate(-50%, var(--ty, -50%)) rotate(var(--r, 0deg)); } 50% { transform: translate(-50%, calc(var(--ty, -50%) - 14px)) rotate(var(--r, 0deg)); } }
@keyframes jlPulse { 0%, 100% { transform: translate(-50%, var(--ty, -50%)) rotate(var(--r, 0deg)) scale(1); } 50% { transform: translate(-50%, var(--ty, -50%)) rotate(var(--r, 0deg)) scale(1.06); } }
@keyframes jlSway { 0%, 100% { transform: translate(-50%, var(--ty, -50%)) rotate(calc(var(--r, 0deg) - 4deg)); } 50% { transform: translate(-50%, var(--ty, -50%)) rotate(calc(var(--r, 0deg) + 4deg)); } }
@media (max-width: 575px) { .jl-nohp { display: none; } }
@media (prefers-reduced-motion: reduce) { .jl-lay { animation: none !important; } }

/* Dropdown kustom (menggantikan tampilan bawaan browser) */
.jsel { position: relative; flex: 0 0 auto; display: flex; align-items: stretch; border-left: 1px solid var(--line); }
.jsel select { display: none; }
.jsel-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 170px; max-width: 230px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--navy-800); cursor: pointer; border-radius: 8px; }
.jsel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsel-btn .jsel-ch { color: var(--gold-600); transition: transform .2s; flex: 0 0 auto; }
.jsel.open .jsel-btn .jsel-ch { transform: rotate(180deg); }
.jsel-btn:hover, .jsel.open .jsel-btn { background: var(--gold-100, #faf3d9); }
.jsel-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.jsel-list { position: absolute; left: 0; top: calc(100% + 10px); min-width: 100%; width: max-content; max-width: 320px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line, #e3e7ef); border-radius: 12px; box-shadow: 0 18px 44px rgba(7, 18, 48, .28); z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; max-height: 300px; overflow-y: auto; }
.jsel.open .jsel-list { opacity: 1; visibility: visible; transform: none; }
.jsel-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--navy-800); cursor: pointer; white-space: nowrap; }
.jsel-list li .jsel-ck { color: var(--gold-600); opacity: 0; flex: 0 0 auto; }
.jsel-list li:hover, .jsel-list li.hl { background: var(--gold-100, #faf3d9); }
.jsel-list li[aria-selected="true"] { background: var(--navy-800); color: #fff; } .jsel-list li[aria-selected="true"] .jsel-ck { opacity: 1; color: var(--gold-300, #e7cf7a); }
@media (max-width: 768px) { .jsel { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--line); height: 46px; } .jsel-btn { flex: 1; max-width: none; } .jsel-list { width: 100%; max-width: none; } }
.hh-search .jsel .jsel-btn { background: transparent; color: var(--navy-800); padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 700; height: auto; flex: 0 1 auto; }
.hh-search .jsel .jsel-btn:hover, .hh-search .jsel.open .jsel-btn { background: var(--gold-100, #faf3d9); color: var(--navy-800); }
.hh-search .jsel { margin: 0 4px; }
@media (max-width: 768px) { .hh-search .jsel { margin: 0; } .hh-search .jsel .jsel-btn { flex: 1; width: 100%; height: 46px; } }
.jsel.up .jsel-list { top: auto; bottom: calc(100% + 10px); transform: translateY(6px); } .jsel.up.open .jsel-list { transform: none; }
img.jl-lay.jl-off { opacity: .28 !important; outline: 2px dashed #c9a227; outline-offset: 2px; }
.hh-grid.one { grid-template-columns: minmax(0, 1fr); }
.about.one { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0 auto; }
.sec-off { opacity: .32; outline: 3px dashed #c9a227; outline-offset: 4px; }
body { position: relative; }
.jl-pw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 30; }
.jl-pw img.jl-lay { z-index: 1; }
img.jl-lay.jl-lay { aspect-ratio: var(--ar, auto); }

/* ---------- Animasi gambar bebas (loop + masuk) ---------- */
img.jl-lay.jl-lay { --base: translate(-50%, var(--ty, -50%)) rotate(var(--r, 0deg)); transform: var(--base); animation: var(--ain, none), var(--alo, none); }
img.jl-lay[data-la="float"] { --alo: jlFloat 5s ease-in-out infinite; }
img.jl-lay[data-la="pulse"] { --alo: jlPulse 3.2s ease-in-out infinite; }
img.jl-lay[data-la="sway"] { --alo: jlSway 5.5s ease-in-out infinite; }
img.jl-lay[data-la="spin"] { --alo: jlSpin 14s linear infinite; }
img.jl-lay[data-la="bounce"] { --alo: jlBounce 1.8s cubic-bezier(.3, 0, .4, 1) infinite; }
img.jl-lay[data-la="swing"] { --alo: jlSwing 3.2s ease-in-out infinite; }
img.jl-lay[data-la="shake"] { --alo: jlShake 1.1s ease-in-out infinite; }
img.jl-lay[data-la="wobble"] { --alo: jlWobble 2.6s ease-in-out infinite; }
img.jl-lay[data-la="tada"] { --alo: jlTada 3.4s ease-in-out infinite; }
img.jl-lay[data-la="heartbeat"] { --alo: jlHeart 1.5s ease-in-out infinite; }
img.jl-lay[data-la="drift"] { --alo: jlDrift 7s ease-in-out infinite; }
img.jl-lay[data-la="flip"] { --alo: jlFlip 5s ease-in-out infinite; }
img.jl-lay[data-la="jelly"] { --alo: jlJelly 2.4s ease-in-out infinite; }
img.jl-lay[data-la="glow"] { --alo: jlGlow 2.8s ease-in-out infinite; }
img.jl-lay[data-la="blink"] { --alo: jlBlink 2.2s ease-in-out infinite; }
img.jl-lay[data-la="breathe"] { --alo: jlBreathe 7s ease-in-out infinite; }
img.jl-lay[data-la="orbit"] { --alo: jlOrbit 6s linear infinite; }
img.jl-lay[data-la="wave"] { --alo: jlWave 3s ease-in-out infinite; }
img.jl-lay[data-la="zigzag"] { --alo: jlZig 4s ease-in-out infinite; }
img.jl-lay[data-la="rubber"] { --alo: jlRubber 2.8s ease-in-out infinite; }
img.jl-lay[data-la="flash"] { --alo: jlFlash 1.6s steps(2, jump-none) infinite; }
img.jl-lay[data-in="fade"] { --ain: jlInFade 1s ease both; }
img.jl-lay[data-in="kiri"] { --ain: jlInKiri 1s cubic-bezier(.2, .8, .2, 1) both; }
img.jl-lay[data-in="kanan"] { --ain: jlInKanan 1s cubic-bezier(.2, .8, .2, 1) both; }
img.jl-lay[data-in="atas"] { --ain: jlInAtas 1s cubic-bezier(.2, .8, .2, 1) both; }
img.jl-lay[data-in="bawah"] { --ain: jlInBawah 1s cubic-bezier(.2, .8, .2, 1) both; }
img.jl-lay[data-in="zoom"] { --ain: jlInZoom .9s cubic-bezier(.2, .9, .3, 1.2) both; }
img.jl-lay[data-in="putar"] { --ain: jlInPutar 1.1s cubic-bezier(.2, .8, .2, 1) both; }
img.jl-lay[data-in="pantul"] { --ain: jlInPantul 1.2s ease-out both; }
@keyframes jlFloat { 0%, 100% { transform: var(--base); } 50% { transform: var(--base) translateY(-14px); } }
@keyframes jlPulse { 0%, 100% { transform: var(--base) scale(1); } 50% { transform: var(--base) scale(1.08); } }
@keyframes jlSway { 0%, 100% { transform: var(--base) rotate(-4deg); } 50% { transform: var(--base) rotate(4deg); } }
@keyframes jlSpin { to { transform: var(--base) rotate(360deg); } }
@keyframes jlBounce { 0%, 100% { transform: var(--base) translateY(0); } 50% { transform: var(--base) translateY(-34px); } }
@keyframes jlSwing { 0%, 100% { transform: var(--base) rotate(-14deg); } 50% { transform: var(--base) rotate(14deg); } }
@keyframes jlShake { 0%, 100% { transform: var(--base); } 20% { transform: var(--base) translateX(-7px); } 40% { transform: var(--base) translateX(7px); } 60% { transform: var(--base) translateX(-5px); } 80% { transform: var(--base) translateX(5px); } }
@keyframes jlWobble { 0%, 100% { transform: var(--base); } 15% { transform: var(--base) translateX(-8%) rotate(-6deg); } 45% { transform: var(--base) translateX(6%) rotate(4deg); } 75% { transform: var(--base) translateX(-3%) rotate(-2deg); } }
@keyframes jlTada { 0%, 55%, 100% { transform: var(--base) scale(1); } 10%, 20% { transform: var(--base) scale(.9) rotate(-4deg); } 30%, 50% { transform: var(--base) scale(1.12) rotate(4deg); } 40% { transform: var(--base) scale(1.12) rotate(-4deg); } }
@keyframes jlHeart { 0%, 40%, 80%, 100% { transform: var(--base) scale(1); } 20% { transform: var(--base) scale(1.16); } 60% { transform: var(--base) scale(1.1); } }
@keyframes jlDrift { 0%, 100% { transform: var(--base) translateX(-26px); } 50% { transform: var(--base) translateX(26px); } }
@keyframes jlFlip { 0%, 40% { transform: var(--base) perspective(700px) rotateY(0); } 70%, 100% { transform: var(--base) perspective(700px) rotateY(360deg); } }
@keyframes jlJelly { 0%, 100% { transform: var(--base) scale(1, 1); } 25% { transform: var(--base) scale(1.14, .88); } 50% { transform: var(--base) scale(.9, 1.1); } 75% { transform: var(--base) scale(1.06, .96); } }
@keyframes jlGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(231, 207, 122, 0)); } 50% { filter: drop-shadow(0 0 22px rgba(231, 207, 122, .95)) brightness(1.12); } }
@keyframes jlBlink { 0%, 100% { opacity: var(--op, 1); } 50% { opacity: .12; } }
@keyframes jlBreathe { 0%, 100% { transform: var(--base) scale(1); } 50% { transform: var(--base) scale(1.14); } }
@keyframes jlOrbit { 0% { transform: var(--base) translate(0, -16px); } 25% { transform: var(--base) translate(16px, 0); } 50% { transform: var(--base) translate(0, 16px); } 75% { transform: var(--base) translate(-16px, 0); } 100% { transform: var(--base) translate(0, -16px); } }
@keyframes jlWave { 0%, 100% { transform: var(--base) translateY(0) rotate(-3deg); } 50% { transform: var(--base) translateY(-10px) rotate(3deg); } }
@keyframes jlZig { 0%, 100% { transform: var(--base) translate(-16px, 6px); } 25% { transform: var(--base) translate(0, -8px); } 50% { transform: var(--base) translate(16px, 6px); } 75% { transform: var(--base) translate(0, -8px); } }
@keyframes jlRubber { 0%, 100% { transform: var(--base) scale(1, 1); } 30% { transform: var(--base) scale(1.25, .75); } 40% { transform: var(--base) scale(.75, 1.25); } 50% { transform: var(--base) scale(1.15, .85); } 65% { transform: var(--base) scale(.95, 1.05); } }
@keyframes jlFlash { 0%, 100% { opacity: var(--op, 1); } 50% { opacity: 0; } }
@keyframes jlInFade { from { opacity: 0; } }
@keyframes jlInKiri { from { opacity: 0; translate: -110px 0; } }
@keyframes jlInKanan { from { opacity: 0; translate: 110px 0; } }
@keyframes jlInAtas { from { opacity: 0; translate: 0 -110px; } }
@keyframes jlInBawah { from { opacity: 0; translate: 0 110px; } }
@keyframes jlInZoom { from { opacity: 0; scale: .2; } }
@keyframes jlInPutar { from { opacity: 0; rotate: -220deg; scale: .3; } }
@keyframes jlInPantul { 0% { opacity: 0; translate: 0 -160px; } 55% { opacity: 1; translate: 0 22px; } 75% { translate: 0 -10px; } 100% { translate: 0 0; } }

/* ---------- Animasi gambar slot (tambahan) ---------- */
[data-anim="zoomout"] { animation: siZoomOut 26s ease-in-out infinite alternate; }
[data-anim="kenburns"] { animation: siKen 28s ease-in-out infinite alternate; }
[data-anim="panv"] { animation: siPanV 30s ease-in-out infinite alternate; }
[data-anim="breathe"] { animation: siBreathe 7s ease-in-out infinite; }
[data-anim="float"] { animation: siFloat 6s ease-in-out infinite; }
[data-anim="sway"] { animation: siSway 8s ease-in-out infinite; }
[data-anim="pulse"] { animation: siPulse 3.4s ease-in-out infinite; }
[data-anim="drift"] { animation: siDrift 12s ease-in-out infinite; }
[data-anim="shimmer"] { animation: siShimmer 4.5s ease-in-out infinite; }
[data-anim="tilt"] { animation: siTilt 9s ease-in-out infinite; }
[data-anim="spin"] { animation: siSpin 90s linear infinite; }
@keyframes siZoomOut { from { transform: scale(calc(var(--zoom, 1) * 1.18)); } to { transform: scale(var(--zoom, 1)); } }
@keyframes siKen { from { transform: scale(var(--zoom, 1)) translate(0, 0); } to { transform: scale(calc(var(--zoom, 1) * 1.2)) translate(-3%, 2.5%); } }
@keyframes siPanV { from { transform: scale(calc(var(--zoom, 1) * 1.1)) translateY(-3%); } to { transform: scale(calc(var(--zoom, 1) * 1.1)) translateY(3%); } }
@keyframes siBreathe { 0%, 100% { transform: scale(var(--zoom, 1)); } 50% { transform: scale(calc(var(--zoom, 1) * 1.08)); } }
@keyframes siFloat { 0%, 100% { transform: scale(calc(var(--zoom, 1) * 1.08)) translateY(2%); } 50% { transform: scale(calc(var(--zoom, 1) * 1.08)) translateY(-2%); } }
@keyframes siSway { 0%, 100% { transform: scale(calc(var(--zoom, 1) * 1.1)) rotate(-1.4deg); } 50% { transform: scale(calc(var(--zoom, 1) * 1.1)) rotate(1.4deg); } }
@keyframes siPulse { 0%, 100% { transform: scale(var(--zoom, 1)); } 50% { transform: scale(calc(var(--zoom, 1) * 1.1)); } }
@keyframes siDrift { 0%, 100% { transform: scale(calc(var(--zoom, 1) * 1.12)) translateX(-3%); } 50% { transform: scale(calc(var(--zoom, 1) * 1.12)) translateX(3%); } }
@keyframes siShimmer { 0%, 100% { filter: blur(var(--blur, 0px)) brightness(1); } 50% { filter: blur(var(--blur, 0px)) brightness(1.28) saturate(1.2); } }
@keyframes siTilt { 0%, 100% { transform: scale(calc(var(--zoom, 1) * 1.06)) rotate(-.8deg) translateX(-1.5%); } 50% { transform: scale(calc(var(--zoom, 1) * 1.06)) rotate(.8deg) translateX(1.5%); } }
@keyframes siSpin { to { transform: scale(calc(var(--zoom, 1) * 1.5)) rotate(360deg); } }

/* animasi lapisan untuk tulisan */
.jl-lay.jl-txt[data-la="float"] { animation: jlFloat 5s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="pulse"] { animation: jlPulse 3.6s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="sway"] { animation: jlSway 6s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="float"] { --alo: jlFloat 5s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="pulse"] { --alo: jlPulse 3.2s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="sway"] { --alo: jlSway 5.5s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="spin"] { --alo: jlSpin 14s linear infinite; }
.jl-lay.jl-txt[data-la="bounce"] { --alo: jlBounce 1.8s cubic-bezier(.3, 0, .4, 1) infinite; }
.jl-lay.jl-txt[data-la="swing"] { --alo: jlSwing 3.2s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="shake"] { --alo: jlShake 1.1s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="wobble"] { --alo: jlWobble 2.6s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="tada"] { --alo: jlTada 3.4s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="heartbeat"] { --alo: jlHeart 1.5s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="drift"] { --alo: jlDrift 7s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="flip"] { --alo: jlFlip 5s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="jelly"] { --alo: jlJelly 2.4s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="glow"] { --alo: jlGlow 2.8s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="blink"] { --alo: jlBlink 2.2s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="breathe"] { --alo: jlBreathe 7s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="orbit"] { --alo: jlOrbit 6s linear infinite; }
.jl-lay.jl-txt[data-la="wave"] { --alo: jlWave 3s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="zigzag"] { --alo: jlZig 4s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="rubber"] { --alo: jlRubber 2.8s ease-in-out infinite; }
.jl-lay.jl-txt[data-la="flash"] { --alo: jlFlash 1.6s steps(2, jump-none) infinite; }
.jl-lay.jl-txt[data-in="fade"] { --ain: jlInFade 1s ease both; }
.jl-lay.jl-txt[data-in="kiri"] { --ain: jlInKiri 1s cubic-bezier(.2, .8, .2, 1) both; }
.jl-lay.jl-txt[data-in="kanan"] { --ain: jlInKanan 1s cubic-bezier(.2, .8, .2, 1) both; }
.jl-lay.jl-txt[data-in="atas"] { --ain: jlInAtas 1s cubic-bezier(.2, .8, .2, 1) both; }
.jl-lay.jl-txt[data-in="bawah"] { --ain: jlInBawah 1s cubic-bezier(.2, .8, .2, 1) both; }
.jl-lay.jl-txt[data-in="zoom"] { --ain: jlInZoom .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.jl-lay.jl-txt[data-in="putar"] { --ain: jlInPutar 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.jl-lay.jl-txt[data-in="pantul"] { --ain: jlInPantul 1.2s ease-out both; }
/* ---------- Tulisan Bebas ---------- */
.jl-lay.jl-txt { --base: translate(-50%, var(--ty, -50%)) rotate(var(--r, 0deg)); position: absolute; left: var(--x, 50%); top: var(--t, 50%); width: var(--w, 30%); box-sizing: border-box; display: block; margin: 0; z-index: 20; transform: var(--base); animation: var(--ain, none), var(--alo, none); pointer-events: none; text-decoration: none; font-family: var(--fam, inherit); font-size: var(--fs, 36px); font-weight: var(--fw, 700); font-style: var(--fst, normal); text-transform: var(--tt, none); text-align: var(--ta, center); letter-spacing: var(--ls, 0); line-height: var(--lh, 1.3); color: var(--tc, #fff); padding: var(--pd, 0); background: var(--bgc, transparent); border: var(--bw, 0) var(--bst, solid) var(--bc, transparent); border-radius: var(--rpx, 0); -webkit-backdrop-filter: blur(var(--kaca, 0px)); backdrop-filter: blur(var(--kaca, 0px)); box-shadow: var(--sh, none); opacity: var(--op, 1); overflow-wrap: anywhere; user-select: none; }
a.jl-lay.jl-txt { pointer-events: auto; cursor: pointer; }
.jl-lay.jl-txt .jl-t { text-decoration: var(--td, none); text-shadow: var(--ts, none); -webkit-text-stroke: var(--stw, 0) var(--stc, #000); paint-order: stroke fill; }
.jl-lay.jl-txt[data-grad="1"] .jl-t { background: linear-gradient(var(--ang, 90deg), var(--tc), var(--tc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.jl-lay.jl-txt[data-fx="ketik"] .jl-t { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: .09em solid currentColor; animation: jlType 4.5s steps(var(--n, 20), end) infinite, jlCaret .75s step-end infinite; }
.jl-lay.jl-txt[data-fx^="mq-"] { overflow: hidden; white-space: nowrap; text-align: left; }
.jl-lay.jl-txt[data-fx^="mq-"] .jl-t { display: inline-block; }
.jl-lay.jl-txt[data-fx="mq-kiri"] .jl-t { padding-left: 100%; animation: jlMqKiri var(--mqs, 12s) linear infinite; }
.jl-lay.jl-txt[data-fx="mq-kanan"] .jl-t { padding-left: 100%; animation: jlMqKanan var(--mqs, 12s) linear infinite; }
.jl-lay.jl-txt[data-fx="mq-pantul"] .jl-t { animation: jlMqPantul var(--mqs, 12s) ease-in-out infinite alternate; }
.jl-lay.jl-txt[data-fx="pelangi"] .jl-t { background: linear-gradient(90deg, #f43f5e, #f59e0b, #facc15, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: jlRain 5s linear infinite; }
.jl-lay.jl-txt[data-fx="kilau"] .jl-t { background: linear-gradient(110deg, var(--tc) 38%, #fff 50%, var(--tc) 62%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: jlShine 2.8s linear infinite; }
.jl-lay.jl-txt[data-fx="neon"] .jl-t { animation: jlNeon 2.6s ease-in-out infinite; }
.jl-lay.jl-txt[data-fx="glitch"] .jl-t { animation: jlGlitch 2.2s steps(1, end) infinite; }
.jl-lay.jl-txt[data-fx^="huruf-"] .jl-t i { display: inline-block; font-style: inherit; }
.jl-lay.jl-txt[data-fx="huruf-gelombang"] .jl-t i { animation: jlLtrWave 1.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .08s); }
.jl-lay.jl-txt[data-fx="huruf-muncul"] .jl-t i { animation: jlLtrIn 4.5s ease infinite; animation-delay: calc(var(--i, 0) * .09s); }
.jl-lay.jl-txt[data-fx="huruf-loncat"] .jl-t i { animation: jlLtrJump 1.3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .07s); }
.jl-lay.jl-txt[data-fx="garis"] .jl-t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 .12em no-repeat; padding-bottom: .12em; animation: jlUl 2.8s ease-in-out infinite alternate; }
.jl-lay.jl-txt[data-fx="sorot"] .jl-t { background: linear-gradient(transparent 58%, rgba(250, 204, 21, .85) 58%) 0 0 / 0 100% no-repeat; animation: jlMark 3s ease-in-out infinite alternate; }
@keyframes jlType { 0% { width: 0; } 55%, 85% { width: 100%; } 100% { width: 0; } }
@keyframes jlCaret { 50% { border-right-color: transparent; } }
@keyframes jlMqKiri { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes jlMqKanan { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes jlMqPantul { from { margin-left: 0; transform: translateX(0); } to { margin-left: 100%; transform: translateX(-100%); } }
@keyframes jlRain { to { background-position: 300% 0; } }
@keyframes jlShine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes jlNeon { 0%, 18%, 22%, 62%, 100% { opacity: 1; filter: brightness(1.25); } 20%, 60% { opacity: .55; filter: brightness(.8); } 70% { opacity: .85; } }
@keyframes jlGlitch { 0%, 100% { text-shadow: none; transform: none; } 20% { text-shadow: 3px 0 #f0f, -3px 0 #0ff; transform: translateX(-2px); } 40% { text-shadow: -3px 0 #f0f, 3px 0 #0ff; transform: translateX(2px); } 60% { text-shadow: 2px 2px #f0f, -2px -2px #0ff; transform: skewX(6deg); } 80% { text-shadow: none; transform: none; } }
@keyframes jlLtrWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.35em); } }
@keyframes jlLtrIn { 0% { opacity: 0; transform: translateY(.6em) scale(.6); } 18%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes jlLtrJump { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(-.6em) scale(.9, 1.15); } 40% { transform: translateY(0) scale(1.15, .85); } }
@keyframes jlUl { to { background-size: 100% .12em; } }
@keyframes jlMark { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .jl-lay.jl-txt, .jl-lay.jl-txt * { animation: none !important; } }

/* ---------- Gambar & tulisan bebas: responsif (tablet & HP) ---------- */
/* Otomatis: lebar membesar, posisi vertikal & huruf mengecil mengikuti layar. Bila pengelola mengatur manual (data-tb / data-hp2), nilai manual dipakai. */
.jl-pw img.jl-lay.jl-lay { width: min(100%, calc(var(--w, 30%) * var(--wm, 1))); top: calc(var(--t, 50%) * var(--ym, 1)); }
.jl-pw .jl-lay.jl-txt { width: min(100%, calc(var(--w, 30%) * var(--wm, 1))); top: calc(var(--t, 50%) * var(--ym, 1)); font-size: calc(var(--fs, 36px) * var(--sc, 1)); padding: calc(var(--pd, 0px) * var(--sc, 1)); border-radius: calc(var(--rpx, 0px) * var(--sc, 1)); letter-spacing: calc(var(--ls, 0px) * var(--sc, 1)); }
@media (max-width: 991px) { .jl-pw .jl-lay { --wm: 1.3; --ym: .85; --sc: .8; } }
@media (max-width: 575px) { .jl-pw .jl-lay { --wm: 2; --ym: .6; --sc: .55; } }
@media (min-width: 576px) and (max-width: 991px) {
    .jl-pw .jl-lay.jl-lay[data-tb] { left: var(--xtb); top: var(--ttb); width: var(--wtb); }
    .jl-pw .jl-lay.jl-lay[data-stb] { --sc: var(--stb); }
}
@media (max-width: 575px) {
    .jl-pw .jl-lay.jl-lay[data-hp2] { left: var(--xhp); top: var(--thp); width: var(--whp); }
    .jl-pw .jl-lay.jl-lay[data-shp] { --sc: var(--shp); }
    .jl-pw .jl-lay.jl-txt[data-fx^="mq-"] { font-size: calc(var(--fs, 36px) * var(--sc, 1)); }
}

/* ---------- Kabar dari UNP ---------- */
.ku-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 30px; padding: 6px; width: fit-content; max-width: 100%; background: #f3f5fa; border-radius: 99px; }
.ku-tab { border: 0; background: transparent; color: var(--navy-800); font-weight: 800; font-size: 14px; padding: 10px 20px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .18s; }
.ku-tab i { color: var(--gold-600); } .ku-tab:hover { background: #fff; }
.ku-tab.on { background: var(--navy-800); color: #fff; box-shadow: 0 6px 16px rgba(11, 27, 69, .28); } .ku-tab.on i { color: var(--gold-300); }
.ku-panel { display: none; } .ku-panel.on { display: block; animation: kuIn .35s ease; }
@keyframes kuIn { from { opacity: 0; transform: translateY(8px); } }
.ku-grid { display: grid; gap: 18px; }
.ku-poster { grid-template-columns: repeat(auto-fit, minmax(190px, 240px)); justify-content: center; } .ku-cover { grid-template-columns: repeat(auto-fit, minmax(170px, 220px)); justify-content: center; }
.ku-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, #e3e7ef); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 6px rgba(15, 23, 42, .05); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ku-card:hover { transform: translateY(-5px); border-color: var(--gold-500); box-shadow: 0 16px 34px rgba(11, 27, 69, .18); }
.ku-img { display: flex; align-items: center; justify-content: center; background: #f1f3f9; overflow: hidden; color: var(--gold-600); font-size: 40px; }
.ku-poster .ku-img { aspect-ratio: 4 / 5; } .ku-cover .ku-img { aspect-ratio: 3 / 4; }
.ku-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; } .ku-card:hover .ku-img img { transform: scale(1.05); }
.ku-body { display: flex; flex-direction: column; flex: 1; padding: 13px 14px 14px; } .ku-body b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--navy-800); font-weight: 800; min-height: calc(1.45em * 3); } .ku-body small { display: block; margin-top: auto; padding-top: 9px; font-size: 12px; color: var(--gold-700); font-weight: 700; }
.ku-cover .ku-body { text-align: center; padding: 11px 8px 13px; } .ku-cover .ku-body b { min-height: 0; -webkit-line-clamp: 2; display: block; white-space: nowrap; text-overflow: ellipsis; }
.ku-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ku-row { display: flex; gap: 16px; padding: 14px; background: #fff; border: 1px solid var(--line, #e3e7ef); border-radius: 14px; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ku-row:hover { transform: translateY(-3px); border-color: var(--gold-500); box-shadow: 0 12px 28px rgba(11, 27, 69, .14); }
.ku-th { flex: 0 0 132px; height: 100px; border-radius: 10px; overflow: hidden; background: #f1f3f9; display: flex; align-items: center; justify-content: center; color: var(--gold-600); font-size: 28px; } .ku-th img { width: 100%; height: 100%; object-fit: cover; }
.ku-tx { min-width: 0; display: block; } .ku-tx b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.4; color: var(--navy-800); font-weight: 800; }
.ku-tx em { display: block; font-style: normal; margin: 5px 0 4px; font-size: 12px; font-weight: 700; color: var(--gold-700); } .ku-tx span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--muted, #64748b); line-height: 1.5; }
.ku-panel > .text-center { margin-top: 28px !important; } .ku-sumber { text-align: center; margin: 22px 0 0; font-size: 12.5px; color: var(--muted, #64748b); } .ku-sumber a { color: var(--navy-700); font-weight: 700; }
@media (max-width: 991px) { .ku-list { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .ku-poster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ku-cover { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ku-th { flex-basis: 104px; height: 84px; } .ku-tab { padding: 9px 14px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .ku-panel.on { animation: none; } .ku-card, .ku-row { transition: none; } }

/* ---------- Halaman Kabar Kampus (baca di dalam JDIH) ---------- */
.kb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.kb-artikel { background: #fff; border: 1px solid var(--line, #e3e7ef); border-radius: 16px; padding: 30px 34px 26px; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); min-width: 0; }
.kb-foto { margin: 0 0 22px; } .kb-foto img, .kb-cover img { width: 100%; height: auto; border-radius: 12px; display: block; }
.kb-cover { max-width: 420px; margin: 0 auto 18px; }
.kb-konten { font-size: 16.5px; line-height: 1.85; color: #334155; overflow-wrap: anywhere; }
.kb-konten p { margin: 0 0 1.15rem; } .kb-konten img { max-width: 100%; height: auto !important; border-radius: 10px; display: block; margin: 1rem auto; }
.kb-konten h1, .kb-konten h2, .kb-konten h3, .kb-konten h4 { color: var(--navy-800); font-weight: 800; line-height: 1.35; margin: 1.8rem 0 .7rem; } .kb-konten a { color: var(--navy-700); text-decoration: underline; text-decoration-color: var(--gold-500); }
.kb-konten ul, .kb-konten ol { padding-left: 1.5rem; margin-bottom: 1.15rem; } .kb-konten blockquote { border-left: 4px solid var(--gold-500); background: #faf6e8; margin: 1.2rem 0; padding: 12px 18px; border-radius: 0 10px 10px 0; }
.kb-konten table { width: 100%; border-collapse: collapse; font-size: 15px; } .kb-konten td, .kb-konten th { border: 1px solid #dde1e8; padding: 8px 10px; }
.kb-pdf { border: 1px solid var(--line, #e3e7ef); border-radius: 12px; overflow: hidden; background: #f1f3f9; } .kb-pdf iframe { display: block; width: 100%; height: min(82vh, 860px); border: 0; }
.kb-aksi { text-align: center; margin: 18px 0 4px; } .kb-info { text-align: center; color: var(--muted, #64748b); font-size: 14px; }
.kb-sumber { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; padding: 16px 18px; background: #faf6e8; border: 1px solid #ecdca0; border-radius: 12px; }
.kb-sumber > i { font-size: 26px; color: var(--gold-600); } .kb-sumber div { flex: 1; min-width: 200px; } .kb-sumber b { display: block; color: var(--navy-800); font-size: 14px; } .kb-sumber span { display: block; font-size: 12.8px; color: #6b6a55; margin-top: 2px; }
.kb-asli { font-size: 13px; font-weight: 800; color: var(--navy-800); text-decoration: none; border: 1.5px solid var(--navy-800); padding: 8px 14px; border-radius: 99px; white-space: nowrap; } .kb-asli:hover { background: var(--navy-800); color: #fff; }
.kb-nav { margin-top: 20px; } .kb-nav a { font-weight: 800; font-size: 14px; color: var(--navy-700); text-decoration: none; }
.kb-side { background: #fff; border: 1px solid var(--line, #e3e7ef); border-radius: 16px; padding: 20px 18px; position: sticky; top: calc(var(--head-h, 124px) + 12px); box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.kb-side h3 { font-size: 15px; font-weight: 800; color: var(--navy-800); margin: 0 0 14px; display: flex; gap: 8px; align-items: center; } .kb-side h3 i { color: var(--gold-600); }
.kb-item { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid #eef0f6; text-decoration: none; color: inherit; } .kb-item:hover .kb-tt b { color: var(--gold-700); }
.kb-th { flex: 0 0 64px; height: 64px; border-radius: 9px; overflow: hidden; background: #f1f3f9; display: flex; align-items: center; justify-content: center; color: var(--gold-600); } .kb-th img { width: 100%; height: 100%; object-fit: cover; }
.kb-tt b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.2px; line-height: 1.4; color: var(--navy-800); font-weight: 800; } .kb-tt small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--gold-700); font-weight: 700; }
a.ku-tab { text-decoration: none; }
@media (max-width: 991px) { .kb-layout { grid-template-columns: 1fr; } .kb-side { position: static; } .kb-artikel { padding: 22px 20px; } }

/* Kolom cari di HP: tersusun rapi (cari, jenis, tombol selebar kotak) */
@media (max-width: 768px) { .hh-search { padding: 8px; gap: 6px; border-radius: 14px; } .hh-search .fld { flex: 1 1 100%; padding: 0 10px; } .hh-search input { height: 48px; } .hh-search .jsel { flex: 1 1 100%; height: 46px; border-top: 1px solid var(--line); } .hh-search .jsel .jsel-btn { padding: 0 10px; } .hh-search > button[type="submit"], .hh-search > button { flex: 1 1 100%; width: 100%; height: 48px; margin-top: 2px; font-size: 15px; border-radius: 10px; } }

/* Tampil / sembunyi & tata letak per perangkat: PC >=1600, Laptop 992-1599, Tablet 576-991, HP <=575 */
@media (min-width: 1600px) { .jl-lay.jl-h-pc { display: none !important; } }
@media (min-width: 992px) and (max-width: 1599px) { .jl-lay.jl-h-lp { display: none !important; } .jl-pw .jl-lay.jl-lay[data-lp] { left: var(--xlp); top: var(--tlp); width: min(100%, var(--wlp)); } .jl-pw .jl-lay.jl-lay[data-slp] { --sc: var(--slp); } }
@media (min-width: 576px) and (max-width: 991px) { .jl-lay.jl-h-tb { display: none !important; } }
@media (max-width: 575px) { .jl-lay.jl-h-hp { display: none !important; } }