/* Tema katalog Perpustakaan IIQ Jakarta — /katalog/
   Mandiri (tanpa Bootstrap/jQuery). Memakai properti logis (inline/block) agar otomatis benar untuk RTL (Arab). */

:root{
  --pri:#0b3d2e; --pri-2:#11664c; --pri-3:#e7f1ed;
  --acc:#c79a3a; --acc-2:#f3e6c6;
  --ink:#14211c; --muted:#5a6a63; --faint:#8a9891; --line:#e2e8e4;
  --bg:#f5f6f2; --card:#fff;
  --ok:#137a4b; --ok-bg:#e3f4ea; --no:#b3261e; --no-bg:#fbe9e7; --dig:#1d4f91; --dig-bg:#e6eef9;
  --r:14px; --r-sm:9px; --shadow:0 1px 2px rgba(16,32,24,.05),0 4px 14px rgba(16,32,24,.06);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px;
}
:root:lang(ar){--font:"IBM Plex Sans Arabic","Plus Jakarta Sans",system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:15.5px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--pri-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0;letter-spacing:-.01em}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{letter-spacing:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}
.op-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.op-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.op-skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--pri);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.op-skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Tombol & lencana ---------- */
.op-btn{display:inline-flex;align-items:center;gap:.45em;border:1px solid transparent;border-radius:999px;padding:.5em 1.05em;font-weight:600;font-size:.92rem;cursor:pointer;background:var(--pri);color:#fff;text-decoration:none!important;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.op-btn:hover{background:var(--pri-2)}
.op-btn-ghost{background:transparent;color:var(--pri);border-color:var(--line)}
.op-btn-ghost:hover{background:var(--pri-3);border-color:var(--pri-3)}
.op-btn-acc{background:var(--acc);color:#2b1f05}
.op-btn-acc:hover{background:#d7ac4f}
.op-btn-sm{padding:.35em .8em;font-size:.84rem}
.op-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.2em .6em;border-radius:6px;background:var(--pri-3);color:var(--pri)}
:lang(ar) .op-badge{text-transform:none;letter-spacing:0}
.op-badge-soft{background:#eef0ec;color:var(--muted)}

/* ---------- Header ---------- */
.op-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.op-header.scrolled{box-shadow:0 4px 18px rgba(16,32,24,.08)}
.op-header-in{display:flex;align-items:center;gap:20px;min-height:68px}
.op-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none!important;flex-shrink:0}
.op-brand img{width:44px;height:44px}
.op-brand b{display:block;font-size:1.02rem;font-weight:800;color:var(--pri);line-height:1.15}
.op-brand small{display:block;font-size:.74rem;color:var(--muted);line-height:1.2;max-width:230px}
.op-header-search{flex:1;max-width:560px}
.op-header-act{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.op-burger{display:none;border:0;background:var(--pri-3);color:var(--pri);width:42px;height:42px;border-radius:10px;font-size:1.4rem;cursor:pointer}

.op-nav{background:var(--pri)}
.op-nav-in{display:flex;align-items:center;gap:2px;min-height:46px;flex-wrap:wrap}
.op-nav a,.op-nav summary{color:#e3efe9;font-weight:600;font-size:.9rem;padding:.55em .85em;border-radius:8px;text-decoration:none!important;display:inline-flex;align-items:center;gap:.35em}
.op-nav a:hover,.op-nav summary:hover{background:rgba(255,255,255,.1);color:#fff}
.op-nav a[aria-current]{color:#fff;box-shadow:inset 0 -3px 0 var(--acc);border-radius:0}
.op-nav .op-nav-member{display:none}
.op-nav summary i{font-size:.7rem}

/* Dropdown berbasis <details> */
.op-dd{position:relative}
.op-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;user-select:none}
.op-dd>summary::-webkit-details-marker{display:none}
.op-header-act .op-dd>summary{border:1px solid var(--line);border-radius:999px;padding:.42em .85em;font-weight:600;font-size:.88rem;color:var(--pri)}
.op-header-act .op-dd>summary:hover{background:var(--pri-3)}
.op-dd-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(16,32,24,.16);padding:6px;z-index:60}
.op-nav .op-dd-menu{inset-inline-end:auto;inset-inline-start:0}
.op-dd-menu a{display:flex!important;align-items:center;gap:.5em;color:var(--ink)!important;padding:.55em .8em!important;border-radius:8px;font-weight:500!important;font-size:.9rem;box-shadow:none!important}
.op-dd-menu a:hover{background:var(--pri-3)!important}
.op-dd-menu a[aria-current]{background:var(--pri-3);color:var(--pri)!important;font-weight:700!important}

/* ---------- Kotak pencarian ---------- */
.op-search{display:flex;align-items:stretch;background:#fff;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.op-search:focus-within{border-color:var(--pri-2);box-shadow:0 0 0 4px rgba(17,102,76,.12)}
.op-search-what{border:0;background:#f3f5f2;padding-inline:14px 8px;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer;border-inline-end:1px solid var(--line);outline:none;max-width:130px}
.op-search input{flex:1;min-width:0;border:0;outline:none;padding:.62em 1em;background:transparent;font-size:.95rem}
.op-search button{border:0;background:var(--pri);color:#fff;padding-inline:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.4em}
.op-search button:hover{background:var(--pri-2)}
.op-search-lg{border:0;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.op-search-lg .op-search-what{font-size:.95rem;padding-inline:20px 10px;max-width:160px}
.op-search-lg input{font-size:1.1rem;padding:1.05em 1.1em}
.op-search-lg button{background:var(--acc);color:#2b1f05;padding-inline:28px;font-size:1rem}
.op-search-lg button:hover{background:#d7ac4f}

/* ---------- Hero beranda ---------- */
.op-hero{position:relative;color:#fff;background:radial-gradient(1200px 500px at 85% -10%,#1b7a5b 0%,transparent 60%),linear-gradient(160deg,#0b3d2e 0%,#08281f 100%);overflow:hidden}
.op-hero::before{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M40 4l10 26 26 10-26 10-10 26-10-26L4 40l26-10z'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3C/g%3E%3C/svg%3E");background-size:80px}
.op-hero-in{position:relative;padding-block:64px 44px;text-align:center}
.op-hero h1{font-size:clamp(1.8rem,4.2vw,2.9rem);font-weight:800;max-width:780px;margin-inline:auto}
.op-hero p{color:#cfe2da;font-size:1.05rem;max-width:680px;margin:.8em auto 1.8em}
.op-hero .op-search{max-width:820px;margin-inline:auto}
.op-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.op-chips a{color:#e8f2ee;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.38em .95em;font-size:.86rem;font-weight:600;text-decoration:none!important;backdrop-filter:blur(4px);transition:background .15s}
.op-chips a:hover{background:rgba(255,255,255,.12)}
.op-chips a i{color:var(--acc)}
.op-tip{font-size:.84rem;color:#a9c7bb;margin-top:14px}
.op-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden;margin-top:40px;max-width:900px;margin-inline:auto}
.op-stats div{background:rgba(6,30,23,.55);padding:16px 12px}
.op-stats b{display:block;font-size:1.6rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.op-stats span{font-size:.82rem;color:#b9d3c8}

/* ---------- Seksi ---------- */
.op-sec{padding-block:48px}
.op-sec-alt{background:#fff;border-block:1px solid var(--line)}
.op-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.op-sec-head h2{font-size:1.45rem;font-weight:800}
.op-sec-head p{margin:.3em 0 0;color:var(--muted);font-size:.93rem}
.op-sec-head a{font-weight:700;font-size:.9rem;white-space:nowrap}

/* Kategori bidang ilmu */
.op-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.op-cat{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;color:var(--ink);text-decoration:none!important;transition:transform .15s,box-shadow .15s,border-color .15s}
.op-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfdcd5}
.op-cat i{width:40px;height:40px;border-radius:10px;background:var(--pri-3);color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.op-cat b{font-size:.95rem;line-height:1.3}
.op-cat small{color:var(--faint);font-size:.8rem}

/* Sampul */
.op-cover{position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:linear-gradient(155deg,var(--c,#0d4d3a),#0a2019);display:flex;align-items:flex-end;padding:10px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.op-cover::before{content:"";position:absolute;inset-block:0;inset-inline-start:7px;width:2px;background:rgba(255,255,255,.18)}
.op-cover span{position:relative;font-size:.72rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.op-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}

/* Kartu buku mini (grid / rak geser) */
.op-shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.op-mini{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none!important;position:relative;min-width:0}
.op-mini .op-cover{transition:transform .2s,box-shadow .2s;margin-bottom:6px}
.op-mini:hover .op-cover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.op-mini b{font-size:.88rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-mini small{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-mini-badge{position:absolute;top:8px;inset-inline-start:8px;background:rgba(11,61,46,.92);color:#fff;font-size:.7rem;font-weight:700;padding:.2em .55em;border-radius:6px;z-index:1}

/* Daftar karya ilmiah */
.op-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.op-li{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--ink);text-decoration:none!important;transition:border-color .15s,box-shadow .15s}
.op-li:hover{border-color:#cfdcd5;box-shadow:var(--shadow)}
.op-li i{font-size:1.3rem;color:var(--acc);margin-top:2px}
.op-li b{display:block;font-size:.93rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-li small{color:var(--muted);font-size:.8rem}

/* Layanan */
.op-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.op-feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.op-feat i{font-size:1.5rem;color:var(--pri-2)}
.op-feat h3{font-size:1rem;margin:.6em 0 .35em}
.op-feat p{margin:0;color:var(--muted);font-size:.88rem}

/* Berita */
.op-news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.op-news a{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none!important;transition:box-shadow .15s}
.op-news a:hover{box-shadow:var(--shadow)}
.op-news .ph{aspect-ratio:16/9;background:var(--pri-3) center/cover;display:flex;align-items:center;justify-content:center;color:var(--pri);font-size:2rem}
.op-news .tx{padding:14px 16px}
.op-news time{font-size:.78rem;color:var(--acc);font-weight:700}
.op-news b{display:block;font-size:.98rem;line-height:1.35;margin:.3em 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-news p{margin:0;color:var(--muted);font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Halaman hasil pencarian ---------- */
.op-page-head{background:#fff;border-bottom:1px solid var(--line);padding-block:22px}
.op-crumb{font-size:.84rem;color:var(--muted);margin-bottom:6px}
.op-crumb a{color:var(--muted)}
.op-page-head h1{font-size:1.45rem;font-weight:800}
.op-page-head h1 q{color:var(--pri-2)}
.op-results{display:grid;grid-template-columns:270px 1fr;gap:28px;padding-block:26px 56px;align-items:start}
.op-facets{position:sticky;top:130px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 0}
.op-facets>summary{display:none}
.op-fgroup{padding:12px 18px;border-bottom:1px solid var(--line)}
.op-fgroup:last-child{border-bottom:0}
.op-fgroup h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;margin-bottom:8px}
:lang(ar) .op-fgroup h2{text-transform:none;letter-spacing:0;font-size:.85rem}
.op-fgroup ul{list-style:none;margin:0;padding:0}
.op-fgroup li a{display:flex;justify-content:space-between;gap:10px;padding:.32em .5em;margin-inline:-.5em;border-radius:7px;color:var(--ink);font-size:.9rem;text-decoration:none!important}
.op-fgroup li a:hover{background:#f1f4f1}
.op-fgroup li a span{color:var(--faint);font-size:.8rem;font-variant-numeric:tabular-nums}
.op-fgroup li a[aria-current]{background:var(--pri-3);color:var(--pri);font-weight:700}
.op-fgroup li a[aria-current]::after{content:"\00d7";margin-inline-start:4px}
.op-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.op-count{color:var(--muted);font-size:.9rem}
.op-count b{color:var(--ink)}
.op-sort{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.op-sort select{border:1px solid var(--line);border-radius:999px;padding:.38em .9em;background:#fff;font-weight:600;color:var(--ink)}
.op-active{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.op-active a{display:inline-flex;align-items:center;gap:.35em;background:var(--pri-3);color:var(--pri);border-radius:999px;padding:.28em .75em;font-size:.83rem;font-weight:600;text-decoration:none!important}
.op-active a:hover{background:#d6e8e0}
.op-active a.clear{background:transparent;color:var(--muted);text-decoration:underline!important}

.op-hits{display:flex;flex-direction:column;gap:12px}
.op-hit{display:grid;grid-template-columns:88px 1fr;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:border-color .15s,box-shadow .15s}
.op-hit:hover{border-color:#cfdcd5;box-shadow:var(--shadow)}
.op-hit-cover{display:block}
.op-hit-body{min-width:0}
.op-hit-top{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.op-hit h3{font-size:1.06rem;font-weight:700;line-height:1.35}
.op-hit h3 a{color:var(--ink)}
.op-hit h3 a:hover{color:var(--pri-2)}
.op-hit-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:5px;color:var(--muted);font-size:.86rem}
.op-hit-meta i{color:var(--faint)}
.op-hit-abs{margin:.55em 0 0;color:#46544e;font-size:.87rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-hit-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.op-av{display:inline-flex;align-items:center;gap:.35em;font-size:.8rem;font-weight:700;padding:.25em .65em;border-radius:6px}
.op-av-ok{background:var(--ok-bg);color:var(--ok)}
.op-av-no{background:var(--no-bg);color:var(--no)}
.op-av-dig{background:var(--dig-bg);color:var(--dig)}
.op-av-none{background:#eef0ec;color:var(--muted)}
.op-callno{display:inline-flex;align-items:center;gap:.35em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;font-weight:600;color:var(--ink);background:var(--acc-2);padding:.22em .6em;border-radius:6px;direction:ltr}

.op-empty{text-align:center;background:var(--card);border:1px dashed #cdd6d0;border-radius:var(--r);padding:48px 20px;color:var(--muted)}
.op-empty i{font-size:2.6rem;color:#b9c6bf}
.op-empty h2{color:var(--ink);font-size:1.2rem;margin:.5em 0 .3em}
.op-empty ul{list-style:none;padding:0;margin:14px 0 0}
.op-empty li{margin:4px 0}

.op-pages ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;padding:0;margin:26px 0 0}
.op-pages a,.op-pages span{display:inline-flex;align-items:center;justify-content:center;gap:.3em;min-width:40px;height:40px;padding-inline:12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none!important}
.op-pages a:hover{border-color:var(--pri-2);color:var(--pri-2)}
.op-pages .active a{background:var(--pri);border-color:var(--pri);color:#fff}
.op-pages .disabled span{opacity:.45}
.op-pages .gap span{border:0;background:none;min-width:20px;padding:0}
[dir=rtl] .bi-chevron-left,[dir=rtl] .bi-chevron-right,[dir=rtl] .bi-arrow-right,[dir=rtl] .bi-arrow-left{display:inline-block;transform:scaleX(-1)}

/* ---------- Detail ---------- */
.op-detail{display:grid;grid-template-columns:260px 1fr;gap:36px;padding-block:30px 20px;align-items:start}
.op-detail-cover .op-cover{border-radius:12px;box-shadow:0 16px 40px rgba(16,32,24,.22);padding:16px}
.op-detail-cover .op-cover span{font-size:1rem}
.op-detail-act{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.op-detail-act .op-btn{justify-content:center}
.op-detail h1{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;margin:.35em 0 .3em}
.op-detail .op-by{font-size:1.02rem;color:var(--muted)}
.op-detail .op-by a{font-weight:700}
.op-avbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}
.op-meta{display:grid;grid-template-columns:190px 1fr;margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.op-meta dt,.op-meta dd{padding:.7em 1em;margin:0;border-bottom:1px solid var(--line);font-size:.92rem}
.op-meta dt{color:var(--muted);font-weight:600;background:#fafbf9}
.op-meta dt:nth-last-of-type(1),.op-meta dd:last-of-type{border-bottom:0}
.op-tags{display:flex;flex-wrap:wrap;gap:6px}
.op-tags a{background:var(--pri-3);color:var(--pri);border-radius:999px;padding:.2em .75em;font-size:.84rem;font-weight:600;text-decoration:none!important}
.op-tags a:hover{background:#d6e8e0}
.op-block{margin-top:28px}
.op-block h2{font-size:1.12rem;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:.5em}
.op-block h2 i{color:var(--acc)}
.op-abstract{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;color:#34423c;white-space:pre-line}
.op-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:.9rem}
.op-table th{text-align:start;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);background:#fafbf9;padding:.75em 1em;font-weight:700;border-bottom:1px solid var(--line)}
:lang(ar) .op-table th{text-transform:none;letter-spacing:0;font-size:.85rem}
.op-table td{padding:.75em 1em;border-bottom:1px solid var(--line);vertical-align:middle}
.op-table tr:last-child td{border-bottom:0}
.op-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;direction:ltr;unicode-bidi:isolate}
.op-files{display:flex;flex-direction:column;gap:8px}
.op-file{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.op-file i{font-size:1.5rem;color:#c0392b}
.op-file div{flex:1;min-width:0}
.op-file b{display:block;font-size:.9rem;word-break:break-all}
.op-file small{color:var(--muted)}
.op-cite{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.op-cite-tabs{display:flex;border-bottom:1px solid var(--line);background:#fafbf9}
.op-cite-tabs button{border:0;background:none;padding:.75em 1.1em;font-weight:700;font-size:.86rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.op-cite-tabs button[aria-selected=true]{color:var(--pri);border-bottom-color:var(--acc)}
.op-cite-body{padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.op-cite-body p{margin:0;flex:1;font-size:.92rem;direction:ltr;text-align:left}
.op-cite-dl{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px}
.op-note{background:var(--acc-2);border-radius:var(--r);padding:14px 16px;font-size:.9rem;color:#4b3b12;display:flex;gap:10px;align-items:flex-start}
.op-note i{color:var(--acc);font-size:1.1rem}
.op-toast{position:fixed;inset-inline-start:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7em 1.2em;border-radius:999px;font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:90}
[dir=rtl] .op-toast{transform:translateX(50%)}
.op-toast.show{opacity:1}

/* ---------- Jelajah ---------- */
.op-types{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.op-type{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--ink);text-decoration:none!important;font-weight:700}
.op-type:hover{border-color:#cfdcd5;box-shadow:var(--shadow)}
.op-type span{color:var(--faint);font-weight:600;font-size:.85rem;font-variant-numeric:tabular-nums}
.op-cloud{display:flex;flex-wrap:wrap;gap:8px}
.op-cloud a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.35em .9em;color:var(--ink);font-size:.88rem;text-decoration:none!important}
.op-cloud a:hover{border-color:var(--pri-2);color:var(--pri-2)}
.op-cloud a span{color:var(--faint);font-size:.78rem;margin-inline-start:4px}
.op-az{display:flex;flex-wrap:wrap;gap:6px}
.op-az a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:10px;font-weight:700;color:var(--pri);text-decoration:none!important}
.op-az a:hover{background:var(--pri);color:#fff;border-color:var(--pri)}

/* ---------- Footer ---------- */
.op-footer{background:#08281f;color:#b8cdc4;margin-top:20px;font-size:.9rem}
.op-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;padding-block:44px 30px}
.op-footer h2{color:#fff;font-size:.95rem;margin-bottom:12px}
.op-footer ul{list-style:none;margin:0;padding:0}
.op-footer li{margin:.45em 0}
.op-footer a{color:#cfe0d8}
.op-footer a:hover{color:#fff}
.op-brand-foot b{color:#fff}
.op-brand-foot small{color:#9fbcb0}
.op-foot-desc{margin:14px 0 0;color:#9fbcb0;font-size:.86rem;max-width:340px}
.op-foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:16px;font-size:.82rem;color:#88a79a}

/* ---------- Responsif ---------- */
@media (max-width:1100px){
  .op-cats{grid-template-columns:repeat(4,1fr)}
  .op-shelf{grid-template-columns:repeat(5,1fr)}
  .op-feats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .op-header-search{display:none}
  .op-burger{display:inline-flex;align-items:center;justify-content:center}
  .op-nav{display:none}
  .op-nav.open{display:block}
  .op-nav-in{flex-direction:column;align-items:stretch;padding-block:8px}
  .op-nav a,.op-nav summary{padding:.75em .6em}
  .op-nav a[aria-current]{box-shadow:inset 3px 0 0 var(--acc)}
  [dir=rtl] .op-nav a[aria-current]{box-shadow:inset -3px 0 0 var(--acc)}
  .op-nav .op-nav-member{display:flex}
  .op-nav .op-dd-menu{position:static;box-shadow:none;border:0;background:rgba(255,255,255,.06);margin:2px 0 6px}
  .op-nav .op-dd-menu a{color:#e3efe9!important}
  .op-nav .op-dd-menu a:hover{background:rgba(255,255,255,.1)!important}
  .op-results{grid-template-columns:1fr;gap:14px}
  .op-facets{position:static;padding:0}
  .op-facets>summary{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-weight:700;cursor:pointer;list-style:none}
  .op-facets>summary::-webkit-details-marker{display:none}
  .op-facets[open]>summary{border-bottom:1px solid var(--line)}
  .op-detail{grid-template-columns:1fr;gap:20px}
  .op-detail-cover{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:end}
  .op-detail-act{margin-top:0}
  .op-list{grid-template-columns:1fr}
  .op-news{grid-template-columns:1fr 1fr}
  .op-types{grid-template-columns:repeat(2,1fr)}
  .op-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  .op-wrap{padding-inline:16px}
  .op-brand small{display:none}
  .op-sm-hide{display:none!important}
  .op-hero-in{padding-block:40px 30px}
  .op-search-lg{flex-wrap:wrap;border-radius:18px}
  .op-search-lg .op-search-what{max-width:none;width:100%;border-inline-end:0;border-bottom:1px solid var(--line);padding:.7em 16px}
  .op-search-lg input{padding:.9em 1em}
  .op-search-lg button{padding-inline:18px}
  .op-search button span{display:none}
  .op-stats{grid-template-columns:repeat(2,1fr)}
  .op-cats{grid-template-columns:repeat(2,1fr)}
  .op-shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-16px;padding-inline:16px;padding-bottom:6px;scrollbar-width:none}
  .op-shelf::-webkit-scrollbar{display:none}
  .op-shelf .op-mini{flex:0 0 42%;scroll-snap-align:start}
  .op-feats,.op-news{grid-template-columns:1fr}
  .op-hit{grid-template-columns:64px 1fr;gap:12px;padding:14px}
  .op-hit h3{font-size:.98rem}
  .op-hit-abs{display:none}
  .op-meta{grid-template-columns:1fr}
  .op-meta dt{border-bottom:0;padding-bottom:.1em;background:none;font-size:.8rem}
  .op-meta dd{padding-top:.1em}
  .op-table thead{display:none}
  .op-table tr{display:block;border-bottom:1px solid var(--line);padding:.5em 0}
  .op-table tr:last-child{border-bottom:0}
  .op-table td{display:flex;justify-content:space-between;gap:12px;border:0;padding:.3em 1em}
  .op-table td::before{content:attr(data-l);color:var(--faint);font-size:.8rem;font-weight:600}
  .op-types{grid-template-columns:1fr}
  .op-sec{padding-block:36px}
  .op-sec-head h2{font-size:1.2rem}
  .op-footer-grid{grid-template-columns:1fr;gap:22px}
}
@media print{
  .op-header,.op-footer,.op-facets,.op-detail-act,.op-pages,.op-cite-dl{display:none!important}
  body{background:#fff}
}

/* ---------- Form & autentikasi ---------- */
.op-auth{min-height:calc(100vh - 360px);display:flex;align-items:center;padding-block:48px}
.op-auth-card{width:100%;max-width:460px;margin-inline:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:32px}
.op-auth-card.wide{max-width:820px}
.op-auth-ic{width:54px;height:54px;border-radius:14px;background:var(--pri-3);color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:14px}
.op-auth-card h1{font-size:1.5rem;font-weight:800}
.op-auth-card>p{color:var(--muted);margin:.4em 0 22px;font-size:.93rem}
.op-auth-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);text-align:center;display:flex;flex-direction:column;gap:6px}
.op-field{margin-bottom:16px}
.op-field label,.op-label{display:block;font-weight:600;font-size:.86rem;margin-bottom:6px;color:#2f3d37}
.op-field .req{color:var(--no)}
.op-input,.op-field input:not([type=radio]):not([type=checkbox]),.op-field select,.op-field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.68em .9em;background:#fff;font-size:.95rem;transition:border-color .15s,box-shadow .15s}
.op-field input:focus,.op-field select:focus,.op-field textarea:focus{outline:none;border-color:var(--pri-2);box-shadow:0 0 0 4px rgba(17,102,76,.12)}
.op-field small{display:block;color:var(--faint);font-size:.8rem;margin-top:4px}
.op-pw{position:relative}
.op-pw input{padding-inline-end:46px!important}
.op-pw button{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--faint);width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:1.05rem}
.op-pw button:hover{color:var(--pri)}
.op-row{display:grid;gap:0 16px;grid-template-columns:repeat(var(--n,2),1fr)}
.op-radio{display:flex;gap:10px;flex-wrap:wrap}
.op-radio label{display:flex;align-items:center;gap:.5em;border:1.5px solid var(--line);border-radius:10px;padding:.55em 1em;cursor:pointer;font-weight:500;margin:0}
.op-radio label:has(input:checked){border-color:var(--pri-2);background:var(--pri-3);color:var(--pri);font-weight:700}
.op-radio input{accent-color:var(--pri)}
.op-fieldset{border:0;padding:0;margin:0 0 8px}
.op-fieldset legend{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--acc);margin-bottom:12px;padding:0}
:lang(ar) .op-fieldset legend{text-transform:none;letter-spacing:0;font-size:.9rem}
.op-btn-block{width:100%;justify-content:center;padding:.8em 1em;font-size:.98rem;border-radius:12px}
.op-alert{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:.92rem}
.op-alert i{font-size:1.1rem;margin-top:1px}
.op-alert-err{background:var(--no-bg);color:var(--no)}
.op-alert-ok{background:var(--ok-bg);color:var(--ok)}
.op-alert-info{background:var(--dig-bg);color:var(--dig)}
.op-bignum{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:2.2rem;font-weight:800;letter-spacing:.08em;color:var(--pri);background:var(--pri-3);border-radius:12px;padding:12px;text-align:center;margin:12px 0;direction:ltr}

/* ---------- Dasbor anggota ---------- */
.op-dash-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.op-dash-head .who{display:flex;align-items:center;gap:14px}
.op-avatar{width:56px;height:56px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem}
.op-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-top:18px;border-bottom:1px solid var(--line)}
.op-tabs a{padding:.7em 1em;font-weight:700;font-size:.9rem;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none!important;margin-bottom:-1px}
.op-tabs a[aria-current]{color:var(--pri);border-bottom-color:var(--acc)}
.op-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.op-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.op-kpi b{display:block;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}
.op-kpi span{color:var(--muted);font-size:.85rem}
.op-kpi.warn b{color:var(--no)}
.op-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px;overflow:hidden}
.op-panel>h2{font-size:1.02rem;font-weight:800;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.5em}
.op-panel>h2 i{color:var(--acc)}
.op-panel .op-table{border:0;border-radius:0}
.op-panel .op-meta{border:0;border-radius:0}
.op-panel-empty{padding:28px 18px;text-align:center;color:var(--muted)}
.op-st{font-size:.8rem;font-weight:700;padding:.22em .6em;border-radius:6px;display:inline-block;white-space:nowrap}
.op-st-ok{background:var(--ok-bg);color:var(--ok)}
.op-st-no{background:var(--no-bg);color:var(--no)}
.op-st-wait{background:var(--acc-2);color:#7a5a12}
.op-st-done{background:#eef0ec;color:var(--muted)}

/* ---------- Berita & halaman statis ---------- */
.op-article{max-width:780px;margin-inline:auto;padding-block:30px 50px}
.op-article h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;margin:.3em 0}
.op-article time{color:var(--acc);font-weight:700;font-size:.9rem}
.op-article .hero-img{border-radius:var(--r);margin:20px 0;width:100%;max-height:460px;object-fit:cover}
.op-prose{font-size:1.02rem;line-height:1.8;color:#25322c;overflow-wrap:anywhere}
.op-prose p{margin:0 0 1em}
.op-prose h2,.op-prose h3,.op-prose h4{margin:1.4em 0 .5em;line-height:1.3}
.op-prose img{height:auto!important;border-radius:10px;margin:12px 0}
.op-prose a{text-decoration:underline}
.op-prose table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.92rem;display:block;overflow-x:auto}
.op-prose td,.op-prose th{border:1px solid var(--line);padding:.5em .7em}
.op-prose ul,.op-prose ol{padding-inline-start:1.4em}
.op-prose iframe{max-width:100%}
.op-prose blockquote{border-inline-start:4px solid var(--acc);margin:1em 0;padding:.3em 1em;color:var(--muted);background:#fafbf9}
.op-newslist{display:flex;flex-direction:column;gap:14px}
.op-newsrow{display:grid;grid-template-columns:220px 1fr;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none!important;transition:box-shadow .15s}
.op-newsrow:hover{box-shadow:var(--shadow)}
.op-newsrow .ph{background:var(--pri-3) center/cover;min-height:140px;display:flex;align-items:center;justify-content:center;color:var(--pri);font-size:2rem}
.op-newsrow .tx{padding:16px 18px 16px 0}
[dir=rtl] .op-newsrow .tx{padding:16px 0 16px 18px}
.op-newsrow time{font-size:.8rem;color:var(--acc);font-weight:700}
.op-newsrow h2{font-size:1.1rem;margin:.3em 0}
.op-newsrow p{margin:0;color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- DDC ---------- */
.op-ddc{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:16px;padding-block:24px 50px;align-items:start}
.op-ddc ul{list-style:none;margin:0;padding:6px}
.op-ddc li a,.op-ddc li span.x{display:flex;gap:10px;padding:.45em .7em;border-radius:8px;color:var(--ink);font-size:.9rem;text-decoration:none!important}
.op-ddc li a:hover{background:#f1f4f1}
.op-ddc li a[aria-current]{background:var(--pri-3);color:var(--pri);font-weight:700}
.op-ddc li b{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--pri-2);min-width:36px;direction:ltr}
.op-ddc li .go{margin-inline-start:auto;color:var(--faint);font-size:.8rem}

/* ---------- Grafik statistik ---------- */
.op-charts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.op-chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.op-chart h3{font-size:1rem;font-weight:800;margin-bottom:14px}
.op-hbar{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:8px 10px;align-items:center;font-size:.86rem}
.op-hbar .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-hbar .tr{height:12px;background:#eef1ee;border-radius:6px;overflow:hidden}
.op-hbar .tr i{display:block;height:100%;background:var(--pri-2);border-radius:6px}
.op-hbar .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);text-align:end}
.op-vbar{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:18px}
.op-vbar div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.op-vbar i{display:block;width:100%;background:linear-gradient(180deg,var(--pri-2),var(--pri));border-radius:5px 5px 0 0;min-height:2px;position:relative}
.op-vbar i b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--muted);font-style:normal;white-space:nowrap;padding-bottom:2px}
.op-vbar small{font-size:.72rem;color:var(--faint);margin-top:6px;white-space:nowrap}

@media (max-width:900px){
  .op-kpis{grid-template-columns:repeat(2,1fr)}
  .op-ddc{grid-template-columns:1fr}
  .op-charts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .op-auth{padding-block:24px}
  .op-auth-card{padding:22px 18px;border-radius:14px}
  .op-row{grid-template-columns:1fr!important}
  .op-newsrow{grid-template-columns:1fr}
  .op-newsrow .ph{min-height:160px}
  .op-newsrow .tx,[dir=rtl] .op-newsrow .tx{padding:0 16px 16px}
  .op-vbar i b{display:none}
}

/* Media sosial (footer) */
.op-social-lb{margin:18px 0 8px;color:#fff;font-weight:700;font-size:.85rem}
.op-social{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.op-social li{margin:0!important}
.op-social a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#dfece6;font-size:1.05rem;transition:background .15s,color .15s,transform .15s;text-decoration:none!important}
.op-social a:hover{background:var(--acc);color:#2b1f05;transform:translateY(-2px)}