/* Citra Nusa Media — panel redaksi */
:root{--paper:#fff;--paper-soft:#f6f7f9;--paper-deep:#eef0f4;--ink:#171a20;--ink-soft:#424a57;--ink-muted:#737d8c;--line:#e1e5eb;--line-strong:#c7cdd6;--brand:#a8261f;--brand-dark:#7d1b16;--brand-tint:#fdf2f1;--navy:#17293f;--navy-soft:#233c5b;--success:#12694a;--success-tint:#e9f5f0;--warning:#946400;--warning-tint:#fdf5e6;--danger:#a8261f;--font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-display:Georgia,serif;--font-mono:ui-monospace,Consolas,monospace;--radius:9px;--radius-l:14px;--shadow-s:0 2px 8px rgba(16,24,40,.05);--shadow-m:0 16px 44px rgba(16,24,40,.13);--ease:cubic-bezier(.22,.61,.36,1)}
*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font:14px/1.55 var(--font-ui);color:var(--ink);background:var(--paper-soft);-webkit-font-smoothing:antialiased}h1,h2,h3,h4{margin:0 0 .45em;line-height:1.25;letter-spacing:-.015em}h1{font-size:23px}h2{font-size:17px}h3{font-size:15px}p{margin:0 0 12px}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}small{font-size:12px}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}svg text{stroke:none}button,input,select,textarea{font:inherit}code,kbd{font:12px var(--font-mono);background:var(--paper-deep);padding:2px 5px;border-radius:4px}:focus-visible{outline:2px solid #3265a8;outline-offset:2px}[hidden]{display:none!important}
/* panel klasik */
.rail{position:fixed;inset:0 auto 0 0;width:250px;display:flex;flex-direction:column;background:linear-gradient(180deg,#17293f,#101d2e);color:#dbe3ec;z-index:40}.rail__brand{display:flex;align-items:center;gap:11px;padding:19px 20px;color:#fff}.rail__brand:hover{text-decoration:none}.rail__mark{display:grid;place-items:center;width:38px;height:38px;background:var(--brand);border-radius:10px;color:white;font-weight:800}.rail__name{display:flex;flex-direction:column;font-size:14px;font-weight:700}.rail__name small{color:#99a9bc;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.rail__nav{flex:1;overflow:auto;padding:8px 10px}.rail__foot{padding:10px;border-top:1px solid #ffffff18}.rail__foot form{margin:0}.rail__link{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-radius:9px;background:none;color:#c3cede;cursor:pointer;font:inherit;text-align:left}.rail__link:hover{background:#ffffff12;color:#fff;text-decoration:none}.rail__link.is-active{background:var(--brand);color:#fff;font-weight:650}.rail__link svg{width:19px;height:19px;flex:none}.rail__link span{flex:1}.rail__badge{padding:3px 7px;border-radius:99px;background:#ffffff30;color:#fff;font-size:11px;font-style:normal}.shell{margin-left:250px;min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:15px;min-height:64px;padding:10px 24px;background:#ffffffed;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar__burger{display:none;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px}.topbar__burger svg{width:20px;height:20px}.topbar__title{flex:1;display:flex;flex-direction:column}.topbar__title strong{font-size:16px}.topbar__title span{font-size:12px;color:var(--ink-muted)}.topbar__actions{display:flex;align-items:center;gap:15px}.who{display:flex;align-items:center;gap:9px}.who__initial{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper-deep);color:var(--navy);font-weight:750}.who__meta{display:flex;flex-direction:column;line-height:1.2}.who__meta strong{font-size:13px}.who__meta small{color:var(--ink-muted);text-transform:capitalize}.canvas{flex:1;width:100%;max-width:1500px;padding:24px}.panel-foot{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:14px 24px 24px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-muted)}.rail-scrim{position:fixed;inset:0;background:#101d2e77;opacity:0;pointer-events:none;z-index:35;transition:opacity .2s}
/* buttons, cards, grid */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;font:600 13px/1.2 var(--font-ui);box-shadow:0 1px 2px #1018280a;white-space:nowrap;transition:transform .16s var(--ease),box-shadow .16s,background .16s}.btn:hover{background:var(--paper-soft);transform:translateY(-1px);text-decoration:none;box-shadow:var(--shadow-s)}.btn svg{width:16px;height:16px}.btn--primary{background:var(--brand);border-color:var(--brand-dark);color:#fff}.btn--primary:hover{background:var(--brand-dark);color:#fff}.btn--dark{background:var(--navy);border-color:var(--navy);color:#fff}.btn--ghost{background:transparent;border-color:transparent;color:var(--ink-soft);box-shadow:none}.btn--danger{background:var(--brand-tint);border-color:#edc7c4;color:var(--danger)}.btn--sm{padding:6px 10px;font-size:12px}.btn--block{width:100%}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-s);overflow:hidden}.card+.card{margin-top:16px}.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 19px;border-bottom:1px solid var(--line)}.card__head h2,.card__head h3{margin:0}.card__body{padding:18px}.card__body>:last-child{margin-bottom:0}.grid{display:grid;gap:16px}.grid--stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:20px}.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid--main{grid-template-columns:minmax(0,1fr) 330px;align-items:start}.stat{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-l);background:#fff}.stat--accent{border-left:3px solid var(--brand)}.stat__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}.stat__value{margin-top:5px;color:var(--navy);font:700 27px/1.2 var(--font-display)}.stat__note{color:var(--ink-muted);font-size:12px}
/* forms and tables */
.field{margin-bottom:16px}.field>label,.legend{display:block;margin-bottom:6px;color:var(--ink-soft);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.field .hint{display:block;margin-top:5px;color:var(--ink-muted);font-size:12px}.input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);font:14px/1.5 var(--font-ui)}.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px #a8261f18}.textarea{min-height:100px;resize:vertical}.select{appearance:none}.input--slug{font-family:var(--font-mono);font-size:13px}.counter{float:right;color:var(--ink-muted);font-size:11px}.counter.is-over{color:var(--danger)}.check{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px;color:var(--ink-soft);font-size:13px}.check input{accent-color:var(--brand)}fieldset.legend-box{margin:0 0 18px;padding:14px 16px 4px;border:1px solid var(--line);border-radius:9px}fieldset.legend-box legend{padding:0 6px;color:var(--navy);font-weight:700}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{padding:11px 14px;background:#f8f9fb;border-bottom:1px solid var(--line);color:var(--ink-muted);font-size:10.5px;letter-spacing:.08em;text-align:left;text-transform:uppercase;white-space:nowrap}.table td{padding:12px 14px;border-bottom:1px solid #edf0f3;vertical-align:middle}.table tbody tr:hover{background:#fafbfc}.table .num{text-align:right;font-variant-numeric:tabular-nums}.cell-title{min-width:240px}.cell-title a{font-weight:650;color:var(--ink)}.cell-title small{display:block;color:var(--ink-muted)}.cell-title img,.cell-thumb{width:52px;height:40px;object-fit:cover;border-radius:6px}.row-actions,.cell-actions{display:flex;gap:6px;justify-content:flex-end}.badge{display:inline-block;padding:4px 9px;border-radius:99px;background:#eef0f3;color:#667080;font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.badge--published{background:#e8f5ee;color:#19734b}.badge--draft{background:#eef0f3;color:#687282}.badge--pending{background:#fdf4e1;color:#8b6208}.badge--scheduled{background:#e8eef7;color:#294d80}.badge--archived{background:#f0e9df;color:#6d5636}.badge--breaking{background:var(--brand-tint);color:var(--brand)}
/* alerts and content modules */
.notices{display:flex;flex-direction:column;gap:8px;padding:14px 24px 0}.notice{display:flex;gap:12px;padding:12px 14px;border-left:3px solid var(--success);border-radius:8px;background:var(--success-tint);color:#0e5a40}.notice--error{border-color:var(--danger);background:var(--danger-tint);color:#8a201a}.notice button{margin-left:auto;border:0;background:none;color:inherit;font-size:20px;cursor:pointer}.callout{display:flex;gap:12px;padding:14px 16px;border-left:3px solid var(--navy);border-radius:8px;background:#eef3fa;color:var(--ink-soft);font-size:13px}.callout--warn{border-color:#a97809;background:var(--warning-tint)}.callout--danger{border-color:var(--danger);background:var(--danger-tint)}.callout svg{width:19px;height:19px;flex:none}.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}.toolbar .input,.toolbar .select{width:auto;min-width:150px}.toolbar .grow{flex:1}.kv{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin:0}.kv dt{color:var(--ink-muted)}.kv dd{margin:0;font-weight:650;text-align:right}.bars{display:flex;flex-direction:column;gap:12px}.bar__head{display:flex;justify-content:space-between;gap:8px;font-size:12px}.bar__track,.hbar__track{height:8px;overflow:hidden;border-radius:99px;background:#eef0f3}.bar__fill{height:100%;border-radius:99px;background:var(--navy)}.bar__fill--brand{background:var(--brand)}.pager{display:flex;justify-content:center;gap:6px;padding:16px;flex-wrap:wrap}.pager a,.pager span{padding:7px 11px;border:1px solid var(--line);border-radius:7px;background:#fff}.pager .is-current{background:var(--navy);color:white}.tabs{display:flex;gap:5px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:18px}.tabs a,.tabs button{padding:10px 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-muted);font-weight:650;white-space:nowrap}.tabs .is-active{border-color:var(--brand);color:var(--brand)}.tab-panel[hidden]{display:none}.serp{padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:#fafbfc}.serp__url{color:#4d6b3a;font-size:12px}.serp__title{color:#1a3a8f;font-size:19px}.serp__desc{color:var(--ink-soft);font-size:13px}.checklist__row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.checklist__dot{width:10px;height:10px;flex:none;margin-top:5px;border-radius:50%;background:#bd8a16}.is-ok .checklist__dot{background:var(--success)}.is-bad .checklist__dot{background:var(--danger)}
/* editor and media */
.editor{overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#fff}.editor__bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:8px;background:#f7f8fa;border-bottom:1px solid var(--line)}.editor__bar button,.editor__select{height:32px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink-soft);font-size:12px;cursor:pointer}.editor__bar button:hover{border-color:var(--navy)}.editor__bar button.is-on{background:var(--navy);color:#fff}.editor__bar svg{width:15px;height:15px}.editor__sep{height:20px;border-left:1px solid var(--line-strong);margin:0 3px}.editor__paper{max-height:70vh;min-height:400px;overflow:auto;padding:30px clamp(18px,4vw,45px)}.editor__doc{max-width:760px;margin:auto;outline:0;font-size:16px;line-height:1.75}.editor__doc:empty:before{content:attr(data-placeholder);color:var(--ink-muted)}.editor__doc h2,.editor__doc h3{font-family:var(--font-display)}.editor__doc blockquote{padding-left:16px;border-left:3px solid #b4894a;font:italic 18px/1.6 var(--font-display)}.editor__doc img{max-width:100%;height:auto}.editor__foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;background:#f8f9fb;border-top:1px solid var(--line);color:var(--ink-muted);font-size:12px}.dropzone{position:relative;display:block;padding:14px;border:1.5px dashed var(--line-strong);border-radius:12px;background:#fff;cursor:pointer}.dropzone:hover,.dropzone.is-over,.dropzone.is-drag{border-color:var(--brand);background:var(--brand-tint)}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone__preview,.dropzone__empty{display:grid;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.dropzone__empty{place-content:center;text-align:center;color:var(--ink-muted)}.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:20px}.modal.is-open{display:grid}.modal__scrim{position:absolute;inset:0;background:#101d2e99}.modal__box{position:relative;width:min(920px,100%);max-height:86vh;overflow:auto;border-radius:14px;background:#fff;box-shadow:var(--shadow-m)}.modal__head{display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}.modal__body{padding:18px}.masonry,.mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.masonry__cell,.mediagrid__item{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}.masonry__cell img,.mediagrid__item img{width:100%;aspect-ratio:4/3;object-fit:cover}.masonry__meta,.mediagrid__item span{display:block;padding:8px;color:var(--ink-muted);font-size:12px}.mediagrid__item{cursor:pointer;text-align:left}
/* login */
.login{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}.login__aside{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(30px,6vw,70px);background:linear-gradient(150deg,var(--navy),#0e1b2b);color:#dbe3ec}.login__pitch h1{color:white;font:600 clamp(28px,4vw,44px)/1.15 var(--font-display)}.login__pitch p{color:#aab9cc}.login__main{display:grid;place-items:center;padding:32px;background:white}.login__form{width:min(390px,100%)}.login__form h2{font:600 25px var(--font-display)}
/* SPA frame */
.spa{background:#f5f6f8}.spa__shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}.spa__sidebar{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;background:radial-gradient(720px 340px at -18% -12%,rgba(190,52,42,.18),transparent 62%),linear-gradient(180deg,#151c25 0%,#0f141b 100%);color:#e8eaee;border-right:1px solid rgba(255,255,255,.06)}.spa__brand{display:flex;align-items:center;gap:11px;padding:17px 16px 15px;border-bottom:1px solid rgba(255,255,255,.06);flex:none}.spa__brand-mark{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:linear-gradient(135deg,#c63429,#8d1f19);color:#fff;font-weight:800;font-size:14px;letter-spacing:.01em;box-shadow:0 8px 18px -10px rgba(210,60,50,.95),inset 0 1px 0 rgba(255,255,255,.26)}.spa__brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.28}.spa__brand-text strong{overflow:hidden;color:#fff;font-size:13px;font-weight:700;letter-spacing:-.012em;text-overflow:ellipsis;white-space:nowrap}.spa__brand-text small{color:#7c8a9b;font-size:9.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase}.spa__nav{display:flex;flex:1;flex-direction:column;gap:2px;padding:12px 12px 14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:transparent transparent}.spa__nav:hover,.spa__nav:focus-within{scrollbar-color:rgba(255,255,255,.22) transparent}.spa__nav::-webkit-scrollbar{width:6px;height:6px}.spa__nav::-webkit-scrollbar-track{background:transparent}.spa__nav::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}.spa__nav:hover::-webkit-scrollbar-thumb,.spa__nav:focus-within::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}.spa__nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}.spa__nav-group{display:flex;align-items:center;gap:9px;margin:16px 8px 7px;color:#5f6b7a;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.spa__nav-group:first-child{margin-top:6px}.spa__nav-group:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.055)}.spa__nav a{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:#a4afbd;font-size:12.5px;font-weight:550;line-height:1.35;letter-spacing:.002em;text-decoration:none;transition:background .16s var(--ease),color .16s var(--ease)}.spa__nav a:hover{background:rgba(255,255,255,.055);color:#fff;text-decoration:none}.spa__nav a.is-active{background:linear-gradient(90deg,rgba(190,52,42,.22),rgba(190,52,42,.04));color:#fff;font-weight:650}.spa__nav a.is-active:before{position:absolute;left:0;top:24%;bottom:24%;width:2.5px;border-radius:0 3px 3px 0;background:#e0524a;content:"";box-shadow:0 0 12px rgba(224,82,74,.75)}.spa__nav a svg{width:16px;height:16px;flex:none;padding:5px;box-sizing:content-box;border-radius:8px;background:rgba(255,255,255,.045);color:#9caaba;transition:background .16s,color .16s}.spa__nav a:hover svg{background:rgba(255,255,255,.09);color:#fff}.spa__nav a.is-active svg{background:rgba(255,255,255,.14);color:#fff}.spa__nav-cta{margin:2px 0 6px;background:linear-gradient(135deg,#bd3027,#8f201a);color:#fff!important;font-weight:650!important;box-shadow:0 10px 22px -14px rgba(200,60,50,.95),inset 0 1px 0 rgba(255,255,255,.18)}.spa__nav-cta svg{background:rgba(255,255,255,.16);color:#fff}.spa__nav-cta:hover{background:linear-gradient(135deg,#c8372c,#97221a)}.spa__foot{flex:none;padding:11px 12px 13px;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}.spa__user{display:flex;align-items:center;gap:10px;padding:8px 9px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.045)}.spa__user-avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:linear-gradient(135deg,#33465e,#22303f);color:#fff;font-size:12px;font-weight:750;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}.spa__user-text{display:flex;flex:1;flex-direction:column;min-width:0}.spa__user-text strong{overflow:hidden;color:#fff;font-size:12.5px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.spa__user-text small{color:#8694a5;font-size:10.5px;letter-spacing:.02em;text-transform:capitalize}.spa__logout{display:grid;place-items:center;width:30px;height:30px;flex:none;border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#e4827a;cursor:pointer;transition:background .16s,color .16s}.spa__logout:hover{background:rgba(200,60,50,.22);color:#ff9a92}.spa__logout svg{width:16px}.spa__main{display:flex;flex-direction:column;min-width:0}.spa__topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:56px;padding:7px 24px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.spa__titlewrap{display:flex;flex-direction:column}.spa__title{margin:0;font-size:16.5px;font-weight:720;letter-spacing:-.022em;line-height:1.25}.spa__crumb{margin-top:1px;color:#98a1af;font-size:10.5px;letter-spacing:.005em}.spa__top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.spa__sitebtn{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:650;text-decoration:none;transition:border-color .16s,color .16s,background .16s}.spa__sitebtn:hover{border-color:#bcc5d1;background:#fafbfc;color:var(--ink);text-decoration:none}.spa__sitebtn svg{width:14px}.spa__burger{display:none;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-soft)}.spa__scrim{display:none;position:fixed;inset:0;z-index:45;background:#10151d88;backdrop-filter:blur(2px)}.spa--menu-open .spa__scrim{display:block}.spa__view{width:100%;max-width:1400px;margin:0 auto;padding:26px 30px}.spa__loading{display:flex;justify-content:center;align-items:center;gap:10px;padding:55px;color:var(--ink-muted)}.spinner{width:22px;height:22px;border:2.5px solid #e3e6eb;border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.spa__saved{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--success-tint);color:var(--success);font-size:11.5px;font-weight:700;line-height:1.2;opacity:0;transform:translateY(3px);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease)}.spa__saved svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.spa__saved[data-show=true]{opacity:1}.spa__toast{position:fixed;bottom:24px;left:50%;z-index:90;max-width:85vw;padding:12px 20px;transform:translate(-50%,15px);border-radius:10px;background:#171d26;color:#fff;opacity:0;pointer-events:none;transition:.2s}.spa__toast[data-show=true]{transform:translate(-50%,0);opacity:1}.spa__toast--error{background:#a8261f}.spa__modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:#10151d88}.spa__modal[hidden]{display:none}.spa__modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.spa__modal-head h2{margin:0;font-size:17px;font-weight:720;letter-spacing:-.02em}
.spa__modal-head .dash-kicker{margin-bottom:2px}
.spa__modal-actions{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.spa__modal-actions .input{flex:1;min-width:200px}
.spa__modal-box.post-preview{padding:0}
.spa__modal-box{width:min(500px,100%);max-height:90vh;overflow:auto;padding:22px;border-radius:15px;background:#fff;box-shadow:var(--shadow-m)}.spa__modal--wide .spa__modal-box{width:min(920px,100%)}.spa .card{border-color:#e7eaef;box-shadow:0 1px 3px #1018280a}.spa .card__head{padding:15px 20px}.spa .card__head h2{font-size:15px}.spa .card__body{padding:18px 20px}.spa .grid--stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.spa .table th{padding:12px 16px}.spa .table td{padding:13px 16px}.spa__toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}.spa__toolbar .input:first-child{flex:1;min-width:220px}.spa__toolbar .input,.spa__toolbar .select{width:auto}.spa .input,.spa .select,.spa .textarea{border-radius:9px}.spa .input--title{font-size:17px;font-weight:700}.spa .badge{padding:4px 9px;font-size:10px}.spa__chart{display:flex;align-items:stretch;gap:7px;height:170px;padding-top:10px;border-bottom:1px solid var(--line)}.spa__chart-col{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:0}.spa__chart-col i{width:100%;max-width:38px;min-height:3px;border-radius:6px 6px 2px 2px;background:linear-gradient(#e0453a,#a8261f)}.spa__chart-col b,.spa__chart-col span{font-size:10px;color:var(--ink-muted)}.mediagrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.mediagrid__item img{display:block;aspect-ratio:16/10}.spa__callout{margin-bottom:18px;padding:15px;border:1px solid #f2d9d7;border-left:4px solid var(--brand);border-radius:11px;background:#fff7f6;color:var(--ink-soft)}
/* dashboard redaksi: tenang, editorial, bertenaga */
/* ====================================================================
   Dashboard redaksi — permukaan bersih, tipografi tenang, grafik hidup.
   Semua aturan di-scope ke .dashboard agar layar lain tidak terpengaruh.
   ==================================================================== */
.dashboard {
  --d-ink: #18212f;
  --d-soft: #4b5666;
  --d-muted: #7c8697;
  --d-faint: #98a1af;
  --d-line: #e9ecf1;
  --d-line-soft: #f1f3f7;
  --d-surface: #ffffff;
  --d-accent: #b3382e;
  --d-accent-soft: #fbf1f0;
  --d-num: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 1340px;
  margin: 0 auto;
  padding: 2px 0 8px;
  color: var(--d-ink);
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}
.dashboard * { min-width: 0; }

/* ---------- header ---------- */
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.dash-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--d-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dash-title {
  margin: 0 0 5px;
  color: var(--d-ink);
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 760;
  letter-spacing: -.032em;
  line-height: 1.18;
}
.dash-sub {
  margin: 0;
  color: var(--d-muted);
  font-size: 13px;
  line-height: 1.6;
}
.dash-sub strong { color: var(--d-soft); font-weight: 650; }
.dash-dot {
  display: inline-block;
  width: 3px; height: 3px;
  margin: 0 7px 3px;
  border-radius: 50%;
  background: #c8ced8;
  vertical-align: middle;
}
.dash-head__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* segmen & tombol kecil */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--d-line);
  border-radius: 10px;
  background: #f4f6f9;
}
.seg button {
  padding: 6px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--d-muted);
  font: 650 11.5px/1.2 var(--font-ui);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
}
.seg button:hover { color: var(--d-ink); }
.seg button.is-on {
  background: #fff;
  color: var(--d-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .09), 0 0 0 1px rgba(16, 24, 40, .04);
}
.dash-head .btn--primary { border-radius: 10px; padding: 10px 15px; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--d-line);
  border-radius: 10px;
  background: #fff;
  color: var(--d-soft);
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.icon-btn:hover { border-color: #d3d9e2; color: var(--d-ink); background: #fafbfc; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.is-spinning svg { animation: dash-spin .8s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* ---------- KPI ---------- */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--d-gap, 14px);
  margin-bottom: var(--d-gap, 14px);
}
.dashboard .kpi {
  padding: 16px 18px 14px;
  border: 1px solid var(--d-line);
  border-radius: 14px;
  background: var(--d-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .02);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.dashboard .kpi:hover {
  transform: translateY(-2px);
  border-color: #dfe4ec;
  box-shadow: 0 10px 24px -16px rgba(24, 33, 47, .32), 0 1px 3px rgba(16, 24, 40, .03);
}
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kpi__label {
  color: var(--d-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.kpi__value {
  display: block;
  color: var(--d-ink);
  font: 780 29px/1.08 var(--d-num);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.kpi__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.kpi__note { color: var(--d-faint); font-size: 11px; line-height: 1.4; }
.spark { width: 92px; height: 32px; flex: none; overflow: visible; }
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 7px;
  font: 700 10px/1.35 var(--font-ui);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delta--up { background: #e9f6ef; color: #167a4c; }
.delta--down { background: #fdeeed; color: #ad3229; }
.delta--flat { background: #f1f3f6; color: #78828f; }

/* ---------- antrean ---------- */
.dash-queue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--d-gap, 14px);
  margin-bottom: var(--d-gap, 14px);
}
.queue {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--d-line);
  border-radius: 12px;
  background: var(--d-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.queue:hover {
  text-decoration: none;
  border-color: #dbe0e8;
  box-shadow: 0 8px 20px -16px rgba(24, 33, 47, .4);
}
.queue__top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--d-soft);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.queue__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.queue__dot--warn { background: #dda32c; box-shadow: 0 0 0 3px #fbf2df; }
.queue__dot--muted { background: #a3acb9; box-shadow: 0 0 0 3px #f2f4f7; }
.queue__dot--info { background: #4a78bd; box-shadow: 0 0 0 3px #eaf0f9; }
.queue__body { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.queue__body b {
  color: var(--d-ink);
  font: 780 21px/1 var(--d-num);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.queue__body span { color: var(--d-faint); font-size: 11px; }
.queue__arrow { width: 15px; height: 15px; flex: none; color: #b8c0cb; transition: transform .16s, color .16s; }
.queue:hover .queue__arrow { transform: translateX(2px); color: var(--d-accent); }

/* ---------- grid utama ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--d-gap, 14px);
  align-items: stretch;
}
.dash-grid > .card { display: flex; flex-direction: column; min-width: 0; }
.dash-grid > .card > .card__body { flex: 1; }
.dash-grid > .card > .table-wrap { flex: 1; }
.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }
#dashHealth .card__body,
#dashStatus .card__body,
#dashCats .card__body { display: flex; flex-direction: column; }
#dashHealth .card__body { justify-content: flex-start; }
#dashStatus .card__body { justify-content: space-between; }
#dashStatus .status-donut { flex: 1; }
#dashCats .card__body { justify-content: flex-start; }
#dashCats .hbars { flex: 1; align-content: space-between; }
#dashTop .dash-top-list,
#dashAuthors .author-list,
#dashInsight .insight-list,
#dashActivity .timeline { align-content: start; }
.dashboard .card {
  border: 1px solid var(--d-line);
  border-radius: 14px;
  background: var(--d-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .02);
  overflow: hidden;
}
.dashboard .card + .card { margin-top: 0; }
.dashboard .card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 19px 14px;
  border-bottom: 1px solid var(--d-line-soft);
}
.dashboard .card__head h2 {
  margin: 0;
  color: var(--d-ink);
  font-size: 14.5px;
  font-weight: 720;
  letter-spacing: -.015em;
}
.dashboard .card__body { padding: 16px 19px 18px; }
.dashboard .card__link {
  flex: none;
  color: var(--d-muted);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
  transition: color .15s;
}
.dashboard .card__link:hover { color: var(--d-accent); text-decoration: none; }
.muted-note { margin: 0; color: var(--d-faint); font-size: 12.5px; line-height: 1.6; }

/* ---------- grafik ---------- */
.dash-chart__head { align-items: flex-end; }
.dash-chart__period {
  margin-left: 6px;
  color: var(--d-faint);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0;
}
.dash-chart__sub { margin: 5px 0 0; color: var(--d-faint); font-size: 12px; line-height: 1.5; }
.dash-chart__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 31px;
  padding: 0 11px;
  border: 1px solid var(--d-line);
  border-radius: 9px;
  background: #fff;
  color: var(--d-muted);
  font: 650 11.5px/1 var(--font-ui);
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.chip-toggle i {
  width: 12px; height: 0;
  border-top: 2px dashed #c2c9d3;
  transition: border-color .16s;
}
.chip-toggle:hover { color: var(--d-ink); border-color: #d6dbe4; }
.chip-toggle.is-on { background: #f6f8fb; border-color: #d9e1ec; color: #2f5f96; }
.chip-toggle.is-on i { border-color: #7fa0c8; }

.dash-chart__stats { display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap; padding: 14px 19px 0; }
.stat-chip {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--d-line-soft);
  border-radius: 10px;
  background: #fafbfc;
}
.stat-chip > span { color: var(--d-faint); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.stat-chip b {
  color: var(--d-ink);
  font: 750 15px/1 var(--d-num);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat-chip small { color: var(--d-faint); font-size: 10px; }
.dash-chart__body { padding: 8px 10px 0 6px; }
.dash-chart__svg { display: block; width: 100%; overflow: visible; outline: none; touch-action: pan-y; }
.dash-chart__svg:focus-visible { outline: 2px solid #9db4d2; outline-offset: 3px; border-radius: 8px; }
.dash-chart__svg :where(path, rect, circle) { stroke: none; }
.chart-grid { stroke: #eef1f5; stroke-width: 1; shape-rendering: crispEdges; }
.chart-ylabel { fill: #8b95a3; font-family: var(--font-ui); font-size: 10px; font-weight: 480; letter-spacing: .008em; font-variant-numeric: tabular-nums; }
.chart-xlabel { fill: #98a1af; font-family: var(--font-ui); font-size: 10px; font-weight: 480; letter-spacing: .008em; font-variant-numeric: tabular-nums; }
/* batang harian */
.chart-band { fill: #f1f4f8; transition: opacity .12s; }
.chart-bar { cursor: pointer; outline: none; }
.chart-hit-col { pointer-events: none; }
.chart-fill {
  fill: url(#barFill);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: chart-bar-grow .7s var(--ease) backwards;
  transition: fill .16s, opacity .16s;
}
.chart-bar:hover .chart-fill,
.chart-bar.is-hot .chart-fill { fill: #a92f26; }
.dash-chart__svg:has(.chart-bar.is-hot) .chart-ghost { opacity: .5; }
@keyframes chart-bar-grow { from { transform: scaleY(.02); opacity: .35; } }
.chart-ghost { fill: url(#barFillSoft); opacity: .85; transition: opacity .16s; }
.chart-zero { fill: #d4dae2; }
/* garis rata-rata 7 hari */
.chart-avg {
  fill: none;
  stroke: #1e3a5f;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: chart-line-draw 1.2s var(--ease) .12s forwards;
  pointer-events: none;
}
@keyframes chart-line-draw { to { stroke-dashoffset: 0; } }
.chart-avg-end { fill: #fff; stroke: #1e3a5f; stroke-width: 2; pointer-events: none; }
.chart-focus { transition: opacity .12s; pointer-events: none; }
.chart-focus__halo { fill: rgba(30, 58, 95, .12); }
.chart-focus__dot { fill: #fff; stroke: #1e3a5f; stroke-width: 2.2; }
.dash-chart__legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 19px 16px;
  color: var(--d-muted);
  font-size: 11px;
}
.lg { display: inline-flex; align-items: center; gap: 7px; }
.lg__bar { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(180deg, #c04237, #ecb8b2); }
.lg__line { width: 15px; height: 0; border-top: 2px solid #1e3a5f; border-radius: 2px; }
.lg__ghost { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(180deg, #b6c2d3, #e8edf4); }
.dash-chart__hint { margin-left: auto; color: var(--d-faint); font-size: 10.5px; }

/* ---------- kesehatan konten ---------- */
.health { position: relative; display: grid; place-items: center; width: 148px; height: 148px; margin: 6px auto 6px; }
.health__ring { width: 148px; height: 148px; transform: rotate(-90deg); }
.health__track { fill: none; stroke: #f0f2f6; stroke-width: 11; }
.health__meter {
  fill: none;
  stroke: #d9dfe7;
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dasharray .8s var(--ease);
  animation: health-in 1s var(--ease) forwards;
}
.health__meter.is-good { stroke: var(--success); }
.health__meter.is-mid { stroke: var(--warning); }
.health__meter.is-low { stroke: var(--danger); }
@keyframes health-in { from { stroke-dasharray: 0 276; } }
.health__score { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.health__score b {
  color: var(--d-ink);
  font: 780 30px/1 var(--d-num);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.health__score span { margin-top: 2px; color: var(--d-faint); font-size: 9.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.health__badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 7px;
  background: #f1f4f7;
  color: var(--d-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.health__badge.is-good { background: var(--success-tint); color: var(--success); }
.health__badge.is-mid { background: var(--warning-tint); color: var(--warning); }
.health__badge.is-low { background: color-mix(in srgb, var(--danger) 10%, #fff); color: var(--danger); }
.health__caption { margin: 0 0 10px; color: var(--d-faint); font-size: 11px; line-height: 1.5; text-align: center; }
.health__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.health__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 12.5px;
}
.health__list li:hover { background: #fafbfc; }
.health__list i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--warning); }
.health__list li.is-ok i { background: var(--success); }
.health__list span { flex: 1; color: var(--d-soft); }
.health__list b { color: var(--warning); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.health__list li.is-ok b { color: var(--success); }

/* ---------- status donut ---------- */
.status-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.status-donut__svg { width: 120px; height: 120px; flex: none; }
.donut-seg { cursor: pointer; transition: opacity .15s, stroke-width .15s; }
.donut-seg:hover { stroke-width: 19; }
.donut__num { fill: var(--d-ink); font: 780 20px var(--d-num); letter-spacing: -.03em; }
.donut__label { fill: var(--d-faint); font: 650 8.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.status-legend { display: grid; gap: 2px; flex: 1; min-width: 128px; margin: 0; padding: 0; list-style: none; }
.status-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
  color: var(--d-soft);
  font-size: 11.5px;
  transition: background .12s;
}
.status-legend li:hover, .status-legend li.is-on { background: #f5f7fa; }
.status-legend i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.status-legend span { flex: 1; }
.status-legend b { color: var(--d-ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.status-legend small { min-width: 28px; color: var(--d-faint); font-size: 10px; text-align: right; }

/* ---------- artikel terpopuler ---------- */
.dash-top-list { display: grid; gap: 4px; padding-top: 10px !important; }
.top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background .14s;
}
.top-item:hover { background: #fafbfc; text-decoration: none; }
.top-item__thumb {
  width: 58px; height: 42px;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  background: #f1f3f7;
  display: block;
}
.top-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-item__ph {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  color: #a7b0bd;
  font: 750 15px var(--d-num);
}
.top-item__body { flex: 1; min-width: 0; }
.top-item__body strong {
  display: block;
  overflow: hidden;
  color: var(--d-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-item__meta { display: flex; align-items: center; gap: 9px; margin-top: 4px; color: var(--d-faint); font-size: 11px; }
.cat-chip {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--c, #b3382e) 10%, #fff);
  color: var(--c, #b3382e);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.top-item__bar { display: block; height: 3px; margin-top: 6px; border-radius: 99px; background: #f0f2f6; overflow: hidden; }
.top-item__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #cf5b51, #b3382e); transition: width .7s var(--ease); }
.top-item__views {
  flex: none;
  color: var(--d-soft);
  font: 750 12px/1 var(--d-num);
  font-variant-numeric: tabular-nums;
}

/* ---------- rubrik ---------- */
.hbars { display: grid; gap: 12px; }
.hbar__head { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.hbar__dot { width: 8px; height: 8px; flex: none; border-radius: 3px; }
.hbar__head a {
  overflow: hidden;
  color: var(--d-soft);
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar__head a:hover { color: var(--d-accent); }
.hbar__head small { margin-left: auto; flex: none; color: var(--d-faint); font-size: 10px; }
.hbar__track { height: 6px; margin-top: 6px; border-radius: 99px; background: #f1f3f7; overflow: hidden; }
.hbar__track i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c04a40, #b3382e); transition: width .8s var(--ease); }
.hbar__foot { display: flex; justify-content: space-between; margin-top: 4px; color: var(--d-faint); font-size: 10px; }

/* ---------- penulis ---------- */
.author-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.author-list li { display: flex; align-items: center; gap: 11px; padding: 8px 6px; border-radius: 9px; transition: background .14s; }
.author-list li:hover { background: #fafbfc; }
.author-list__avatar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: #f0f3f7;
  color: #6d7c90;
  font: 750 12px/1 var(--font-ui);
}
.author-list__avatar.is-lead { background: linear-gradient(135deg, #f1c96b, #dda62c); color: #5b4006; }
.author-list__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-list__body { flex: 1; min-width: 0; }
.author-list__body a {
  display: block;
  overflow: hidden;
  color: var(--d-ink);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.author-list__body a:hover { color: var(--d-accent); }
.author-list__bar { display: block; height: 3px; margin-top: 5px; border-radius: 99px; background: #f1f3f7; overflow: hidden; }
.author-list__bar i { display: block; height: 100%; border-radius: 99px; background: #b4c2d4; }
.author-list__stat { flex: none; text-align: right; }
.author-list__stat b { display: block; color: var(--d-soft); font: 750 11.5px/1.2 var(--d-num); font-variant-numeric: tabular-nums; }
.author-list__stat small { color: var(--d-faint); font-size: 9.5px; }

/* ---------- insight ---------- */
.insight-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.insight { display: flex; gap: 10px; padding: 9px 6px; border-radius: 9px; transition: background .14s; }
.insight:hover { background: #fafbfc; }
.insight__icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 8px;
  background: #f2f4f8;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.insight--trend .insight__icon { background: #fbeeec; color: #b3382e; }
.insight--clock .insight__icon { background: #eef3fa; color: #35659c; }
.insight--star .insight__icon { background: #fbf3e2; color: #a97809; }
.insight strong { display: block; margin-bottom: 3px; color: var(--d-ink); font-size: 12px; font-weight: 680; }
.insight p { margin: 0; color: var(--d-muted); font-size: 12px; line-height: 1.55; }
.insight b { color: var(--d-soft); font-weight: 700; }

/* ---------- aktivitas ---------- */
.timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 2px 0 0 2px; list-style: none; }
.timeline__item { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:before {
  position: absolute;
  top: 12px; bottom: 0; left: 4px;
  width: 1px;
  background: #edf0f4;
  content: "";
}
.timeline__item:last-child:before { display: none; }
.timeline__dot {
  position: relative;
  z-index: 1;
  width: 9px; height: 9px;
  flex: none;
  margin-top: 4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #a3acb9;
  box-shadow: 0 0 0 1px #dfe4ec;
}
.timeline__dot--published { background: #2f9e63; }
.timeline__dot--pending { background: #dda32c; }
.timeline__dot--scheduled { background: #4a78bd; }
.timeline__dot--draft { background: #a3acb9; }
.timeline__body { min-width: 0; }
.timeline__body a {
  display: block;
  overflow: hidden;
  color: var(--d-soft);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline__body a:hover { color: var(--d-accent); }
.timeline__body span { display: block; margin-top: 2px; color: var(--d-faint); font-size: 10px; }

/* ---------- tabel berita terbaru ---------- */
.card-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--d-muted);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
  border-top: 1px solid var(--d-line-soft);
}
.card-foot-link span { transition: transform .15s var(--ease); }
.card-foot-link:hover { color: var(--d-accent); text-decoration: none; }
.card-foot-link:hover span { transform: translateX(2px); }
.dashboard #dashRecent .table-wrap { padding-bottom: 4px; }
.dashboard #dashRecent .table { font-size: 12.5px; }
.dashboard #dashRecent .table th {
  padding: 11px 19px;
  background: #fbfcfd;
  border-bottom: 1px solid var(--d-line-soft);
  color: var(--d-faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
}
.dashboard #dashRecent .table td { padding: 12px 19px; border-bottom: 1px solid #f4f6f9; }
.dashboard #dashRecent .table tbody tr:last-child td { border-bottom: 0; }
.dashboard #dashRecent .table tbody tr:hover { background: #fbfcfd; }
.dashboard #dashRecent .cell-title { min-width: 220px; }
.dashboard #dashRecent .cell-title a { color: var(--d-ink); font-size: 12.5px; font-weight: 640; text-decoration: none; }
.dashboard #dashRecent .cell-title a:hover { color: var(--d-accent); }
.dashboard #dashRecent .cell-title small { display: block; margin-top: 2px; color: var(--d-faint); font-size: 10px; }
.cat-cell { color: var(--d-muted); font-size: 11.5px; }
.muted-cell { color: var(--d-faint); font-size: 11px; white-space: nowrap; }

/* ---------- tooltip grafik ---------- */
.chart-tip {
  position: fixed;
  z-index: 120;
  max-width: 260px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: #18212f;
  color: #fff;
  font-size: 11.5px;
  line-height: 1.55;
  box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.chart-tip[data-show="true"] { opacity: 1; }
.chart-tip b { font-weight: 700; }
.chart-tip small { color: #a8b3c2; }
@media(max-width:1180px){.spa__shell{grid-template-columns:235px minmax(0,1fr)}.grid--main{grid-template-columns:minmax(0,1fr)}.who__meta{display:none}.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.queue__body span{display:none}.dash-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.col-8{grid-column:span 6}.col-4{grid-column:span 3}}
@media(max-width:850px){.rail{transform:translateX(-100%);transition:transform .24s var(--ease)}body.rail-open .rail{transform:none;box-shadow:var(--shadow-m)}body.rail-open .rail-scrim{opacity:1;pointer-events:auto}.shell{margin-left:0}.topbar__burger{display:inline-flex}.canvas{padding:18px 14px}.notices{padding:12px 14px 0}.panel-foot{padding:14px}.spa__shell{display:block}.spa__sidebar{position:fixed;inset:0 auto 0 0;z-index:50;width:276px;height:100dvh;transform:translateX(-103%);transition:transform .25s var(--ease)}.spa--menu-open .spa__sidebar{transform:none;box-shadow:24px 0 70px #0005}.spa__burger{display:grid}.spa__view{padding:18px 16px}.spa__topbar{padding:10px 16px}.spa__crumb{display:none}.spa .cell-actions{flex-direction:column}.spa__topbar{min-height:52px;padding:6px 14px}.dash-queue{grid-template-columns:1fr}.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.col-8{grid-column:span 2}.col-4{grid-column:span 1}.dash-chart__hint{display:none}}
@media(max-width:620px){.login{grid-template-columns:1fr}.login__aside{display:none}.topbar{padding:8px 11px;gap:9px}.topbar__title strong{font-size:14px}.topbar__actions{gap:8px}.topbar__actions .btn{font-size:11px;padding:8px}.topbar__actions .btn svg{display:none}.who__meta{display:none}.grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-head{align-items:flex-start;gap:14px;margin-bottom:16px}.dash-head__actions{width:100%}.dash-head__actions .btn--primary{flex:1;justify-content:center}.dash-title{font-size:21px}.dash-sub{font-size:11.5px}.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dashboard .kpi{padding:13px 14px 12px}.kpi__value{font-size:22px}.kpi__label{font-size:9px;letter-spacing:.06em}.kpi__note{font-size:10px}.spark{width:64px;height:26px}.delta{font-size:9px;padding:2px 5px}.queue{padding:11px 13px}.queue__top{font-size:10.5px}.dash-grid,.dash-kpis,.dash-queue{gap:10px}.dash-grid{grid-template-columns:minmax(0,1fr)}.col-8,.col-4{grid-column:span 1}.dashboard .card__head{padding:13px 14px 12px}.dashboard .card__body{padding:13px 14px 15px}.dash-chart__head{align-items:flex-start;flex-direction:column}.dash-chart__controls{width:100%}.dash-chart__stats{gap:6px;padding:12px 14px 0}.stat-chip{padding:7px 9px;gap:5px}.stat-chip b{font-size:13px}.dash-chart__body{padding:6px 6px 0 2px}.dash-chart__legend{padding:6px 14px 13px;gap:10px;font-size:10px}.top-item__thumb{width:46px;height:36px}.top-item__body strong{font-size:11.5px}.top-item__meta{gap:6px;font-size:9.5px}.cat-chip{max-width:96px;font-size:8.5px}.dashboard #dashRecent .table th,.dashboard #dashRecent .table td{padding:10px 12px}.spa__topbar{gap:8px;min-height:50px;padding:6px 11px}.spa__title{font-size:15.5px}.spa__brand{padding:14px}.spa__sitebtn{padding:7px 9px;font-size:0}.spa__sitebtn svg{width:16px;height:16px}.spa__saved{display:none}.spa__view{padding:14px 10px}.spa .table td,.spa .table th{padding:10px}.spa__toolbar .input:first-child{min-width:100%;flex-basis:100%}.grid--2{grid-template-columns:1fr}.editor__paper{padding:20px 14px}.panel-foot{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.rail,.topbar,.panel-foot,.notices,.btn{display:none!important}.shell{margin:0}body{background:#fff}}

/* ====================================================================
   Komponen panel lama yang masih dipakai halaman non-SPA / dialog.
   ==================================================================== */
.bar { padding: 2px 0; }
.bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 12.5px; }
.bar__track { height: 7px; border-radius: 99px; background: #eef0f4; overflow: hidden; }
.bar__fill { height: 100%; border-radius: 99px; background: var(--navy); }
.bar__fill--brand { background: var(--brand); }

.checklist { display: flex; flex-direction: column; }
.checklist__row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.checklist__row:last-child { border-bottom: 0; }
.checklist__dot { width: 10px; height: 10px; flex: none; margin-top: 5px; border-radius: 50%; background: var(--warning); }
.checklist__row.is-ok .checklist__dot { background: var(--success); }
.checklist__row.is-bad .checklist__dot { background: var(--danger); }
.checklist__label { font-size: 13.5px; font-weight: 620; }
.checklist__value { font-size: 12.5px; color: var(--ink-muted); }

.score { display: flex; align-items: center; gap: 16px; }
.score__ring { position: relative; width: 92px; height: 92px; flex: none; }
.score__ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.score__ring circle { fill: none; stroke-width: 8; }
.score__ring .track { stroke: #eef0f4; }
.score__ring .bar { stroke: #d9dfe7; transition: stroke-dashoffset .6s var(--ease); }
.score__ring .bar.is-good { stroke: var(--success); }
.score__ring .bar.is-mid { stroke: var(--warning); }
.score__ring .bar.is-low { stroke: var(--danger); }
.score__num { position: absolute; inset: 0; display: grid; place-items: center; color: var(--navy); font: 700 22px/1 var(--font-display); }

.login-body { margin: 0; background: var(--paper); }
.login__brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 650; }
.login__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; }
.login__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: #b7c5d6; font-size: 13px; }
.login__list li { display: flex; align-items: flex-start; gap: 9px; }
.login__list svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: #cfa45f; }
.login__note { color: #8698ad; font-size: 11.5px; letter-spacing: .03em; }

.masonry__actions { display: flex; gap: 6px; padding: 0 8px 10px; }
.masonry__actions form { margin: 0; }
.modal__close { border: 0; background: none; color: var(--ink-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.modal__close:hover { color: var(--ink); }
.rail__logout { color: #c4534b; }
.rail__logout:hover { background: rgba(212, 55, 44, .18); color: #ff8d85; }
.tab-panel[hidden] { display: none; }

.ad-card .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ad-card .hint { margin: 0 0 14px; color: var(--ink-muted); font-size: 12.5px; line-height: 1.5; }
.check--inline { margin: 0; font-size: 13px; font-weight: 650; }

/* ====================================================================
   Halaman tulis berita — ruang kerja redaksi.
   Bar aksi sticky, naskah lapang, panel SEO cerdas di kanan.
   ==================================================================== */
.post-editor {
  --p-line: #e7eaef;
  --p-line-soft: #eef1f5;
  --p-rail: 348px;
  --p-gap: 16px;
  display: block;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- bar aksi ---------- */
.post-bar {
  position: sticky;
  top: 56px;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--p-gap);
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px -14px rgba(24, 33, 47, .45);
}
.post-bar__left,
.post-bar__right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.post-bar__left { min-width: 0; }
.post-bar__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-bar__state i {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: #b6bec9;
  box-shadow: 0 0 0 3px #f1f3f7;
}
.post-bar__state.is-dirty { color: #8a6208; }
.post-bar__state.is-dirty i { background: #dda32c; box-shadow: 0 0 0 3px #fbf2df; }
.post-bar__state.is-saving { color: #4a6b94; }
.post-bar__state.is-saving i { background: #4a78bd; box-shadow: 0 0 0 3px #eaf0f9; }
.post-bar__state.is-saved,
.post-bar__state.is-local { color: #1d7a4c; }
.post-bar__state.is-saved i,
.post-bar__state.is-local i { background: #2f9e63; box-shadow: 0 0 0 3px #e7f6ee; }
.post-bar__divider { width: 1px; height: 16px; background: var(--p-line); }
.post-bar__stat { color: var(--ink-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.post-score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #f2f4f7;
  color: #77818f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.post-score-pill b { font-size: 12.5px; letter-spacing: 0; }
.post-score-pill.is-good { background: var(--success-tint); color: var(--success); }
.post-score-pill.is-mid { background: var(--warning-tint); color: var(--warning); }
.post-score-pill.is-low { background: color-mix(in srgb, var(--danger) 10%, #fff); color: var(--danger); }
.post-score-pill small { font-size: 9.5px; font-weight: 600; }
.icon-btn.is-on { background: #17293f; border-color: #17293f; color: #fff; }

/* ---------- grid ---------- */
.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--p-rail);
  gap: var(--p-gap);
  align-items: start;
}
.post-main { display: grid; gap: var(--p-gap); min-width: 0; }
.post-main .card + .card { margin-top: 0; }
.post-rail {
  position: sticky;
  top: 132px;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 148px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  padding-right: 2px;
}
.post-rail:hover,
.post-rail:focus-within { scrollbar-color: rgba(24, 33, 47, .2) transparent; }
.post-rail::-webkit-scrollbar { width: 6px; }
.post-rail::-webkit-scrollbar-track { background: transparent; }
.post-rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.post-rail:hover::-webkit-scrollbar-thumb { background: rgba(24, 33, 47, .18); }
.post-tabs { position: sticky; top: 0; z-index: 3; }
.post-editor.is-focus .post-rail { display: none; }
.post-editor.is-focus .post-grid { grid-template-columns: minmax(0, 1fr); }
.post-editor.is-focus .post-main { width: 100%; max-width: 900px; margin: 0 auto; }

/* ---------- judul ---------- */
.post-hero__body { padding: 20px 22px 16px; }
.post-title {
  display: block;
  width: 100%;
  max-height: 220px;
  padding: 0;
  border: 0;
  background: none;
  color: #141a24;
  font: 750 29px/1.22 var(--font-ui);
  letter-spacing: -.032em;
  resize: none;
  outline: none;
  overflow-y: auto;
}
.post-title::placeholder { color: #a9b2c0; font-weight: 650; }
.post-hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.post-count { color: #8b95a3; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.post-zone { font-size: 10.5px; font-weight: 650; }
.post-zone.is-empty { color: #a3acb9; }
.post-zone.is-ok { color: var(--success); }
.post-zone.is-low { color: var(--warning); }
.post-zone.is-high { color: var(--danger); }
.post-kicker {
  flex: 1;
  min-width: 180px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px dashed var(--p-line);
  background: none;
  color: #6f7a89;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  outline: none;
  transition: border-color .16s;
}
.post-kicker:focus { border-bottom-color: #b3382e; }
.post-kicker::placeholder { color: #a9b2c0; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ---------- fokus kata kunci ---------- */
.post-keyword__body {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 18px;
}
.post-keyword__copy { flex: 1; min-width: 190px; }
.post-keyword__copy h2 { margin: 0 0 3px; font-size: 14px; font-weight: 720; }
.post-keyword__copy p { margin: 0; color: #8b95a3; font-size: 11.5px; line-height: 1.5; }
.post-keyword__field { display: flex; gap: 8px; flex: 1 1 320px; min-width: 0; }
.post-keyword__field .input { flex: 1; min-width: 0; }

/* ---------- naskah ---------- */
/* Definisi editor naskah ada di bagian akhir berkas ini (satu sumber aturan). */
.post-counter { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; font-size: 10.5px; color: #9aa3b1; font-variant-numeric: tabular-nums; }
.post-counter span:last-child { font-weight: 650; }

/* ---------- checklist ---------- */
.checklist2 { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.checklist2 li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 9px;
}
.checklist2 li:hover { background: #fafbfc; }
.checklist2__icon {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #f2f4f7;
  color: #8a94a2;
  font-size: 10.5px;
  font-weight: 800;
}
.checklist2 li.is-ok .checklist2__icon { background: var(--success-tint); color: var(--success); }
.checklist2 li.is-warn .checklist2__icon { background: var(--warning-tint); color: var(--warning); }
.checklist2 li.is-bad .checklist2__icon { background: color-mix(in srgb, var(--danger) 10%, #fff); color: var(--danger); }
.checklist2__body strong { display: block; color: #3a4657; font-size: 11.5px; font-weight: 620; line-height: 1.4; }
.checklist2__body small { display: block; margin-top: 1px; color: #8f99a6; font-size: 10.5px; line-height: 1.45; }

/* ---------- panel kanan ---------- */
.post-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--p-line);
  border-radius: 11px;
  background: #eff2f6;
}
.post-tabs button {
  flex: 1;
  padding: 7px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #77818f;
  font: 650 11px/1.2 var(--font-ui);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.post-tabs button:hover { color: #2b3644; }
.post-tabs button.is-on { background: #fff; color: #202a3a; box-shadow: 0 1px 3px rgba(16, 24, 40, .13); }
.post-panel[hidden] { display: none; }
.post-panel .card__body { padding: 15px 16px 16px; }
.post-panel .field { margin-bottom: 13px; }
.post-panel .field:last-of-type { margin-bottom: 12px; }
.post-field > label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: #6c7787;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.post-field > label em { color: #98a1af; font-size: 10px; font-style: normal; letter-spacing: 0; }
.post-panel .hint { display: block; margin-top: 4px; color: #98a1af; font-size: 10.5px; line-height: 1.45; }
.post-panel .input, .post-panel .textarea { font-size: 13px; padding: 8px 10px; border-radius: 8px; }
.post-panel .textarea { min-height: 76px; }
.hidden-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.input-suffix { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
.input-suffix span { padding: 0 0 0 10px; color: #98a1af; font-size: 11px; white-space: nowrap; }
.input-suffix .input { border: 0; border-radius: 0; padding-left: 4px; }
.input-suffix:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px #a8261f14; }
.post-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.post-quick .btn { padding: 5px 8px; font-size: 10.5px; }
.post-flags { margin: 0 0 14px; padding: 0; border: 0; }
.post-flags legend {
  margin-bottom: 6px;
  color: #6c7787;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pillcheck {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin-bottom: 5px;
  border: 1px solid var(--p-line-soft);
  border-radius: 8px;
  background: #fbfcfd;
  color: #4a5564;
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pillcheck:hover { border-color: #dfe4ec; background: #f8f9fb; }
.pillcheck input { width: 14px; height: 14px; accent-color: var(--brand); }
.post-side-link { margin-top: 8px; }
#statusChips { display: grid; grid-template-columns: 1fr 1fr; }
.seg2 { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--p-line); border-radius: 9px; background: #f4f6f9; width: 100%; }
.seg2 button {
  flex: 1;
  padding: 6px 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #7b8492;
  font: 650 10.5px/1.2 var(--font-ui);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg2 button:hover { color: #2b3644; }
.seg2 button.is-on { background: #fff; color: #202a3a; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.seg2--sm { width: auto; }
.seg2--sm button { padding: 5px 9px; }

/* ---------- skor SEO ---------- */
.seo-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--p-line-soft);
}
.seo-ring { width: 74px; height: 74px; flex: none; }
.seo-ring__track { fill: none; stroke: #eef1f5; stroke-width: 8; }
.seo-ring__meter {
  fill: none;
  stroke: #d9dfe7;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray .5s var(--ease), stroke .3s;
}
/* Nada skor: ≥90 hijau, 70–89 kuning, <70 merah — ambang yang sama dipakai
   cincin SEO, pil skor, dan kartu kesehatan konten. */
.seo-ring__meter.is-good { stroke: var(--success); }
.seo-ring__meter.is-mid { stroke: var(--warning); }
.seo-ring__meter.is-low { stroke: var(--danger); }
.seo-head__text { display: flex; flex-direction: column; }
.seo-head__text b { color: #18212f; font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.seo-head__text span { margin-top: 2px; color: #8b95a3; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.seo-head__text small { margin-top: 3px; color: #6c7787; font-size: 10.5px; font-weight: 600; }

/* ---------- SERP ---------- */
.serp-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.serp-tools__label { color: #8b95a3; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.serp-preview { display: flex; justify-content: center; }
.serp-card {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  background: #fff;
  text-align: left;
}
.serp-preview--mobile .serp-card { max-width: 360px; }
.serp-card__url {
  overflow: hidden;
  color: #4d6b3a;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.serp-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 3px;
  color: #1a3a8f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.serp-preview--mobile .serp-card__title { font-size: 14px; }
.serp-card__desc {
  display: -webkit-box;
  overflow: hidden;
  color: #4d5762;
  font-size: 11.5px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ---------- label ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 9px;
  border-radius: 7px;
  background: #f1f4f8;
  color: #465264;
  font-size: 11px;
  font-weight: 600;
}
.chip button {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #98a1af;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.chip button:hover { background: #e3e8ef; color: #b3382e; }
.chip--soft { padding: 4px 9px; background: #f7f9fb; border: 1px dashed #dbe1e9; color: #5a6676; cursor: pointer; }
.chip--soft:hover { border-color: #b3382e; color: #b3382e; background: #fdf3f2; }
.chips__empty { color: #9aa3b1; font-size: 11px; }
.tag-suggest { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--p-line-soft); }
.tag-suggest__label { display: block; margin-bottom: 6px; color: #98a1af; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- pratinjau ---------- */
.preview-box { width: min(900px, 100%); }
.preview-wrap { padding: 6px 4px 10px; }
.preview-article { max-width: 720px; margin: 0 auto; }
.preview-article__kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: #b3382e;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.preview-article h1 {
  margin: 0 0 10px;
  color: #141a24;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.preview-article__meta { margin-bottom: 18px; color: #8b95a3; font-size: 11.5px; }
.preview-article__img { width: 100%; height: auto; margin-bottom: 18px; border-radius: 10px; }
.preview-article__body { color: #2c3440; font-size: 15.5px; line-height: 1.75; }
.preview-article__body p { margin: 0 0 1em; }
.preview-article__lead { color: #4a5564; font-size: 16.5px; font-weight: 550; }
.preview-article__body h2, .preview-article__body h3 { margin: 1.3em 0 .5em; letter-spacing: -.02em; }
.preview-article__body img { max-width: 100%; height: auto; border-radius: 8px; }
.preview-article__body blockquote { margin: 1.2em 0; padding-left: 16px; border-left: 3px solid #b4894a; color: #4a5564; font-style: italic; }
.preview-article__body table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.preview-article__body th, .preview-article__body td { padding: 7px 10px; border: 1px solid #e7eaef; font-size: 13px; text-align: left; }

/* ---------- responsif ---------- */
@media (max-width: 1180px) {
  .post-editor { --p-rail: 316px; }
  .post-title { font-size: 26px; }
}
@media (max-width: 1000px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-rail { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .post-tabs { position: static; }
  .post-editor { max-width: 860px; }
  .post-tabs { max-width: 480px; }
  .post-title { font-size: 25px; }
}
@media (max-width: 620px) {
  .post-editor { --p-gap: 12px; }
  .post-bar { top: 50px; padding: 7px 8px; }
  .post-bar__divider, .post-bar__stat, .post-bar__state { display: none; }
  .post-bar__right { margin-left: auto; }
  .post-bar__right .btn { padding: 7px 10px; font-size: 11.5px; }
  .post-bar__right .btn svg { display: none; }
  .post-score-pill { font-size: 9px; padding: 4px 7px; }
  .post-hero__body { padding: 16px; }
  .post-title { font-size: 22px; letter-spacing: -.028em; }
  .post-kicker { width: 100%; flex-basis: 100%; }
  .post-keyword__body { padding: 13px 14px; }
  .post-keyword__field { flex-basis: 100%; }
  .post-naskah .editor { margin: 12px 10px 12px; }
  .post-panel .card__body { padding: 13px 13px 14px; }
  .preview-box { width: 100%; }
  .preview-article__body { font-size: 14.5px; }
}

/* ====================================================================
   Daftar berita — pencarian realtime, filter status, tampilan tabel/kartu.
   ==================================================================== */
.posts-page {
  --l-line: #e7eaef;
  --l-line-soft: #eef1f5;
  --l-ink: #18212f;
  --l-muted: #7c8697;
  --l-faint: #98a1af;
  max-width: 1400px;
  margin: 0 auto;
}
.posts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.posts-title {
  margin: 0 0 4px;
  color: var(--l-ink);
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 760;
  letter-spacing: -.032em;
  line-height: 1.18;
}
.posts-sub { margin: 0; color: var(--l-muted); font-size: 12.5px; line-height: 1.6; }
.posts-sub strong { color: #8a6208; font-weight: 700; }
.posts-head__actions { display: flex; gap: 9px; align-items: center; }

/* ---------- tab status ---------- */
.posts-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.posts-tabs::-webkit-scrollbar { display: none; }
.posts-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 11px;
  border: 1px solid var(--l-line);
  border-radius: 9px;
  background: #fff;
  color: #66707f;
  font: 650 11.5px/1.2 var(--font-ui);
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.posts-tabs button b {
  padding: 1px 6px;
  border-radius: 99px;
  background: #f1f3f7;
  color: #77818f;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.posts-tabs button:hover { border-color: #d3d9e2; color: #2b3644; }
.posts-tabs button.is-on {
  background: #17293f;
  border-color: #17293f;
  color: #fff;
  box-shadow: 0 4px 12px -8px rgba(23, 41, 63, .7);
}
.posts-tabs button.is-on b { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- kerangka daftar ---------- */
.posts-shell { overflow: visible; }
.posts-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--l-line-soft);
}
.posts-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  gap: 9px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}
.posts-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(168, 38, 31, .1); }
.posts-search svg { width: 16px; height: 16px; flex: none; color: #98a1af; }
.posts-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--l-ink);
  font: 13px/1.4 var(--font-ui);
  outline: none;
}
.posts-search input::-webkit-search-cancel-button { display: none; }
.posts-search__clear {
  display: none;
  place-items: center;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 6px;
  background: #f1f3f7;
  color: #77818f;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.posts-search__clear.is-visible { display: grid; }
.posts-search__clear:hover { background: #fdeeed; color: #b3382e; }
.posts-search kbd {
  padding: 2px 5px;
  border: 1px solid #e3e7ec;
  border-radius: 5px;
  background: #f7f9fb;
  color: #98a1af;
  font: 10px/1.2 var(--font-mono);
}
.posts-select { width: auto; min-width: 138px; padding: 8px 30px 8px 10px; font-size: 12.5px; border-radius: 9px; }
.posts-views {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--l-line);
  border-radius: 9px;
  background: #f4f6f9;
  margin-left: auto;
}
.posts-views button {
  display: grid;
  place-items: center;
  width: 30px; height: 28px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #7b8492;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.posts-views button svg { width: 15px; height: 15px; }
.posts-views button:hover { color: #2b3644; }
.posts-views button.is-on { background: #fff; color: #202a3a; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

/* ---------- filter aktif ---------- */
.posts-active {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 16px;
}
.posts-active:not(:empty) { padding: 10px 16px; border-bottom: 1px solid var(--l-line-soft); background: #fbfcfd; }
.posts-active__label { color: var(--l-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #e2e7ee;
  border-radius: 7px;
  background: #fff;
  color: #4a5564;
  font: 600 11px/1.3 var(--font-ui);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.filter-chip span { color: #98a1af; font-size: 13px; line-height: 1; }
.filter-chip:hover { border-color: #e6c3c0; color: #b3382e; }
.filter-chip:hover span { color: #b3382e; }
.posts-active__reset { border: 0; background: none; color: #8b95a3; font: 650 11px var(--font-ui); cursor: pointer; text-decoration: underline; }
.posts-active__reset:hover { color: #b3382e; }

/* ---------- tabel ---------- */
.posts-body { position: relative; transition: opacity .15s; }
.posts-body.is-loading { opacity: .55; pointer-events: none; }
.posts-body.is-loading::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
  content: "";
  pointer-events: none;
}
.posts-table { font-size: 12.5px; table-layout: fixed; }
.posts-table th:nth-child(1) { width: 42px; }
.posts-table th:nth-child(3) { width: 92px; }
.posts-table th:nth-child(4) { width: 118px; }
.posts-table th:nth-child(5) { width: 132px; }
.posts-table th:nth-child(6) { width: 88px; }
.posts-table th:nth-child(7) { width: 104px; }
.posts-table th:nth-child(8) { width: 136px; }
.posts-table th {
  padding: 11px 12px;
  background: #fbfcfd;
  border-bottom: 1px solid var(--l-line-soft);
  color: #98a1af;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
}
.posts-table td { padding: 11px 12px; border-bottom: 1px solid #f4f6f9; }
.posts-table tbody tr { transition: background .12s; }
.posts-table tbody tr:hover { background: #fbfcfd; }
.posts-table tbody tr.is-selected { background: #fdf6f5; box-shadow: inset 2px 0 0 #b3382e; }
.posts-table tbody tr:last-child td { border-bottom: 0; }
.posts-check { width: 40px; padding-right: 0 !important; }
.posts-check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.posts-cell-title { min-width: 0; }
.posts-item { display: flex; align-items: stretch; gap: 11px; min-width: 0; }
.posts-thumb {
  width: 64px; height: auto;
  min-height: 40px;
  align-self: stretch;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--l-line-soft);
  border-radius: 7px;
  background: #f1f4f8;
  object-fit: cover;
}
.posts-thumb--empty { display: grid; place-items: center; color: #b4bdc9; }
.posts-thumb--empty svg { width: 16px; height: 16px; }
.posts-item__text { align-self: center; min-width: 0; }
.posts-item__text > a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--l-ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.posts-item__text > a:hover { color: var(--brand); }
.posts-item__meta { display: block; margin-top: 2px; color: #98a1af; font-size: 10.5px; }
.posts-flags { display: inline-flex; gap: 5px; margin-left: 4px; vertical-align: middle; }
.flag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: #f1f3f7;
  color: #77818f;
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.flag--breaking { background: #fdeeed; color: #b3382e; }
.flag--hero { background: #fbf3e2; color: #a97809; }
.posts-muted { color: #7c8697; font-size: 11.5px; white-space: nowrap; }
.posts-time { color: #98a1af; font-size: 11px; }
.posts-table .cat-chip { max-width: 120px; }
.posts-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: #8b95a3;
  cursor: pointer;
  text-decoration: none;
  transition: background .14s, color .14s, border-color .14s;
}
.posts-iconbtn svg { width: 14px; height: 14px; }
.posts-iconbtn:hover { background: #f2f4f7; border-color: #e6eaf0; color: #2b3644; text-decoration: none; }
.posts-iconbtn.is-danger:hover { background: #fdeeed; border-color: #f3d6d3; color: #b3382e; }
.posts-table .cell-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }

/* ---------- tampilan kartu ---------- */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; padding: 16px; }
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--l-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pcard:hover { transform: translateY(-2px); border-color: #dbe0e8; box-shadow: 0 12px 26px -18px rgba(24, 33, 47, .45); }
.pcard.is-selected { border-color: #e2a7a2; box-shadow: 0 0 0 2px #fbeeec; }
.pcard__check { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(16, 24, 40, .18); }
.pcard__check input { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; }
.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f1f4f8;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__ph { display: grid; place-items: center; width: 100%; height: 100%; color: #b4bdc9; }
.pcard__ph svg { width: 26px; height: 26px; }
.pcard__badge { position: absolute; top: 9px; right: 9px; }
.pcard__badge .badge { box-shadow: 0 1px 3px rgba(16, 24, 40, .18); }
.pcard__body { display: flex; flex-direction: column; gap: 5px; flex: 1; padding: 12px 13px 12px; }
.pcard__cat {
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--c, #b3382e) 10%, #fff);
  color: var(--c, #b3382e);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pcard__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--l-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.42;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pcard__title:hover { color: var(--brand); }
.pcard__meta { color: #98a1af; font-size: 10.5px; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--l-line-soft); }
.pcard__views { color: #7c8697; font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pcard__actions { display: flex; align-items: center; gap: 3px; }
.pcard__actions .btn--sm { padding: 5px 8px; font-size: 11px; }

/* ---------- keadaan kosong / galat / skeleton ---------- */
.posts-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 54px 20px 58px; text-align: center; }
.posts-empty__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 15px; background: #f2f4f8; color: #98a1af; }
.posts-empty__icon svg { width: 26px; height: 26px; }
.posts-empty h3 { margin: 0; color: var(--l-ink); font-size: 15.5px; font-weight: 700; }
.posts-empty p { max-width: 42ch; margin: 0 0 10px; color: #8b95a3; font-size: 12.5px; line-height: 1.6; }
.posts-error { padding: 40px 20px; text-align: center; }
.posts-error p { color: #b3382e; font-size: 12.5px; }
.posts-skeleton-wrap { padding: 8px 16px 16px; }
.posts-skeleton { display: grid; grid-template-columns: 50px minmax(0, 1fr) 90px 110px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f4f6f9; }
.sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 37%, #eef1f5 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease infinite; }
.sk--thumb { height: 38px; border-radius: 7px; }
.sk--line { height: 13px; }
.sk--pill { height: 18px; width: 74px; border-radius: 99px; }
.sk--short { height: 11px; width: 88px; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- aksi massal ---------- */
.posts-bulk {
  position: sticky;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 16px 12px;
  padding: 9px 12px 9px 16px;
  border-radius: 12px;
  background: #17293f;
  color: #fff;
  box-shadow: 0 16px 34px -18px rgba(16, 24, 40, .7);
  animation: bulk-in .18s var(--ease);
}
@keyframes bulk-in { from { opacity: 0; transform: translateY(8px); } }
.posts-bulk__count { font-size: 12px; }
.posts-bulk__all {
  margin-right: auto;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: transparent;
  color: #c3cede;
  font: 600 10.5px/1.2 var(--font-ui);
  cursor: pointer;
}
.posts-bulk__all:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.posts-bulk__count b { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.posts-bulk__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.posts-bulk .btn { border-radius: 8px; }
.posts-bulk .btn--ghost { color: #c3cede; }
.posts-bulk .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- footer & pager ---------- */
.posts-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--l-line-soft);
}
.posts-foot__info { color: #8b95a3; font-size: 11.5px; }
.posts-foot__info b { color: #4a5564; font-weight: 700; }
.posts-foot__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.posts-per { display: inline-flex; align-items: center; gap: 6px; color: #98a1af; font-size: 10.5px; }
.posts-per select { padding: 5px 24px 5px 8px; border: 1px solid var(--l-line); border-radius: 7px; background: #fff; color: #4a5564; font: 650 11px var(--font-ui); }
.posts-pager { display: flex; align-items: center; gap: 3px; }
.posts-pager__btn {
  display: grid;
  place-items: center;
  min-width: 30px; height: 30px;
  padding: 0 7px;
  border: 1px solid var(--l-line);
  border-radius: 7px;
  background: #fff;
  color: #5a6676;
  font: 650 11.5px/1 var(--font-ui);
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.posts-pager__btn:hover:not(:disabled) { border-color: #c9d1dc; color: #202a3a; }
.posts-pager__btn.is-on { background: #17293f; border-color: #17293f; color: #fff; }
.posts-pager__btn:disabled { opacity: .45; cursor: not-allowed; }
.posts-pager__gap { padding: 0 4px; color: #98a1af; font-size: 11px; }

/* ---------- responsif ---------- */
@media (max-width: 1080px) {
  .posts-table th:nth-child(5), .posts-table td:nth-child(5) { display: none; }
}
@media (max-width: 900px) {
  .posts-table th:nth-child(4), .posts-table td:nth-child(4) { display: none; }
  .posts-select { min-width: 120px; }
}
@media (max-width: 720px) {
  .posts-table th:nth-child(6), .posts-table td:nth-child(6),
  .posts-table th:nth-child(7), .posts-table td:nth-child(7) { display: none; }
  .posts-cell-title { max-width: none; }
  .posts-head { align-items: flex-start; }
  .posts-head__actions { width: 100%; }
  .posts-head__actions .btn { flex: 1; justify-content: center; }
  .posts-toolbar { padding: 11px 12px; }
  .posts-search { flex-basis: 100%; }
  .posts-search kbd { display: none; }
  .posts-select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .posts-select#furut { flex-basis: 100%; }
  .posts-views { display: none; }
  .posts-tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .posts-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 12px; gap: 11px; }
  .posts-foot { padding: 11px 12px; }
  .posts-foot__right { width: 100%; justify-content: space-between; }
  .posts-bulk { margin: 0 10px 10px; padding: 9px 10px; }
  .posts-bulk__actions { width: 100%; }
  .posts-bulk__actions .btn { flex: 1; }
  .posts-table td, .posts-table th { padding: 10px 11px; }
  .posts-item__text > a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ====================================================================
   Pustaka media — unggah pintar, kompresi otomatis, grid aset konsisten.
   ==================================================================== */
.media-page {
  --m-line: #e7eaef;
  --m-line-soft: #eef1f5;
  --m-ink: #18212f;
  --m-muted: #7c8697;
  --m-faint: #98a1af;
  max-width: 1400px;
  margin: 0 auto;
}
.media-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.media-title {
  margin: 0 0 4px;
  color: var(--m-ink);
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 760;
  letter-spacing: -.032em;
  line-height: 1.18;
}
.media-sub { margin: 0; color: var(--m-muted); font-size: 12.5px; line-height: 1.6; }
.media-sub b { color: #3f4b5c; font-weight: 700; }
.media-head__actions { display: flex; gap: 9px; align-items: center; }
.media-head__actions .btn svg { width: 16px; height: 16px; }

/* ---------- dropzone ---------- */
.media-drop {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1.5px dashed #d3dae3;
  border-radius: 14px;
  background:
    radial-gradient(420px 160px at 92% 0%, rgba(168, 38, 31, .05), transparent 70%),
    #fff;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.media-drop.is-over {
  border-color: var(--brand);
  background:
    radial-gradient(420px 160px at 92% 0%, rgba(168, 38, 31, .09), transparent 70%),
    #fff9f8;
  box-shadow: 0 0 0 4px rgba(168, 38, 31, .07);
}
.media-drop__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  background: #f3f5f9;
  color: #77818f;
}
.media-drop__icon svg { width: 21px; height: 21px; }
.media-drop__copy { flex: 1; min-width: 220px; }
.media-drop__copy strong { display: block; margin-bottom: 2px; color: var(--m-ink); font-size: 13px; font-weight: 680; }
.media-drop__copy span { color: #8b95a3; font-size: 11.5px; line-height: 1.55; }
.media-drop .btn { flex: none; }

/* ---------- antrean unggah ---------- */
.media-queue {
  margin-bottom: 14px;
  padding: 6px 14px 10px;
  border: 1px solid var(--m-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}
.media-queue__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--m-line-soft);
}
.media-queue__thumb {
  width: 42px; height: 32px;
  flex: none;
  border-radius: 7px;
  object-fit: cover;
  background: #f1f4f8;
}
.media-queue__thumb--err { display: grid; place-items: center; color: #b3382e; font-weight: 800; }
.media-queue__body { flex: 1; min-width: 0; }
.media-queue__body strong {
  display: block;
  overflow: hidden;
  color: #334052;
  font-size: 11.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-queue__meta { display: block; color: #8b95a3; font-size: 10.5px; }
.media-queue__track {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 99px;
  background: #f0f2f6;
  overflow: hidden;
}
.media-queue__track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #2f6b9e, #4a8ac2);
  transition: width .2s linear;
}
.media-queue__item.is-done .media-queue__track i { background: linear-gradient(90deg, #1d7a4c, #2f9e63); }
.media-queue__item.is-error .media-queue__track i { background: #b3382e; }
.media-queue__status { flex: none; width: 38px; color: #77818f; font-size: 10.5px; font-weight: 700; text-align: right; }
.media-queue__item.is-done .media-queue__status { color: #1d7a4c; font-size: 13px; }
.media-queue__item.is-error .media-queue__status { color: #b3382e; }
.media-queue__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; }
.media-queue__summary { color: #77818f; font-size: 11px; }

/* ---------- toolbar ---------- */
.media-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.media-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  gap: 9px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}
.media-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(168, 38, 31, .1); }
.media-search svg { width: 16px; height: 16px; flex: none; color: #98a1af; }
.media-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--m-ink);
  font: 13px/1.4 var(--font-ui);
  outline: none;
}
.media-search input::-webkit-search-cancel-button { display: none; }
.media-search__clear {
  display: none;
  place-items: center;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 6px;
  background: #f1f3f7;
  color: #77818f;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.media-search__clear.is-visible { display: grid; }
.media-search__clear:hover { background: #fdeeed; color: #b3382e; }
.media-search kbd {
  padding: 2px 5px;
  border: 1px solid #e3e7ec;
  border-radius: 5px;
  background: #f7f9fb;
  color: #98a1af;
  font: 10px/1.2 var(--font-mono);
}
.media-select { width: auto; min-width: 140px; padding: 8px 30px 8px 10px; font-size: 12.5px; border-radius: 9px; }
.media-per { display: inline-flex; align-items: center; gap: 6px; color: #98a1af; font-size: 10.5px; }
.media-per select { padding: 7px 24px 7px 8px; border: 1px solid var(--m-line); border-radius: 7px; background: #fff; color: #4a5564; font: 650 11px var(--font-ui); }

/* ---------- statistik ---------- */
.media-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 14px;
  padding: 10px 4px;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: #fff;
}
.media-stat { display: flex; flex-direction: column; gap: 1px; padding: 2px 16px; border-right: 1px solid var(--m-line-soft); }
.media-stat:last-child { border-right: 0; }
.media-stat span { color: #98a1af; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.media-stat b { color: var(--m-ink); font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.media-stat small { color: #98a1af; font-size: 9.5px; }

/* ---------- grid ---------- */
.media-body { transition: opacity .15s; }
.media-body.is-loading { opacity: .55; pointer-events: none; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 13px; }
.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.mcard:hover { transform: translateY(-2px); border-color: #dbe0e8; box-shadow: 0 12px 26px -18px rgba(24, 33, 47, .45); }
.mcard.is-selected { border-color: #e2a7a2; box-shadow: 0 0 0 2px #fbeeec; }
.mcard__check {
  position: absolute;
  top: 9px; left: 9px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}
.mcard__check input { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; }
.mcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #f1f4f8;
  cursor: zoom-in;
}
.mcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.mcard:hover .mcard__media img { transform: scale(1.03); }
.mcard__ratio {
  position: absolute;
  right: 8px; top: 8px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(23, 41, 63, .72);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.mcard__ratio.is-warn { background: rgba(179, 56, 46, .88); }
.mcard__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(16, 22, 30, .32);
  color: #fff;
  opacity: 0;
  transition: opacity .16s;
}
.mcard__zoom svg { width: 22px; height: 22px; }
.mcard:hover .mcard__zoom { opacity: 1; }
.mcard__body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 10px 11px 9px; }
.mcard__name { overflow: hidden; color: #2b3644; font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mcard__meta { color: #6f7a89; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mcard__sub { color: #98a1af; font-size: 9.5px; }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--m-line-soft); }
.mcard__used { color: #98a1af; font-size: 9.5px; font-weight: 600; }
.mcard__used.is-used { color: #2f6b9e; }
.mcard__actions { display: flex; align-items: center; gap: 1px; }
.mcard__actions .posts-iconbtn { width: 26px; height: 26px; }

/* ---------- aksi massal ---------- */
.media-bulk {
  position: sticky;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 9px 12px 9px 16px;
  border-radius: 12px;
  background: #17293f;
  color: #fff;
  box-shadow: 0 16px 34px -18px rgba(16, 24, 40, .7);
}
.media-bulk span { font-size: 12px; }
.media-bulk span b { font-size: 14px; font-variant-numeric: tabular-nums; }
.media-bulk__actions { display: flex; gap: 6px; margin-left: auto; }
.media-bulk .btn--ghost { color: #c3cede; }
.media-bulk .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- footer ---------- */
.media-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 13px;
  color: #8b95a3;
  font-size: 11.5px;
}
.media-pager { display: flex; align-items: center; gap: 3px; }

/* ---------- detail ---------- */
.media-detail__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr); gap: 18px; }
.media-detail__preview { align-self: start; overflow: hidden; border: 1px solid var(--m-line); border-radius: 12px; background: #f1f4f8; }
.media-detail__preview img { display: block; width: 100%; height: auto; }
.media-detail__side { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.media-kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 0; font-size: 11.5px; }
.media-kv dt { color: #98a1af; }
.media-kv dd { margin: 0; color: #3a4657; font-weight: 600; text-align: right; }
.media-detail__alt .field, .media-detail__alt { margin: 0; }
.media-detail__alt label { display: block; margin-bottom: 5px; color: #6c7787; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.media-detail__alt .input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12.5px; }
.media-detail__alt .hint { display: block; margin: 5px 0 7px; color: #98a1af; font-size: 10.5px; }
.media-detail__variants { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid var(--m-line-soft); }
.media-detail__label { margin-bottom: 2px; color: #98a1af; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.variant-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; background: #fafbfc; }
.variant-row__label { width: 42px; flex: none; color: #5a6676; font-size: 9.5px; font-weight: 750; letter-spacing: .05em; }
.variant-row__meta { flex: 1; color: #8b95a3; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.variant-row .btn { padding: 4px 7px; font-size: 10px; }
.media-detail__actions { margin-top: 2px; }

/* ---------- responsif ---------- */
@media (max-width: 900px) {
  .media-detail__body { grid-template-columns: minmax(0, 1fr); }
  .media-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .media-stat:nth-child(2) { border-right: 0; }
}
@media (max-width: 720px) {
  .media-head { align-items: flex-start; }
  .media-head__actions { width: 100%; }
  .media-head__actions .btn { flex: 1; justify-content: center; }
  .media-drop { padding: 14px; gap: 12px; }
  .media-drop .btn { width: 100%; justify-content: center; }
  .media-search { flex-basis: 100%; }
  .media-search kbd { display: none; }
  .media-select { flex: 1; min-width: 0; }
  .media-per { margin-left: auto; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .mcard__body { padding: 9px; }
  .mcard__name { font-size: 11px; }
  .media-bulk { padding: 9px 10px; }
  .media-foot { gap: 8px; }
}

/* ====================================================================
   Rubrik — tabel pintar, filter realtime, form modal profesional.
   ==================================================================== */
.cats-page {
  --k-line: #e7eaef;
  --k-line-soft: #eef1f5;
  --k-ink: #18212f;
  --k-muted: #7c8697;
  --k-faint: #98a1af;
  max-width: 1400px;
  margin: 0 auto;
}
.cats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cats-title {
  margin: 0 0 4px;
  color: var(--k-ink);
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 760;
  letter-spacing: -.032em;
  line-height: 1.18;
}
.cats-sub { margin: 0; color: var(--k-muted); font-size: 12.5px; line-height: 1.6; }
.cats-sub b { color: #3f4b5c; font-weight: 700; }
.cats-head__actions { display: flex; gap: 9px; align-items: center; }

/* filter chips */
.cats-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cats-filters::-webkit-scrollbar { display: none; }
.cats-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 11px;
  border: 1px solid var(--k-line);
  border-radius: 9px;
  background: #fff;
  color: #66707f;
  font: 650 11.5px/1.2 var(--font-ui);
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.cats-filters button b {
  padding: 1px 6px;
  border-radius: 99px;
  background: #f1f3f7;
  color: #77818f;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.cats-filters button:hover { border-color: #d3d9e2; color: #2b3644; }
.cats-filters button.is-on { background: #17293f; border-color: #17293f; color: #fff; box-shadow: 0 4px 12px -8px rgba(23, 41, 63, .7); }
.cats-filters button.is-on b { background: rgba(255, 255, 255, .16); color: #fff; }

/* toolbar */
.cats-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.cats-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  gap: 9px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}
.cats-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(168, 38, 31, .1); }
.cats-search svg { width: 16px; height: 16px; flex: none; color: #98a1af; }
.cats-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--k-ink);
  font: 13px/1.4 var(--font-ui);
  outline: none;
}
.cats-search input::-webkit-search-cancel-button { display: none; }
.cats-search__clear {
  display: none;
  place-items: center;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 6px;
  background: #f1f3f7;
  color: #77818f;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cats-search__clear.is-visible { display: grid; }
.cats-search__clear:hover { background: #fdeeed; color: #b3382e; }
.cats-search kbd {
  padding: 2px 5px;
  border: 1px solid #e3e7ec;
  border-radius: 5px;
  background: #f7f9fb;
  color: #98a1af;
  font: 10px/1.2 var(--font-mono);
}
.cats-select { width: auto; min-width: 150px; padding: 8px 30px 8px 10px; font-size: 12.5px; border-radius: 9px; }

/* statistik */
.cats-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
  padding: 10px 4px;
  border: 1px solid var(--k-line);
  border-radius: var(--radius-l);
  background: #fff;
}
.cats-stat { display: flex; flex-direction: column; gap: 1px; padding: 2px 16px; border-right: 1px solid var(--k-line-soft); }
.cats-stat:last-child { border-right: 0; }
.cats-stat span { color: #98a1af; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cats-stat b { color: var(--k-ink); font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cats-stat small { color: #98a1af; font-size: 9.5px; }

/* tabel */
.cats-body { transition: opacity .15s; }
.cats-body.is-loading { opacity: .55; pointer-events: none; }
.cats-table { font-size: 12.5px; table-layout: fixed; }
.cats-table th {
  padding: 11px 14px;
  background: #fbfcfd;
  border-bottom: 1px solid var(--k-line-soft);
  color: #98a1af;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
}
.cats-table th:nth-child(1) { width: 26%; }
.cats-table th:nth-child(3) { width: 82px; }
.cats-table th:nth-child(4) { width: 108px; }
.cats-table th:nth-child(5) { width: 96px; }
.cats-table th:nth-child(6) { width: 96px; }
.cats-table th:nth-child(7) { width: 148px; }
.cats-table td { padding: 11px 14px; border-bottom: 1px solid #f4f6f9; vertical-align: middle; }
.cats-table tbody tr { transition: background .12s; }
.cats-table tbody tr:hover { background: #fbfcfd; }
.cats-table tbody tr:last-child td { border-bottom: 0; }
.cats-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cats-dot { width: 10px; height: 10px; flex: none; margin-top: 4px; border-radius: 3px; box-shadow: 0 0 0 3px #f4f6f9; }
.cats-name-link {
  display: block;
  overflow: hidden;
  color: var(--k-ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cats-name-link:hover { color: var(--brand); }
.cats-slug { display: block; color: #98a1af; font-size: 10px; font-family: var(--font-mono); }
.cats-desc {
  display: -webkit-box;
  overflow: hidden;
  color: #6f7a89;
  font-size: 11.5px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cats-muted { color: #a3acb9; font-size: 11px; }
.cats-count { color: #2f6b9e; font-size: 12px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.cats-count:hover { text-decoration: underline; }
.cats-count.is-zero { color: #a3acb9; font-weight: 600; }
.cats-order { white-space: nowrap; }
.cats-move {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-right: 2px;
  border: 1px solid var(--k-line);
  border-radius: 6px;
  background: #fff;
  color: #77818f;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.cats-move:hover:not(:disabled) { border-color: #c9d1dc; color: #202a3a; }
.cats-move:disabled { opacity: .35; cursor: not-allowed; }
.cats-skeleton { padding: 8px 16px 16px; }
.cats-skel { display: grid; grid-template-columns: 18px minmax(0, 1fr) 90px 90px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f4f6f9; }
.cats-skel .sk { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 37%, #eef1f5 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease infinite; }
.cats-skel .sk--thumb { height: 26px; width: 18px; }
.cats-skel .sk--pill { height: 18px; border-radius: 99px; }
.cats-skel .sk--short { height: 11px; }

/* ---------- modal ---------- */
.cats-modal { width: min(900px, 100%); padding: 0; overflow: hidden; }
.cats-modal .spa__modal-head { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--k-line-soft); }
.cats-modal__close {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f2f4f7;
  color: #77818f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cats-modal__close:hover { background: #fdeeed; color: #b3382e; }
.cats-form { display: flex; flex-direction: column; max-height: calc(90vh - 74px); overflow: auto; }
.cats-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 20px; padding: 18px 20px 6px; }
.cats-form__main { min-width: 0; }
.cats-form .field { margin-bottom: 13px; }
.cats-form label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; color: #6c7787; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cats-form label em { color: #a3acb9; font-size: 9.5px; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cats-form .input, .cats-form .textarea { font-size: 13.5px; border-radius: 9px; }
.cats-form .textarea { min-height: 82px; }
.cats-form .input:focus, .cats-form .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(168, 38, 31, .1); }
.cats-form .input.is-invalid { border-color: #d9534a; box-shadow: 0 0 0 3px rgba(217, 83, 74, .12); }
.field__error { display: block; min-height: 0; margin-top: 3px; color: #b3382e; font-size: 10.5px; font-weight: 600; }
.field__error:not(:empty) { margin-top: 4px; }
.cats-counter { margin-top: 4px; color: #a3acb9; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.cats-colors { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cats-colors input[type=color] {
  width: 38px; height: 32px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.cats-swatch {
  width: 24px; height: 24px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 7px;
  box-shadow: 0 0 0 1px #dfe4ec;
  cursor: pointer;
  transition: transform .14s, box-shadow .14s;
}
.cats-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 1px #b3382e; }
.cats-form__row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 13px; }
.cats-form__row .field { margin-bottom: 0; width: 110px; }
.cats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 7px;
  color: #4a5564;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.cats-toggle input {
  appearance: none;
  position: relative;
  width: 34px; height: 20px;
  flex: none;
  margin: 0;
  border-radius: 99px;
  background: #d8dde5;
  cursor: pointer;
  transition: background .16s;
}
.cats-toggle input::after {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  content: "";
  transition: transform .16s;
}
.cats-toggle input:checked { background: #1f8a5b; }
.cats-toggle input:checked::after { transform: translateX(14px); }
.cats-seo { margin-bottom: 8px; padding: 11px 13px; border: 1px solid var(--k-line); border-radius: 10px; background: #fbfcfd; }
.cats-seo summary { color: #4a5564; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.cats-seo summary em { color: #a3acb9; font-size: 10px; font-style: normal; font-weight: 500; }
.cats-seo[open] summary { margin-bottom: 10px; }
.cats-seo .field:last-child { margin-bottom: 0; }

/* pratinjau */
.cats-preview { position: sticky; top: 0; align-self: start; }
.cats-preview__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 12px;
  padding: 14px;
  border: 1px solid var(--k-line);
  border-radius: 11px;
  background: #fff;
}
.cats-preview__dot { width: 12px; height: 12px; margin-bottom: 4px; border-radius: 4px; background: #a8261f; }
.cats-preview__card strong { color: var(--k-ink); font-size: 14px; font-weight: 700; line-height: 1.35; }
.cats-preview__slug { color: #98a1af; font-size: 10px; font-family: var(--font-mono); }
.cats-preview__card p { margin: 6px 0 0; color: #7c8697; font-size: 11px; line-height: 1.5; }
.cats-preview__notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cats-preview__notes li { position: relative; padding-left: 13px; color: #98a1af; font-size: 10px; line-height: 1.5; }
.cats-preview__notes li::before { position: absolute; left: 0; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: #c3cad4; content: ""; }

.cats-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 20px;
  border-top: 1px solid var(--k-line-soft);
  background: #fbfcfd;
}
.cats-form__hint { color: #98a1af; font-size: 10.5px; }

/* ---------- responsif ---------- */
@media (max-width: 900px) {
  .cats-table th:nth-child(2), .cats-table td:nth-child(2) { display: none; }
  .cats-form__grid { grid-template-columns: minmax(0, 1fr); }
  .cats-preview { position: static; }
  .cats-preview__notes { display: none; }
  .cats-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .cats-stat:nth-child(2) { border-right: 0; }
}
@media (max-width: 720px) {
  .cats-head { align-items: flex-start; }
  .cats-head__actions { width: 100%; }
  .cats-head__actions .btn { flex: 1; justify-content: center; }
  .cats-filters { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .cats-search { flex-basis: 100%; }
  .cats-search kbd { display: none; }
  .cats-select { flex: 1; min-width: 0; }
  .cats-table thead { display: none; }
  .cats-table, .cats-table tbody, .cats-table tr, .cats-table td { display: block; width: 100%; }
  .cats-table tbody tr { padding: 12px 14px; border-bottom: 1px solid #f1f3f7; }
  .cats-table tbody tr:last-child { border-bottom: 0; }
  .cats-table td { padding: 0; border: 0; }
  .cats-table td.cats-cell-name { margin-bottom: 6px; }
  .cats-table td.cats-cell-name .cats-name-link { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cats-table td.cats-desc,
  .cats-table td:nth-child(4),
  .cats-table td:nth-child(5),
  .cats-table td.cats-order { display: none; }
  .cats-table td:nth-child(3) { display: inline-block; width: auto; margin-right: 10px; }
  .cats-table td:nth-child(3)::before { margin-right: 4px; color: #98a1af; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; content: "Artikel"; }
  .cats-table td.cell-actions { display: flex; flex-direction: row; justify-content: flex-start; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #f4f6f9; }
  .cats-form__grid { padding: 14px 14px 4px; }
  .cats-form__foot { padding: 12px 14px; }
  .cats-form__hint { display: none; }
  .cats-form__foot .btn-row { width: 100%; }
  .cats-form__foot .btn { flex: 1; justify-content: center; }
  .cats-form__row { gap: 10px; }
  .cats-form__row .field { width: 100%; }
}

/* ====================================================================
   Label — variasi tabel & awan label (mewarisi sistem visual Rubrik).
   ==================================================================== */
.cats-table--tags th:nth-child(1) { width: 42%; }
.cats-table--tags th:nth-child(2) { width: 132px; }
.cats-table--tags th:nth-child(3) { width: 132px; }
.cats-table--tags th:nth-child(4) { width: 150px; }
.cats-table--tags .cats-slug { font-size: 9.5px; }
.cats-form__note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #e6eaf0;
  border-radius: 9px;
  background: #f8fafc;
  color: #7c8697;
  font-size: 11px;
  line-height: 1.55;
}

/* awan label */
.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 20px 22px 24px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: .46em .82em;
  border: 1px solid #e3e8ef;
  border-radius: 99px;
  background: #fff;
  color: #5a6676;
  font-family: var(--font-ui);
  line-height: 1.2;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s, transform .14s;
}
.tag-pill b {
  padding: 1px 6px;
  border-radius: 99px;
  background: #f1f3f7;
  color: #77818f;
  font-size: .7em;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.tag-pill:hover { transform: translateY(-1px); border-color: #cfd6e0; color: #202a3a; }
.tag-pill.is-used { border-color: #e4d7f2; background: #fbf8fe; color: #5b3f86; }
.tag-pill.is-used b { background: #efe6f8; color: #5b3f86; }
.tag-pill.is-used:hover { border-color: #c9b2e6; color: #4a2f75; }

@media (max-width: 720px) {
  .cats-table--tags td:nth-child(2) {
    display: inline-block;
    width: auto;
    margin-right: 10px;
  }
  .cats-table--tags td:nth-child(2)::before {
    margin-right: 4px;
    color: #98a1af;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    content: "Dipakai";
  }
  .cats-table--tags td:nth-child(3) { display: none !important; }
  .cats-table--tags td:nth-child(4) {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #f4f6f9;
  }
  .tags-cloud { padding: 14px 14px 18px; gap: 7px; }
  .tag-pill { padding: .44em .7em; }
}

/* ====================================================================
   Halaman statis — tabel & modal editor (mewarisi sistem visual Rubrik).
   ==================================================================== */
.cats-table--pages th:nth-child(1) { width: 42%; }
.cats-table--pages th:nth-child(2) { width: 96px; }
.cats-table--pages th:nth-child(3) { width: 96px; }
.cats-table--pages th:nth-child(4) { width: 132px; }
.cats-table--pages th:nth-child(5) { width: 158px; }

.pages-modal { width: min(980px, 100%); }
.pages-form__grid { grid-template-columns: minmax(0, 1fr) 262px; }
.pages-form__main { min-width: 0; }
.pages-editor { margin-top: 2px; }
.pages-editor .editor__bar { border-radius: 10px 10px 0 0; }
.pages-editor .editor__paper { min-height: 280px; max-height: 36vh; padding: 20px 22px; }
.pages-editor .editor__doc { max-width: none; font-size: 15.5px; line-height: 1.7; }
.pages-editor .editor__doc.is-invalid { outline: 2px solid #e6a9a4; outline-offset: 4px; border-radius: 6px; }
.pages-aside { position: sticky; top: 0; align-self: start; }
.pages-toggles { display: grid; gap: 9px; margin: 10px 0 14px; padding: 11px 12px; border: 1px solid var(--k-line, #e7eaef); border-radius: 10px; background: #fbfcfd; }
.pages-toggles .cats-toggle { padding-bottom: 0; }
.pages-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--k-line, #e7eaef);
  border-radius: 10px;
  background: #fff;
}
.pages-link span { color: #98a1af; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.pages-link a {
  overflow: hidden;
  color: #2f6b9e;
  font-size: 11px;
  font-family: var(--font-mono);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pages-link a:hover { text-decoration: underline; }
.pages-aside .cats-seo { margin-bottom: 12px; }
.pages-aside .cats-seo .input,
.pages-aside .cats-seo .textarea { font-size: 12.5px; }

@media (max-width: 900px) {
  .pages-form__grid { grid-template-columns: minmax(0, 1fr); }
  .pages-aside { position: static; }
  .cats-table--pages th:nth-child(3), .cats-table--pages td:nth-child(3) { display: none; }
}
@media (max-width: 720px) {
  .pages-editor .editor__paper { min-height: 220px; max-height: 42vh; padding: 16px 14px; }
  .cats-table--pages td:nth-child(2) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 10px;
  }
  .cats-table--pages td:nth-child(2)::before {
    margin-right: 4px;
    color: #98a1af;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    content: "Status";
  }
  .cats-table--pages td:nth-child(3),
  .cats-table--pages td:nth-child(4) { display: none !important; }
  .cats-table--pages td:nth-child(5) {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #f4f6f9;
  }
  .cats-table--pages td:nth-child(1) { margin-bottom: 6px; }
  .pages-aside .cats-preview__notes { display: none; }
}

/* ====================================================================
   Manajemen iklan — inventori posisi, status kesiapan, modal per slot.
   ==================================================================== */
/* Irama vertikal halaman iklan: satu jarak seragam (12px) antar semua
   blok di bawah header, termasuk kartu audit yang sebelumnya menempel. */
.ads-page > .ads-banner { margin-bottom: 12px; }
.ads-page > .ads-banner:empty { margin-bottom: 0; }
.ads-page > .card { margin-bottom: 12px; }
.ads-page > .cats-filters,
.ads-page > .cats-toolbar,
.ads-page > .cats-stats { margin-bottom: 12px; }
.ads-page > .card:last-child { margin-bottom: 0; }

.ads-banner { margin-bottom: 12px; }
.ads-banner:empty { display: none; }
.ads-banner__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #f0d9b5;
  border-radius: var(--radius-l);
  background: #fdf8ee;
}
.ads-banner__box.is-off { border-color: #f3d6d3; background: #fdf3f2; }
.ads-banner__icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 8px;
  background: #f6e3c1;
  color: #8a6208;
  font-weight: 800;
}
.ads-banner__box.is-off .ads-banner__icon { background: #f8dedb; color: #b3382e; }
.ads-banner__box strong { display: block; color: #4a3a1a; font-size: 12.5px; font-weight: 700; }
.ads-banner__box.is-off strong { color: #7d2620; }
.ads-banner__box p { margin: 2px 0 0; color: #8a7a55; font-size: 11.5px; }
.ads-banner__box.is-off p { color: #9b5a54; }
.ads-banner__box .btn { margin-left: auto; flex: none; }

.cats-table--ads th:nth-child(1) { width: 30%; }
.cats-table--ads th:nth-child(2) { width: 104px; }
.cats-table--ads th:nth-child(3) { width: 96px; }
.cats-table--ads th:nth-child(4) { width: 88px; }
.cats-table--ads th:nth-child(5) { width: 82px; }
.cats-table--ads th:nth-child(6) { width: 76px; }
.cats-table--ads th:nth-child(7) { width: 112px; }
.cats-table--ads th:nth-child(8) { width: 126px; }
.ads-cell-pos .cats-name-link { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ads-desc {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: #98a1af;
  font-size: 10.5px;
  line-height: 1.45;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.ad-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f1f4f8;
  color: #5a6676;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ad-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.ad-status.is-ready { background: #e9f6ef; color: #167a4c; }
.ad-status.is-warn { background: #fdf4e1; color: #8a6208; }
.ad-status.is-off { background: #f1f3f6; color: #78828f; }

/* switch mini */
.ad-switch { position: relative; display: inline-flex; cursor: pointer; }
.ad-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ad-switch span {
  position: relative;
  display: block;
  width: 32px; height: 19px;
  border-radius: 99px;
  background: #d8dde5;
  transition: background .16s;
}
.ad-switch span::after {
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  content: "";
  transition: transform .16s;
}
.ad-switch input:checked + span { background: #1f8a5b; }
.ad-switch input:checked + span::after { transform: translateX(13px); }
.ad-switch input:disabled + span { opacity: .5; }

/* modal slot */
.ads-modal { width: min(900px, 100%); }
.ads-form__grid { grid-template-columns: minmax(0, 1fr) 246px; }
.ads-placement {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  padding: 10px 12px;
  border: 1px solid var(--k-line, #e7eaef);
  border-radius: 9px;
  background: #f8fafc;
}
.ads-placement__chip {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: #e9eef5;
  color: #4a5a70;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ads-placement p { margin: 0; color: #6f7a89; font-size: 11px; line-height: 1.5; }
.ads-toggles { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid var(--k-line, #e7eaef); border-radius: 10px; background: #fbfcfd; }
.ads-toggles .cats-toggle { padding-bottom: 0; }
.ads-preview { position: sticky; top: 0; align-self: start; }
.ads-preview__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 8px 0 10px;
  border: 1.5px dashed #cdd5e0;
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, #fafbfc, #fafbfc 8px, #f4f6f9 8px, #f4f6f9 16px);
  transition: opacity .16s;
}
.ads-preview__frame.is-off { opacity: .45; }
.ads-preview__label { color: #6f7a89; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.ads-preview__meta { color: #98a1af; font-size: 9.5px; }
.ads-preview__hint { margin: 0 0 10px; color: #98a1af; font-size: 10px; line-height: 1.5; }
.ads-preview__ready { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 9px; background: #f1f3f7; }
.ads-preview__ready strong { color: #4a5564; font-size: 10.5px; }
.ads-preview__ready span { color: #98a1af; font-size: 9.5px; line-height: 1.45; }
.ads-preview__ready.is-ready { background: #e9f6ef; }
.ads-preview__ready.is-ready strong { color: #167a4c; }
.ads-preview__ready.is-ready span { color: #4d8a6c; }
.ads-preview__ready.is-warn { background: #fdf4e1; }
.ads-preview__ready.is-warn strong { color: #8a6208; }
.ads-preview__ready.is-warn span { color: #9a7c3c; }
.ads-settings { width: min(560px, 100%); }

@media (max-width: 720px) {
  .cats-table--ads td:nth-child(2),
  .cats-table--ads td:nth-child(3),
  .cats-table--ads td:nth-child(4),
  .cats-table--ads td:nth-child(5),
  .cats-table--ads td:nth-child(7) { display: none !important; }
  .cats-table--ads td:nth-child(6) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 10px;
  }
  .cats-table--ads td:nth-child(6)::before {
    margin-right: 5px;
    color: #98a1af;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    content: "Aktif";
  }
  .cats-table--ads td:nth-child(8) {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #f4f6f9;
  }
  .ads-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ads-preview { position: static; }
  .ads-preview__hint { display: none; }
}

/* ====================================================================
   Pengaturan — ruang konfigurasi bertab, pratinjau identitas langsung.
   ==================================================================== */
.settings-page { --t-line: #e7eaef; --t-line-soft: #eef1f5; }
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 16px;
  align-items: start;
}
.settings-main { min-width: 0; display: grid; gap: 10px; }
.settings-tabs {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--t-line);
  border-radius: 11px;
  background: #eff2f6;
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs button {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #77818f;
  font: 650 11.5px/1.2 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.settings-tabs button:hover { color: #2b3644; }
.settings-tabs button.is-on { background: #fff; color: #202a3a; box-shadow: 0 1px 3px rgba(16, 24, 40, .13); }
.set-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: #dda32c; }
.set-dot.is-on { display: inline-block; }
.settings-panel { overflow: visible; }
.settings-panel[hidden] { display: none; }
.settings-panel .card__body { padding: 18px 20px 6px; }
.settings-panel .field { margin-bottom: 14px; }
.settings-panel .field > label { display: flex; align-items: baseline; gap: 6px; }
.settings-panel .field > label em { color: #a3acb9; font-size: 9.5px; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.settings-panel .field--toggle { margin-bottom: 14px; }
.settings-panel .grid--2 .field { margin-bottom: 14px; }
.settings-panel .hint { color: #98a1af; font-size: 10.5px; line-height: 1.5; }
.settings-panel .field__error { min-height: 0; }
.settings-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--t-line-soft);
  background: #fbfcfd;
  border-radius: 0 0 13px 13px;
}
.set-note { color: #a97809; font-size: 10.5px; font-weight: 600; }
.settings-lead { margin: 0 0 14px; color: #8b95a3; font-size: 11.5px; line-height: 1.55; }
.settings-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  line-height: 1.5;
}
.settings-note.is-warn { border: 1px solid #f0dcb4; background: #fdf8ee; color: #8a6208; }
.settings-toggles { display: grid; gap: 4px; padding: 11px 13px; margin-bottom: 14px; border: 1px solid var(--t-line); border-radius: 10px; background: #fbfcfd; }
.settings-toggles .cats-toggle { padding-bottom: 0; }
.settings-sitemap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--t-line);
  border-radius: 9px;
  background: #fff;
}
.settings-sitemap__label { color: #98a1af; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.settings-sitemap a { color: #2f6b9e; font-family: var(--font-mono); font-size: 10.5px; text-decoration: none; }
.settings-sitemap a:hover { text-decoration: underline; }

/* aset merek */
.set-assets { display: grid; gap: 10px; margin-bottom: 14px; }
.set-asset {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--t-line);
  border-radius: 11px;
  background: #fff;
  transition: opacity .15s;
}
.set-asset.is-uploading { opacity: .6; pointer-events: none; }
.set-asset__preview {
  display: grid;
  place-items: center;
  width: 74px;
  height: 58px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--t-line-soft);
  border-radius: 8px;
  background:
    repeating-conic-gradient(#f4f6f9 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}
.set-asset__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.set-asset__ph { color: #a3acb9; font-size: 18px; font-weight: 800; }
.set-asset__body { flex: 1; min-width: 0; }
.set-asset__body strong { display: block; color: #334052; font-size: 12px; font-weight: 680; }
.set-asset__body small { display: block; margin: 1px 0 7px; color: #98a1af; font-size: 10px; line-height: 1.45; }
.set-asset__body .btn { padding: 5px 9px; font-size: 10.5px; }

/* aside */
.settings-aside { position: sticky; top: 132px; display: grid; gap: 10px; }
.set-preview .card__body { padding: 16px 18px 18px; }
.set-preview__brand { display: flex; align-items: center; gap: 10px; }
.set-preview__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, #c63429, #8d1f19);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}
.set-preview__mark img { width: 100%; height: 100%; object-fit: contain; }
.set-preview__text { display: flex; flex-direction: column; min-width: 0; }
.set-preview__text strong { overflow: hidden; color: #202a3a; font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.set-preview__text small { color: #98a1af; font-size: 9.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.set-preview p { margin: 12px 0 4px; color: #6f7a89; font-size: 11.5px; line-height: 1.5; }
.set-preview__url { display: block; overflow: hidden; color: #98a1af; font-family: var(--font-mono); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.set-preview__facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--t-line-soft); }
.set-preview__facts span { color: #98a1af; font-size: 10px; }
.set-preview__facts b { color: #4a5564; font-weight: 700; }
.set-preview__facts span:last-child { padding: 1px 7px; border-radius: 99px; background: #fdf4e1; color: #8a6208; font-weight: 700; }
.set-actions .card__body { padding: 6px; }
.set-actions__list { display: grid; gap: 2px; }
.set-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s;
}
.set-action:hover { background: #f7f8fa; text-decoration: none; }
.set-action span { display: flex; flex-direction: column; }
.set-action strong { color: #334052; font-size: 11.5px; font-weight: 650; }
.set-action small { color: #98a1af; font-size: 9.5px; }
.set-action b { color: #c3cad4; font-size: 13px; }
.set-action:hover b { color: #b3382e; }

/* savebar */
.settings-savebar {
  position: sticky;
  bottom: 14px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 9px 12px 9px 16px;
  border: 1px solid #ddcfae;
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 0 14px 30px -18px rgba(16, 24, 40, .5);
  animation: setbar-in .18s var(--ease);
}
@keyframes setbar-in { from { opacity: 0; transform: translateY(8px); } }
.settings-savebar__text { color: #8a6208; font-size: 11.5px; }
.settings-savebar__text b { font-size: 13px; font-variant-numeric: tabular-nums; }

@media (max-width: 1060px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .settings-tabs button { flex: none; padding: 8px 11px; }
  .settings-panel .card__body { padding: 14px 14px 4px; }
  .settings-panel__foot { padding: 11px 14px; }
  .settings-aside { grid-template-columns: minmax(0, 1fr); }
  .set-asset { padding: 10px; gap: 11px; }
  .set-asset__preview { width: 60px; height: 48px; }
  .settings-savebar { padding: 9px 10px; }
  .settings-savebar__text { width: 100%; }
  .settings-savebar .btn-row { width: 100%; }
  .settings-savebar .btn { flex: 1; justify-content: center; }
}

/* ====================================================================
   Tim redaksi — daftar anggota, modal profil, unggah avatar pintar.
   ==================================================================== */
.cats-table--team th:nth-child(1) { width: 26%; }
.cats-table--team th:nth-child(2) { width: 196px; }
.cats-table--team th:nth-child(3) { width: 112px; }
.cats-table--team th:nth-child(4) { width: 78px; }
.cats-table--team th:nth-child(5) { width: 120px; }
.cats-table--team th:nth-child(6) { width: 88px; }
.cats-table--team th:nth-child(7) { width: 140px; }

.team-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.team-avatar {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #33465e, #22303f);
  color: #fff;
  font-weight: 750;
  flex: none;
  cursor: pointer;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-avatar--sm { width: 34px; height: 34px; font-size: 11px; }
.team-avatar--lg { width: 68px; height: 68px; font-size: 19px; }
.team-avatar--preview { width: 64px; height: 64px; font-size: 18px; margin: 0 auto 8px; }
.team-avatar--lg i {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 0;
  background: rgba(16, 22, 30, .6);
  color: #fff;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .15s;
}
.team-avatar--lg:hover i { opacity: 1; }
.team-avatar--lg.is-uploading { opacity: .55; pointer-events: none; }
.team-self {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #eef3fa;
  color: #35659c;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.role-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.role-badge--superadmin { background: #fdeeed; color: #b3382e; }
.role-badge--redaktur { background: #eef3fa; color: #35659c; }
.role-badge--kontributor { background: #f1f3f6; color: #6f7a89; }

/* modal */
.team-form .role-card,
.team-form .team-avatar,
.team-form .cats-toggle {
  display: grid;
  margin-bottom: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.team-form .role-card { display: grid; gap: 1px; padding: 9px 12px; color: #334052; }
.team-form .role-card strong { color: #334052; font-size: 11.5px; font-weight: 680; letter-spacing: 0; text-transform: none; }
.team-form .role-card small { color: #98a1af; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.team-form .role-card.is-on strong { color: #7d2620; }
.team-form .team-avatar { place-items: center; color: #fff; font-size: 19px; font-weight: 750; }
.team-form .team-avatar--lg { width: 68px; height: 68px; }
.team-form .team-avatar--preview { width: 64px; height: 64px; font-size: 18px; margin: 0 auto 8px; }
.team-form .team-avatar--lg i {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.team-form .cats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 0;
  color: #4a5564;
  font-size: 11.5px;
  font-weight: 600;
}
.team-modal { width: min(940px, 100%); }
.team-form__grid { grid-template-columns: minmax(0, 1fr) 246px; }
.team-identity { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 4px; }
.team-identity .field { flex: 1; min-width: 0; }
.team-identity__fields { flex: 1; min-width: 0; }
.team-identity__fields .grid { margin-bottom: 0; }
.team-password { display: flex; gap: 7px; }
.team-password .input { flex: 1; min-width: 0; }
.team-password .btn { flex: none; }

.role-cards { display: grid; gap: 6px; }
.role-card {
  display: grid;
  gap: 1px;
  padding: 9px 12px;
  border: 1px solid var(--k-line, #e7eaef);
  border-radius: 9px;
  background: #fbfcfd;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.role-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.role-card strong { color: #334052; font-size: 11.5px; font-weight: 680; }
.role-card small { color: #98a1af; font-size: 10px; line-height: 1.45; }
.role-card:hover { border-color: #d6dce5; }
.role-card.is-on {
  border-color: #e2b3ae;
  background: #fdf6f5;
  box-shadow: inset 3px 0 0 #b3382e;
}
.role-card.is-on strong { color: #7d2620; }
.role-card input:disabled ~ strong { color: #a3acb9; }

.team-preview { position: sticky; top: 0; align-self: start; }
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 8px 0 12px;
  padding: 16px 14px;
  border: 1px solid var(--k-line, #e7eaef);
  border-radius: 11px;
  background: #fff;
  text-align: center;
}
.team-card strong { color: #202a3a; font-size: 13px; font-weight: 700; line-height: 1.35; }
.team-card .cats-preview__slug { margin-bottom: 4px; }
.team-card p { margin: 7px 0 0; color: #7c8697; font-size: 10.5px; line-height: 1.5; }
.team-status { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--k-line, #e7eaef); border-radius: 10px; background: #fbfcfd; }
.team-meta { margin: 0 0 10px; color: #98a1af; font-size: 10px; line-height: 1.5; }
.team-profile-link { display: inline-block; color: #2f6b9e; font-size: 10.5px; font-weight: 650; text-decoration: none; }
.team-profile-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .cats-table--team th:nth-child(2), .cats-table--team td:nth-child(2),
  .cats-table--team th:nth-child(5), .cats-table--team td:nth-child(5) { display: none; }
  .team-form__grid { grid-template-columns: minmax(0, 1fr); }
  .team-preview { position: static; }
}
@media (max-width: 720px) {
  .cats-table--team td:nth-child(2),
  .cats-table--team td:nth-child(4),
  .cats-table--team td:nth-child(5) { display: none !important; }
  .cats-table--team th:nth-child(1) { width: auto; }
  .cats-table--team td:nth-child(3) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 10px;
  }
  .cats-table--team td:nth-child(3)::before {
    margin-right: 5px;
    color: #98a1af;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    content: "Peran";
  }
  .cats-table--team td:nth-child(6) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 10px;
  }
  .cats-table--team td:nth-child(6)::before {
    margin-right: 5px;
    color: #98a1af;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    content: "Status";
  }
  .cats-table--team td:nth-child(7) {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #f4f6f9;
  }
  .team-identity { flex-direction: column; align-items: flex-start; }
  .team-avatar--lg { width: 58px; height: 58px; }
  .team-form .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Halaman masuk — edisi 2026: panel cerita premium, kartu masuk modern.
   ===================================================================== */
.login--v2 .login__aside {
  background:
    radial-gradient(700px 420px at -10% -8%, rgba(190, 52, 42, .32), transparent 62%),
    radial-gradient(520px 300px at 100% 110%, rgba(80, 120, 180, .16), transparent 70%),
    linear-gradient(155deg, #17293f 0%, #0e1b2b 62%, #16283d 100%);
  position: relative;
  overflow: hidden;
}
.login--v2 .login__aside::before {
  position: absolute; right: -110px; top: 22%;
  width: 260px; height: 260px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, .035), 0 0 0 70px rgba(255, 255, 255, .022);
  content: "";
}
.login--v2 .login__brand { gap: 12px; font-size: 15px; position: relative; z-index: 1; }
.login--v2 .login__mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c63429, #8d1f19);
  font-size: 15px;
  box-shadow: 0 10px 24px -10px rgba(200, 60, 50, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.login__eyebrow {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  color: #c9d6e4; font-size: .66rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
}
.login--v2 .login__pitch h1 { color: #fff; margin-bottom: 12px; }
.login--v2 .login__list {
  position: relative; z-index: 1;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
}
.login--v2 .login__list li { color: #b9c7d7; }

/* ---------- kartu masuk ---------- */
.login--v2 .login__main { padding: clamp(22px, 5vw, 60px); }
.login--v2 .login__form {
  width: min(400px, 100%);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 34px 70px -38px rgba(20, 23, 28, .4);
}
.login__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login__logo-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #c63429, #8d1f19);
  color: #fff; font-size: 17px; font-weight: 800;
  box-shadow: 0 12px 26px -12px rgba(200, 60, 50, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.login__head h2 { margin: 0 0 3px; font-size: 1.5rem; }
.login__head p { margin: 0; color: var(--ink-muted); font-size: .9rem; }

.login__honey { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }

.login__password { position: relative; display: block; }
.login__password .input { padding-right: 46px; }
.login__eye {
  position: absolute; right: 6px; top: 50%;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  transform: translateY(-50%);
  border: 0; border-radius: 8px;
  background: none; color: var(--ink-muted);
  cursor: pointer; transition: color .15s, background .15s;
}
.login__eye:hover, .login__eye.is-on { color: var(--brand); background: var(--brand-tint); }
.login__eye svg { width: 17px; height: 17px; }

.login__strength { display: grid; gap: 4px; margin-top: 8px; }
.login__strength i {
  display: block; height: 4px; width: 100%;
  border-radius: 99px; background: var(--paper-deep);
  transition: background .2s var(--ease), transform .2s var(--ease);
  transform: scaleX(0); transform-origin: left;
}
.login__strength[data-score="0"] i { background: #d6dee8; transform: scaleX(.2); }
.login__strength[data-score="1"] i { background: #e0524a; transform: scaleX(.35); }
.login__strength[data-score="2"] i { background: #dda32c; transform: scaleX(.55); }
.login__strength[data-score="3"] i { background: #b4894a; transform: scaleX(.72); }
.login__strength[data-score="4"] i { background: #1f8a5b; transform: scaleX(.86); }
.login__strength[data-score="5"] i { background: #1f8a5b; transform: scaleX(1); }

.login--v2 .login__form .btn--primary {
  height: 46px;
  border-radius: 11px;
  font-size: .92rem;
  letter-spacing: .02em;
  box-shadow: 0 12px 26px -14px rgba(168, 38, 31, .8);
}
.login--v2 .login__form .btn--primary svg { transition: transform .18s var(--ease); }
.login--v2 .login__form .btn--primary:hover svg { transform: translateX(3px); }

.login__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted); font-size: 12.5px;
}
.login__foot a { color: var(--brand); font-weight: 600; }

.login__input-wrap { position: relative; display: block; }
@media (max-width: 899px) {
  .login--v2 .login__aside { padding: 28px 24px; }
  .login--v2 .login__list { display: none; }
  .login--v2 .login__pitch h1 { font-size: clamp(1.5rem, 1.2rem + 2.4vw, 2rem); }
}

/* ====================================================================
   Editor naskah — satu permukaan tulis yang utuh:
   toolbar lengket, kanvas tanpa gulir ganda, status di kaki panel.
   ==================================================================== */
.post-naskah.card { overflow: visible; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.post-naskah .card__head { align-items: center; padding-bottom: 14px; }
.post-headhint {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f4f6f9;
  color: #7d8795;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}

.post-naskah .editor {
  --ed-pad: clamp(14px, 1.6vw, 22px);
  position: relative;
  margin: 14px 18px 18px;
  overflow: visible;
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .035);
  transition: border-color .16s, box-shadow .16s;
}
.post-naskah .editor:focus-within {
  border-color: #c8d3e1;
  box-shadow: 0 6px 20px -12px rgba(16, 24, 40, .35);
}
.editor__shell {
  position: relative;
  border-radius: inherit;
  overflow: clip;
}

/* ---------- toolbar ---------- */
.editor__bar {
  position: sticky;
  top: 112px;
  z-index: 12;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px var(--ed-pad, 9px);
  border-bottom: 1px solid #e9edf2;
  border-radius: 11px 11px 0 0;
  background: rgba(250, 251, 253, .97);
  backdrop-filter: blur(10px);
}
.editor__block { display: flex; align-items: center; min-width: 0; margin: 0; }
.editor__select {
  height: 32px;
  max-width: 176px;
  padding: 0 28px 0 9px;
  border: 1px solid #e4e8ee;
  border-radius: 7px;
  background-color: #fff;
  color: #3f4a59;
  font: 600 11px/1 var(--font-ui);
  cursor: pointer;
}
.editor__group { display: inline-flex; align-items: center; gap: 2px; }
.editor__group--end { margin-left: auto; }
.editor__bar button {
  display: inline-grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #596576;
  font: 600 11px/1 var(--font-ui);
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s, box-shadow .14s;
}
.editor__bar button svg { width: 15px; height: 15px; }
.editor__bar button:hover { border-color: #dce2ea; background: #fff; color: #1f2b3b; }
.editor__bar button.is-on { border-color: #dce5ef; background: #eaf0f7; color: #214d79; box-shadow: inset 0 0 0 1px rgba(33, 77, 121, .03); }
.editor__bar button:active { transform: translateY(1px); }
.editor__sep { width: 1px; height: 20px; flex: none; margin-inline: 3px; border: 0; background: #e0e5ec; }
.editor__context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 31px;
  padding: 6px var(--ed-pad, 14px);
  border-bottom: 1px solid #f0f2f5;
  background: #fff;
  color: #8993a1;
  font-size: 10px;
  line-height: 1.4;
}
.editor__paste-hint { color: #a0a8b4; }

/* ---------- kanvas tulis ---------- */
.editor__paper {
  overflow: visible;
  max-height: none;
  min-height: 420px;
  padding: 26px var(--ed-pad, 24px) 34px;
  background: #fff;
}
.editor__doc {
  max-width: none;
  min-height: 340px;
  margin: 0;
  padding: 0 0 8px;
  outline: 0;
  color: #202936;
  font: 400 16px/1.82 var(--font-ui);
  letter-spacing: .001em;
  overflow-wrap: break-word;
  caret-color: var(--brand);
}
.editor__doc[data-empty="1"]::before { content: attr(data-placeholder); color: #a3acb9; pointer-events: none; }
.editor__doc p { margin: 0 0 1em; }
.editor__doc h2,
.editor__doc h3,
.editor__doc h4 { color: #17293f; font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.3; }
.editor__doc h2 { margin: 1.45em 0 .5em; font-size: 1.55rem; font-weight: 700; }
.editor__doc h3 { margin: 1.25em 0 .45em; font-size: 1.25rem; font-weight: 700; }
.editor__doc h4 { margin: 1.1em 0 .4em; font-size: 1.08rem; font-weight: 700; }
.editor__doc ul, .editor__doc ol { margin: .4em 0 1.05em; padding-left: 1.5em; }
.editor__doc li { margin: .25em 0; padding-left: .15em; }
.editor__doc blockquote {
  margin: 1.3em 0;
  padding: 11px 0 11px 18px;
  border-left: 3px solid var(--gold, #b4894a);
  color: #4b5666;
  font: 500 1.12rem/1.65 var(--font-display);
}
.editor__doc a { color: #28679b; text-decoration: underline; text-decoration-color: #aac0d7; text-underline-offset: 3px; }
.editor__doc a:hover { color: var(--brand); text-decoration-color: currentColor; }
.editor__doc mark { padding: 0 .08em; border-radius: 2px; background: #fff1a8; color: inherit; }
.editor__doc figure { margin: 1.3em 0; }
.editor__doc figure img { display: block; max-width: 100%; max-height: 620px; width: auto; height: auto; margin: 0 auto; border-radius: 8px; object-fit: contain; }
.editor__doc figcaption { margin-top: 6px; color: #8993a1; font-size: 11px; line-height: 1.5; text-align: center; }
.editor__doc table { width: 100%; margin: 1em 0; border-collapse: collapse; }
.editor__doc th, .editor__doc td { padding: 8px 10px; border: 1px solid #e1e6ed; font-size: 13px; text-align: left; }
.editor__doc th { background: #f6f8fa; color: #364253; font-weight: 700; }
.editor__doc hr { margin: 1.5em 0; border: 0; border-top: 1px solid #dfe4eb; }
.editor__doc pre { overflow-x: auto; padding: 12px 14px; border-radius: 8px; background: #f4f6f8; color: #334052; font: 13px/1.6 var(--font-mono); }
.editor__doc .embed { position: relative; height: 0; margin: 1.2em 0; padding-bottom: 56.25%; }
.editor__doc .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 9px; }
.editor__doc [style*="text-align:center"] { text-align: center; }
.editor__doc [style*="text-align:right"] { text-align: right; }
.editor__doc [style*="text-align:justify"] { text-align: justify; }

/* ---------- mode HTML ---------- */
.editor__source {
  display: block;
  width: 100%;
  min-height: 460px;
  padding: 22px var(--ed-pad, 24px);
  border: 0;
  border-radius: 0;
  background: #111a25;
  color: #d7e2ef;
  font: 12.5px/1.7 var(--font-mono);
  tab-size: 2;
  resize: vertical;
}
.editor.is-source .editor__paper { display: none; }
.pages-editor .editor__paper { overflow: auto; }

/* ---------- kaki panel ---------- */
.editor__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px var(--ed-pad, 14px);
  border-top: 1px solid #e9edf2;
  background: #fafbfc;
  color: #8993a1;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.editor__foot strong { color: #475365; font-weight: 750; }
.editor__live { color: #8190a2; }
.editor__live.is-clean { color: #8993a1; }
.editor__status {
  min-height: 0;
  padding: 0 var(--ed-pad, 14px);
  background: #fafbfc;
  color: #647287;
  font-size: 10.5px;
  transition: padding .15s;
}
.editor__status:not(:empty) {
  padding: 8px var(--ed-pad, 14px);
  border-top: 1px solid #f0f2f5;
}
.editor__status--ok { color: #167a4c; }
.editor__status--warn { color: #956b0e; }
.editor__status--error { color: #b3382e; }

.post-editor.is-focus .editor__bar { top: 112px; }

@media (max-width: 1000px) {
  .editor__bar { top: 106px; }
  .post-editor.is-focus .editor__bar { top: 106px; }
}
@media (max-width: 720px) {
  .post-naskah .editor { --ed-pad: 12px; margin: 12px 10px 14px; }
  .editor__bar { top: 102px; gap: 3px; padding: 7px var(--ed-pad, 8px); }
  .editor__select { max-width: 148px; height: 30px; font-size: 10px; }
  .editor__bar button { min-width: 29px; height: 29px; padding-inline: 6px; font-size: 10px; }
  .editor__sep { height: 17px; margin-inline: 1px; }
  .editor__context { align-items: flex-start; flex-direction: column; gap: 2px; padding: 6px var(--ed-pad, 10px); font-size: 9.5px; }
  .editor__paste-hint { font-size: 9px; }
  .editor__paper { min-height: 360px; padding: 20px var(--ed-pad, 12px) 26px; }
  .editor__doc { min-height: 290px; font-size: 15.5px; line-height: 1.78; }
  .editor__doc h2 { font-size: 1.38rem; }
  .editor__doc h3 { font-size: 1.16rem; }
  .editor__foot { align-items: flex-start; flex-direction: column; gap: 3px; padding: 8px var(--ed-pad, 10px); font-size: 9.5px; }
  .editor__status:not(:empty) { padding: 7px var(--ed-pad, 10px); font-size: 9.5px; }
}
@media (max-width: 620px) {
  .post-editor.is-focus .editor__bar { top: 96px; }
  .editor__bar { top: 96px; }
  .post-headhint { display: none; }
}

/* ---------- kontrol gambar: tata letak & ukuran ---------- */
.imgbar {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid #dbe2ea;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 41, 63, .18);
  font-size: 11px;
}
.imgbar__label { color: #8a94a3; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 9px; margin: 0 2px; }
.imgbar__sep { width: 1px; height: 16px; background: #e4e9ef; margin: 0 3px; }
.imgbar button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #33445a;
  font: inherit;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
}
.imgbar button:hover { background: #f2f5f8; }
.imgbar button.is-on { background: var(--brand, #a8261f); color: #fff; }
.editor__doc img { cursor: pointer; }
.editor__doc figure[class*="fig--"] img { width: 100%; height: auto; }
.editor__doc figure.fig--s { max-width: 50%; }
.editor__doc figure.fig--m { max-width: 75%; }
.editor__doc figure.fig--s:not(.fig--left):not(.fig--right),
.editor__doc figure.fig--m:not(.fig--left):not(.fig--right) { margin-left: auto; margin-right: auto; }
.editor__doc figure.fig--left { float: left; max-width: 50%; margin: .3em 1.2em 1em 0; }
.editor__doc figure.fig--right { float: right; max-width: 50%; margin: .3em 0 1em 1.2em; }
.editor__doc figure.fig--left.fig--m,
.editor__doc figure.fig--right.fig--m { max-width: 75%; }
.imgbar button[data-fig-del]:hover { background: #fdeceb; color: #a8261f; }
.imgbar button[data-fig-del].is-on { background: #a8261f; color: #fff; }

/* Tautan pendaftaran kontributor pada halaman masuk */
.login__register { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line, #e5e2da); font-size: .82rem; color: var(--ink-soft, #6b7280); text-align: center; }
.login__register a { color: var(--brand, #e0504a); font-weight: 600; }

/* ---------- Alur kurasi kontributor ---------- */
.post-notice { margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; font-size: .86rem; line-height: 1.55; }
.post-notice small { opacity: .7; margin-left: 6px; }
.post-notice--warn { background: #fdf6f0; border: 1px solid #f0dcc4; color: #7a4b17; }
.post-notice--info { background: #eef3fb; border: 1px solid #d3e0f2; color: #2b4a75; }
.flag--revisi { background: #fdeee2; color: #9a4b12; border: 1px solid #f2d4ba; }

.ethics-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ethics-grid { grid-template-columns: 1fr; } }
.ethics-list, .ethics-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ethics-list li b, .ethics-flow li b { display: block; font-size: .9rem; margin-bottom: 2px; }
.ethics-list li p, .ethics-flow li p { margin: 0; font-size: .82rem; color: var(--ink-soft, #6b7280); line-height: 1.55; }
.ethics-flow li { padding-left: 14px; border-left: 3px solid var(--brand, #e0504a); }

/* ================================================= kode etik (upgrade) */
.ethics-status {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.ethics-status__card {
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius-l);
  background: #fff; box-shadow: 0 1px 3px #1018280a;
}
.ethics-status__label {
  display: block; margin-bottom: 8px;
  color: var(--ink-muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.ethics-status__value {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 750; color: var(--ink);
}
.ethics-status__value svg { width: 17px; height: 17px; }
.ethics-status__value.is-ok { color: var(--success); }
.ethics-status__value.is-ok svg { stroke: var(--success); }
.ethics-status__value.is-warn { color: var(--warning); }
.ethics-status__value.is-warn svg { stroke: var(--warning); }
.ethics-status__card > small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 11.5px; }
.ethics-status__value.is-strong { font: 700 26px/1.2 var(--font-display); color: var(--navy); }
.ethics-status__list { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 6px; }
.ethics-status__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ethics-status__list a {
  overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; text-overflow: ellipsis;
}
.ethics-status__list a:hover { color: var(--brand); text-decoration: none; }
.ethics-status__list small { flex: none; color: var(--ink-muted); font-size: 11px; }
.ethics-status__empty { display: block; margin-top: 8px; color: var(--ink-muted); font-size: 12px; }
.ethics-status__link { display: inline-block; margin-top: 9px; font-size: 12px; font-weight: 650; }
.ethics-status__card .ethics-status__link { color: var(--brand); }

.ethics-loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ethics-loop li { padding-left: 14px; border-left: 3px solid var(--navy); }
.ethics-loop__chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.ethics-loop__arrow { color: var(--ink-muted); font-style: normal; font-weight: 700; }
.ethics-loop li p { margin: 0; font-size: .82rem; color: var(--ink-soft, #6b7280); line-height: 1.55; }

.ethics-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.ethics-tabs button {
  padding: 9px 13px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--ink-muted); cursor: pointer;
  font: 650 13px/1.2 var(--font-ui); white-space: nowrap;
}
.ethics-tabs button:hover { color: var(--ink); }
.ethics-tabs button.is-active { border-color: var(--brand); color: var(--brand); }

.ethics-check { list-style: none; margin: 14px 0; padding: 0; }
.ethics-check__item { border-bottom: 1px solid var(--line); }
.ethics-check__item:last-child { border-bottom: 0; }
.ethics-check__item label {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 2px; cursor: pointer; color: var(--ink-soft); font-size: 13px; line-height: 1.5;
}
.ethics-check__item label input { margin-top: 2px; accent-color: var(--brand); }
.ethics-check__item.is-ok label { color: var(--ink-muted); }
.ethics-check__item.is-ok label span { text-decoration: line-through; text-decoration-color: #b9c2ce; }
.ethics-check__head { display: flex; align-items: center; gap: 14px; }
.ethics-check__head b { font-size: 13px; color: var(--ink); white-space: nowrap; }
.ethics-check__head b.is-ok { color: var(--success); }
.ethics-check__progress { flex: 1; height: 8px; overflow: hidden; border-radius: 99px; background: #eef0f3; }
.ethics-check__progress span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--brand); transition: width .25s var(--ease);
}
#ethicsCheck .btn-row { align-items: center; margin-top: 4px; }
#ethicsCheck .btn-row small { color: var(--ink-muted); font-size: 11.5px; }

/* ---------- Audit kepatuhan penempatan iklan (#/iklan) ---------- */
.ads-audit__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.ads-audit__head h2 { margin: 0; font-size: 15px; color: var(--ink); }
.ads-audit { list-style: none; margin: 0; padding: 0; }
.ads-audit__row {
  display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #edf0f3;
  align-items: flex-start;
}
.ads-audit__row:last-child { border-bottom: 0; }
.ads-audit__mark {
  flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 99px;
  display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff;
}
.ads-audit__row.is-ready .ads-audit__mark { background: var(--success); }
.ads-audit__row.is-warn .ads-audit__mark { background: #b7791f; }
.ads-audit__row.is-off .ads-audit__mark { background: var(--danger); }
.ads-audit__text strong { font-size: 13px; color: var(--ink); }
.ads-audit__text p { margin: 2px 0 0; color: var(--ink-muted); font-size: 12.5px; line-height: 1.5; }