/* Menu inklusif (aksesibilitas) - mengacu WCAG 2.2 AA */
#kb-ink-btn { position: fixed; right: 14px; bottom: 46px; z-index: 900; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(14,24,34,.55); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: .72; transition: opacity .2s, transform .2s; }
#kb-ink-btn:hover, #kb-ink-btn:focus-visible, #kb-ink-btn[aria-expanded="true"] { opacity: 1; transform: scale(1.06); background: rgba(14,24,34,.9); }
#kb-ink-btn:focus-visible, #kb-ink-panel button:focus-visible, .kb-skip:focus { outline: 3px solid #5eead4; outline-offset: 2px; }
#kb-ink-btn svg { width: 24px; height: 24px; display: block; }
body.kb-ink-kiri #kb-ink-btn { right: auto; left: 14px; }
#kb-ink-panel { position: fixed; right: 14px; bottom: 94px; z-index: 901; width: 344px; max-width: calc(100vw - 20px); max-height: calc(100vh - 118px); overflow: auto; overscroll-behavior: contain; border-radius: 16px; background: rgba(12,20,30,.97); color: #fff; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 16px 48px rgba(0,0,0,.45); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left; }
body.kb-ink-kiri #kb-ink-panel { right: auto; left: 14px; }
#kb-ink-panel[hidden] { display: none; }
#kb-ink-panel * { box-sizing: border-box; letter-spacing: normal; }
.ki-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(12,20,30,.99); border-bottom: 1px solid rgba(255,255,255,.16); }
.ki-h h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.ki-b { font: inherit; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 10px; padding: 7px 11px; cursor: pointer; min-height: 36px; }
.ki-b:hover { background: rgba(255,255,255,.2); }
.ki-s { padding: 10px 14px 4px; }
.ki-s h3 { margin: 6px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em !important; text-transform: uppercase; color: #9fe9dd; }
.ki-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ki-t { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-weight: 600; color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.25); border-radius: 12px; padding: 9px 10px; min-height: 44px; cursor: pointer; }
.ki-t:hover { background: rgba(255,255,255,.14); }
.ki-t[aria-pressed="true"] { background: #2dd4bf; border-color: #2dd4bf; color: #04201c; }
.ki-t svg { width: 18px; height: 18px; flex: none; }
.ki-w { grid-column: 1 / -1; }
.ki-z { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; }
.ki-z output { flex: 1; text-align: center; font-weight: 700; font-size: 15px; }
.ki-z .ki-b { min-width: 52px; font-size: 16px; }
.ki-n { margin: 4px 14px 14px; font-size: 12px; color: #c4d2dc; }
.ki-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kb-skip { position: fixed; left: 10px; top: -60px; z-index: 1000; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .15s; }
.kb-skip:focus { top: 10px; }
#kb-ink-guide { position: fixed; left: 0; right: 0; top: -100px; height: 46px; z-index: 899; pointer-events: none; background: rgba(255,230,0,.22); border-top: 2px solid #ffe600; border-bottom: 2px solid #ffe600; display: none; }
html.kb-a-panduan #kb-ink-guide { display: block; }

/* ukuran teks (memperbesar isi halaman) */
html { --kbz: 1; }
html.kb-z1 { --kbz: 1.12; } html.kb-z2 { --kbz: 1.28; } html.kb-z3 { --kbz: 1.5; }
html[class*="kb-z"] .kb-main, html[class*="kb-z"] .modal-dialog { zoom: var(--kbz); }
html[class*="kb-z"] .kb-main { display: flex !important; flex-direction: column !important; align-items: center !important; }
html[class*="kb-z"] #kb-sisi { grid-column: auto !important; grid-row: auto !important; align-self: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 624px; margin: 0 auto 12px !important; }
html[class*="kb-z"] .kb-w:has(#kb-top), html[class*="kb-z"] .kb-w:has(#kb-menu) { grid-column: auto !important; grid-row: auto !important; }
@media (max-width: 575.98px) {
  html[class*="kb-z"] #kb-sisi { grid-template-columns: minmax(0, 1fr) !important; }
  html.kb-z2 #kb-top, html.kb-z3 #kb-top { grid-template-columns: minmax(0, 1fr) !important; }
  html.kb-z3 #kb-menu .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* teks */
html.kb-a-spasi .kb-main *, html.kb-a-spasi .modal-content * { letter-spacing: .12em !important; word-spacing: .16em !important; line-height: 1.5 !important; }
html.kb-a-font .kb-main *, html.kb-a-font .modal-content *, html.kb-a-font #kb-foot, html.kb-a-font #kb-ink-panel * { font-family: Verdana, Tahoma, "Atkinson Hyperlegible", "Trebuchet MS", sans-serif !important; }
html.kb-a-kiri .kb-main *, html.kb-a-kiri .modal-content * { text-align: left !important; }

/* warna */
html.kb-c-terbalik .scene { filter: invert(1) hue-rotate(180deg); }
html.kb-c-mono .scene { filter: grayscale(1) contrast(1.1); }
html.kb-c-pudar .scene { filter: saturate(.35); }
html.kb-c-gelap .scene, html.kb-c-terang .scene { background-image: none !important; }
html.kb-c-gelap .scene { background: #000 !important; }
html.kb-c-terang .scene { background: #fff !important; }
html.kb-c-gelap :is(.sun, .star, .bg, .kereta, .plane, #kb-fx, #kb-digital), html.kb-c-terang :is(.sun, .star, .bg, .kereta, .plane, #kb-fx, #kb-digital) { display: none !important; }
html.kb-c-gelap body .kb-main.kb-main *, html.kb-c-gelap #kb-foot { color: #ffea00 !important; text-shadow: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.kb-c-gelap body .kb-main.kb-main :is(aside, .kb-shp) { border: 2px solid #ffea00 !important; }
html.kb-c-gelap body .kb-main.kb-main * { background-color: #000 !important; background-image: none !important; }
html.kb-c-terang body .kb-main.kb-main * { background-color: #fff !important; background-image: none !important; }
html.kb-c-gelap body .kb-main.kb-main svg { fill: #ffea00 !important; }
html.kb-c-terang body .kb-main.kb-main *, html.kb-c-terang #kb-foot { color: #000 !important; text-shadow: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.kb-c-terang body .kb-main.kb-main :is(aside, .kb-shp) { border: 2px solid #000 !important; }
html.kb-c-terang body .kb-main.kb-main svg { fill: #000 !important; }
html.kb-c-gelap .modal-content, html.kb-c-gelap .modal-content * { background: #000 !important; color: #ffea00 !important; border-color: #ffea00 !important; }
html.kb-c-terang .modal-content, html.kb-c-terang .modal-content * { background: #fff !important; color: #000 !important; border-color: #000 !important; }

/* navigasi */
html.kb-a-tautan :is(.kb-main a, .kb-main button, .kb-main [role="button"], .kb-shp, .modal a) { outline: 3px solid #ffbf00 !important; outline-offset: 2px !important; text-decoration: underline !important; }
html.kb-a-fokus *:focus-visible { outline: 4px solid #00e5ff !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px #000 !important; }
html.kb-a-kursor, html.kb-a-kursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.6L9.5 19z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; }
html.kb-a-diam *, html.kb-a-diam *::before, html.kb-a-diam *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.kb-a-diam #kb-fx { display: none !important; }
html.kb-a-polos .scene { background: #0e1a24 !important; background-image: none !important; }
html.kb-a-polos :is(.sun, .star, .bg, .kereta, .plane, #kb-fx, #kb-digital) { display: none !important; }
@media (max-width: 575.98px) { #kb-ink-btn { bottom: 40px; right: 10px; } #kb-ink-panel { left: 10px; right: 10px; width: auto; bottom: 88px; } body.kb-ink-kiri #kb-ink-btn { left: 10px; } body.kb-ink-kiri #kb-ink-panel { left: 10px; } }
@media print { #kb-ink-btn, #kb-ink-panel, #kb-ink-guide { display: none !important; } }

html.kb-c-gelap body .kb-main.kb-main .kb-shp::before, html.kb-c-gelap body .kb-main.kb-main .kb-shp::after, html.kb-c-terang body .kb-main.kb-main .kb-shp::before, html.kb-c-terang body .kb-main.kb-main .kb-shp::after { display: none !important; }
html.kb-c-gelap body .kb-main.kb-main *::before, html.kb-c-gelap body .kb-main.kb-main *::after, html.kb-c-terang body .kb-main.kb-main *::before, html.kb-c-terang body .kb-main.kb-main *::after { display: none !important; }
html.kb-c-gelap body .kb-main.kb-main :is(.li_menu, .body_menu, .ul_menu), html.kb-c-terang body .kb-main.kb-main :is(.li_menu, .body_menu, .ul_menu) { background-image: none !important; filter: none !important; }
html.kb-c-gelap .kb-main *, html.kb-c-terang .kb-main * { transition: none !important; }

.ki-pd { width: 100%; justify-content: center; background: #2dd4bf !important; border-color: #2dd4bf !important; color: #04201c !important; }
.ki-pd:hover { background: #5eead4 !important; }
#kb-ink-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#kb-ink-modal * { box-sizing: border-box; }
.kp-box { width: 100%; max-width: 580px; max-height: calc(100vh - 32px); overflow: auto; background: #0c141e; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55); outline: none; text-align: left; }
.kp-h { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #0c141e; border-bottom: 1px solid rgba(255,255,255,.16); z-index: 1; }
.kp-h h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.kp-c { padding: 6px 18px 18px; }
.kp-c p { margin: 10px 0; color: #e3ebf2; }
.kp-c details { border: 1px solid rgba(255,255,255,.2); border-radius: 12px; margin: 8px 0; padding: 0 12px; background: rgba(255,255,255,.05); }
.kp-c summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: #9fe9dd; list-style-position: inside; }
.kp-c summary:focus-visible, .kp-box a:focus-visible, .kp-box button:focus-visible { outline: 3px solid #5eead4; outline-offset: 2px; }
.kp-c details[open] summary { border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 4px; }
.kp-c ul { margin: 8px 0 12px; padding-left: 20px; color: #e3ebf2; }
.kp-c li { margin: 6px 0; }
.kp-c kbd { background: #1c2a38; border: 1px solid rgba(255,255,255,.3); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; font: 600 13px ui-monospace, Menlo, monospace; color: #fff; }
.kp-ap { margin: 0 0 12px; background: #2dd4bf !important; border-color: #2dd4bf !important; color: #04201c !important; }
.kp-f a { color: #9fe9dd; font-weight: 600; }

.ki-st { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: #d6e4ee; min-height: 1.4em; }

/* ===== tampilan panel bertab (terang) ===== */
#kb-ink-panel { width: 388px; max-height: min(640px, calc(100vh - 118px)); display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #1b2a35; border: 0; border-radius: 20px; box-shadow: 0 18px 54px rgba(0,0,0,.4); font-size: 14px; }
#kb-ink-panel[hidden] { display: none; }
#kb-ink-panel .kh { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: linear-gradient(135deg, #0f766e, #0e7490); color: #fff; }
#kb-ink-panel .kh-i { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fbbf24; color: #3b2a00; display: grid; place-items: center; }
#kb-ink-panel .kh-i svg { width: 26px; height: 26px; }
#kb-ink-panel .kh-t { flex: 1; min-width: 0; }
#kb-ink-panel .kh-t h2 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.25; }
#kb-ink-panel .kh-t small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,.88); }
#kb-ink-panel .kh-x { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
#kb-ink-panel .kh-x:hover { background: rgba(255,255,255,.32); }
#kb-ink-panel .kh-x svg { width: 18px; height: 18px; }
#kb-ink-panel .kt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; margin: 0; background: #e8eef2; }
#kb-ink-panel .kt button { display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; background: transparent; color: #405462; font: inherit; font-weight: 600; font-size: 13.5px; padding: 11px 4px; min-height: 44px; cursor: pointer; }
#kb-ink-panel .kt button svg { width: 18px; height: 18px; flex: none; }
#kb-ink-panel .kt button:hover { background: rgba(255,255,255,.6); }
#kb-ink-panel .kt button[aria-selected="true"] { background: #fff; color: #0f4c5c; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
#kb-ink-panel .kb-body { flex: 1; overflow: auto; padding: 12px 12px 6px; overscroll-behavior: contain; background: #f6f9fb; }
#kb-ink-panel .kr { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 8px; padding: 12px 14px; background: #fff; border: 1.5px solid #dbe5ea; border-radius: 14px; color: #1b2a35; text-align: left; font: inherit; }
#kb-ink-panel .kr-t { flex: 1; min-width: 0; display: block; }
#kb-ink-panel .kr-t b { display: block; font-size: 14.5px; font-weight: 700; color: #14232d; line-height: 1.3; }
#kb-ink-panel .kr-t small { display: block; margin-top: 2px; font-size: 12.5px; color: #4a5f6c; line-height: 1.35; }
#kb-ink-panel .kr-s { position: relative; flex: none; width: 50px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: #c3ced6; cursor: pointer; transition: background .15s; }
#kb-ink-panel .kr-s i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .15s; }
#kb-ink-panel .kr-s[aria-checked="true"] { background: #0f766e; }
#kb-ink-panel .kr-s[aria-checked="true"] i { transform: translateX(22px); }
#kb-ink-panel .kr-a { cursor: pointer; }
#kb-ink-panel .kr-a:hover { border-color: #0f766e; background: #f0fbf9; }
#kb-ink-panel .kr-go { font-size: 24px; color: #0f766e; line-height: 1; }
#kb-ink-panel .kr-z { display: flex; align-items: center; gap: 6px; flex: none; }
#kb-ink-panel .kr-z output { min-width: 46px; text-align: center; font-weight: 700; color: #14232d; }
#kb-ink-panel .kr-b { width: 40px; height: 36px; border-radius: 10px; border: 1.5px solid #b9c7d0; background: #fff; color: #14232d; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
#kb-ink-panel .kr-b:hover { background: #e8f5f3; border-color: #0f766e; }
#kb-ink-panel .kr-n, #kb-ink-panel .ki-st { margin: 4px 2px 10px; font-size: 12.5px; line-height: 1.45; color: #4a5f6c; }
#kb-ink-panel .kf { display: flex; gap: 10px; padding: 12px; background: #fff; border-top: 1px solid #dbe5ea; }
#kb-ink-panel .kf button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 14px; }
#kb-ink-panel .kf button svg { width: 18px; height: 18px; flex: none; }
#kb-ink-panel .kf-p { flex: 1; border: 0; background: #15803d; color: #fff; }
#kb-ink-panel .kf-p:hover { background: #166534; }
#kb-ink-panel .kf-r { border: 1.5px solid #b9c7d0; background: #fff; color: #14232d; }
#kb-ink-panel .kf-r:hover { background: #f1f5f8; }
#kb-ink-panel button:focus-visible { outline: 3px solid #0e7490; outline-offset: 2px; }
#kb-ink-panel .kh-x:focus-visible { outline-color: #fff; }
@media (max-width: 575.98px) { #kb-ink-panel { width: auto; max-height: calc(100vh - 100px); } #kb-ink-panel .kt button span { font-size: 12.5px; } }
/* kartu lebih ramping: hanya skala (lebar, jarak, sakelar); ukuran font tetap */
#kb-ink-panel { width: 332px; max-height: min(500px, calc(100vh - 118px)); border-radius: 16px; bottom: 90px; }
#kb-ink-panel .kh { padding: 10px 12px; gap: 10px; }
#kb-ink-panel .kh-i { width: 32px; height: 32px; }
#kb-ink-panel .kh-i svg { width: 21px; height: 21px; }
#kb-ink-panel .kh-x { width: 30px; height: 30px; }
#kb-ink-panel .kh-x svg { width: 15px; height: 15px; }
#kb-ink-panel .kt { padding: 4px; gap: 2px; }
#kb-ink-panel .kt button { padding: 7px 2px; min-height: 38px; gap: 4px; border-radius: 10px; }
#kb-ink-panel .kt button svg { width: 16px; height: 16px; }
#kb-ink-panel .kb-body { padding: 8px 8px 2px; }
#kb-ink-panel .kr { padding: 8px 10px; margin-bottom: 6px; gap: 10px; border-radius: 12px; }
#kb-ink-panel .kr-t small { margin-top: 1px; line-height: 1.3; }
#kb-ink-panel .kr-s { width: 40px; height: 22px; }
#kb-ink-panel .kr-s i { left: 2px; top: 2px; width: 18px; height: 18px; }
#kb-ink-panel .kr-s[aria-checked="true"] i { transform: translateX(18px); }
#kb-ink-panel .kr-b { width: 34px; height: 30px; }
#kb-ink-panel .kr-z output { min-width: 40px; }
#kb-ink-panel .kr-go { font-size: 20px; }
#kb-ink-panel .kr-n, #kb-ink-panel .ki-st { margin: 2px 2px 8px; }
#kb-ink-panel .kf { padding: 8px; gap: 8px; }
#kb-ink-panel .kf button { min-height: 36px; padding: 6px 12px; border-radius: 10px; gap: 6px; }
#kb-ink-panel .kf button svg { width: 16px; height: 16px; }
#kb-ink-btn { bottom: 44px; }
@media (max-width: 575.98px) { #kb-ink-panel { width: auto; max-width: 332px; left: auto; right: 10px; bottom: 86px; max-height: calc(100vh - 100px); } body.kb-ink-kiri #kb-ink-panel { right: auto; left: 10px; } }
/* font lebih kecil tetapi tetap terbaca */
#kb-ink-panel .kh-t h2 { font-size: 15px; }
#kb-ink-panel .kh-t small { font-size: 11.5px; }
#kb-ink-panel .kt button { font-size: 12.5px; }
#kb-ink-panel .kr-t b { font-size: 13px; }
#kb-ink-panel .kr-t small { font-size: 11.5px; }
#kb-ink-panel .kr-z output, #kb-ink-panel .kr-b { font-size: 13px; }
#kb-ink-panel .kr-n, #kb-ink-panel .ki-st { font-size: 11.5px; }
#kb-ink-panel .kf button { font-size: 13px; }
@media (max-width: 575.98px) { #kb-ink-panel .kt button span { font-size: 12px; } }

/* header pada mode kontras dan animasi berhenti */
html.kb-c-gelap #kb-head .kb-hd-a, html.kb-c-gelap #kb-head .kb-hd-b span, html.kb-c-gelap #kb-head .kb-ch, html.kb-c-gelap #kb-head .kb-cur { background: none !important; -webkit-text-fill-color: #ffea00 !important; color: #ffea00 !important; filter: none !important; animation: none !important; text-shadow: none !important; opacity: 1 !important; transform: none !important; }
html.kb-c-terang #kb-head .kb-hd-a, html.kb-c-terang #kb-head .kb-hd-b span, html.kb-c-terang #kb-head .kb-ch, html.kb-c-terang #kb-head .kb-cur { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; filter: none !important; animation: none !important; text-shadow: none !important; opacity: 1 !important; transform: none !important; }
html.kb-c-gelap #kb-head .kb-cur { background: #ffea00 !important; } html.kb-c-terang #kb-head .kb-cur { background: #000 !important; }
html.kb-c-gelap #kb-head .kb-hd-a { border-color: #ffea00; background: #000 !important; }
html.kb-c-terang #kb-head .kb-hd-a { border-color: #000; background: #fff !important; }
html.kb-c-gelap #kb-head .kb-hd-l, html.kb-c-terang #kb-head .kb-hd-l { display: none !important; }
html.kb-c-gelap #kb-head *::before, html.kb-c-gelap #kb-head *::after, html.kb-c-terang #kb-head *::before, html.kb-c-terang #kb-head *::after { display: none !important; }
html.kb-c-gelap #kb-head .kb-hd-b, html.kb-c-terang #kb-head .kb-hd-b { animation: none !important; }
html.kb-a-diam #kb-head *, html.kb-a-diam #kb-head *::before, html.kb-a-diam #kb-head *::after { animation: none !important; }
html.kb-a-diam #kb-head .kb-ch { opacity: 1 !important; filter: none !important; transform: none !important; }
html.kb-a-diam #kb-head .kb-hd-b::before, html.kb-a-diam #kb-head .kb-hd-b::after, html.kb-a-diam #kb-head .kb-hd-b span::before, html.kb-a-diam #kb-head .kb-hd-b span::after { display: none !important; }

/* embun dimatikan pada mode kontras tinggi agar teks tetap jelas */
html.kb-c-gelap :is(#kb-embun, #kb-embun-kabut), html.kb-c-terang :is(#kb-embun, #kb-embun-kabut) { display: none !important; }

/* tiga tombol sejajar di dasar panel */
#kb-ink-panel .kf { gap: 6px; padding: 8px; }
#kb-ink-panel .kf > * { flex: 1 1 0; min-width: 0; }
#kb-ink-panel .kf-p { flex: 1.5 1 0; }
#kb-ink-panel .kf button, #kb-ink-panel .kf-a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 6px 8px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 12.5px; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; }
#kb-ink-panel .kf-a { border: 0; background: #1d4ed8; color: #fff; }
#kb-ink-panel .kf-a:hover { background: #1e40af; color: #fff; }
#kb-ink-panel .kf-a svg { width: 16px; height: 16px; flex: none; }
#kb-ink-panel .kf button svg { width: 16px; height: 16px; }
#kb-ink-panel .kf > * { flex: 0 0 auto; }
#kb-ink-panel .kf-p { flex: 1 1 auto; white-space: nowrap; }
#kb-ink-panel .kf-a, #kb-ink-panel .kf-r { padding: 6px 10px; gap: 4px; }
#kb-ink-panel .kf button, #kb-ink-panel .kf-a { font-size: 12px; white-space: nowrap; }
@media (max-width: 360px) { #kb-ink-panel .kf { gap: 5px; padding: 8px 6px; } #kb-ink-panel .kf svg { display: none; } #kb-ink-panel .kf-a, #kb-ink-panel .kf-r { padding: 6px 9px; } }
/* tombol dasar panel: ramping */
#kb-ink-panel .kf { padding: 6px 8px; gap: 5px; }
#kb-ink-panel .kf button, #kb-ink-panel .kf-a { min-height: 30px; padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; gap: 4px; line-height: 1.1; }
#kb-ink-panel .kf-a, #kb-ink-panel .kf-r { padding: 4px 9px; }
#kb-ink-panel .kf button svg, #kb-ink-panel .kf-a svg { width: 14px; height: 14px; }

/* panel panduan aksesibilitas responsif: tombol tutup selalu terlihat di layar pendek dan HP */
#kb-ink-panel { max-height: min(560px, calc(100vh - 118px)); max-height: min(560px, calc(100dvh - 118px)); }
@media (max-width: 575.98px) {
  #kb-ink-panel { left: 10px; right: 10px; width: auto; max-width: none; bottom: 86px; max-height: calc(100vh - 106px); max-height: calc(100dvh - 106px); }
  body.kb-ink-kiri #kb-ink-panel { left: 10px; right: 10px; }
}
@media (max-height: 560px) {
  #kb-ink-panel { top: 10px; bottom: 10px; max-height: none; right: 62px; left: auto; width: min(340px, calc(100vw - 76px)); }
  body.kb-ink-kiri #kb-ink-panel { left: 62px; right: auto; }
}
@media (max-height: 560px) and (max-width: 575.98px) { #kb-ink-panel { left: 10px; right: 62px; width: auto; max-width: none; } body.kb-ink-kiri #kb-ink-panel { left: 62px; right: 10px; } }
#kb-ink-panel .kh { position: relative; z-index: 2; flex: none; }
#kb-ink-panel .kh-x { flex: none; min-width: 38px; min-height: 38px; }

/* panduan disabilitas responsif: judul dan tombol Tutup tetap terlihat, hanya isi yang bergulir */
#kb-ink-modal { height: 100vh; height: 100dvh; padding: 12px; overflow: hidden; }
.kp-box { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.kp-h { flex: none; position: relative; }
.kp-c { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.kp-h .ki-b { flex: none; min-height: 40px; min-width: 76px; white-space: nowrap; }
@media (max-width: 575.98px) { #kb-ink-modal { padding: 8px; } .kp-h { padding: 10px 12px; } .kp-h h2 { font-size: 16px; } .kp-c { padding: 4px 14px 16px; } }

/* tombol menu inklusif: cahaya melingkar dan denyut halus agar mudah ditemukan */
@property --kbi { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes kbiPutar { to { --kbi: 360deg; } }
@keyframes kbiDenyut { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
@keyframes kbiKedip { 0%, 100% { box-shadow: 0 0 6px rgba(94,234,212,.45), 0 0 14px rgba(94,234,212,.25); } 50% { box-shadow: 0 0 12px rgba(94,234,212,.9), 0 0 26px rgba(56,189,248,.55); } }
#kb-ink-btn { overflow: visible; animation: kbiKedip calc(2.4s / var(--kbi-k, 1)) ease-in-out infinite; }
#kb-ink-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--kbi), rgba(94,234,212,0), #5eead4 22%, #38bdf8 40%, #fbbf24 58%, rgba(251,191,36,0) 74%, rgba(94,234,212,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: kbiPutar calc(2.8s / var(--kbi-k, 1)) linear infinite; }
#kb-ink-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #5eead4; pointer-events: none; animation: kbiDenyut calc(2.4s / var(--kbi-k, 1)) ease-out infinite; }
#kb-ink-btn[aria-expanded="true"], #kb-ink-btn:hover { animation: none; box-shadow: 0 0 14px rgba(94,234,212,.8); }
#kb-ink-btn[aria-expanded="true"]::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { #kb-ink-btn, #kb-ink-btn::before, #kb-ink-btn::after { animation: none !important; } #kb-ink-btn { box-shadow: 0 0 10px rgba(94,234,212,.6); } }
html.kb-a-diam #kb-ink-btn, html.kb-a-diam #kb-ink-btn::before, html.kb-a-diam #kb-ink-btn::after { animation: none !important; }
#kb-ink-btn { opacity: .95; }

/* pilihan efek dari admin */
html.kb-ink-e-putar #kb-ink-btn::after, html.kb-ink-e-putar #kb-ink-btn { animation: none; }
html.kb-ink-e-denyut #kb-ink-btn::before { display: none; }
html.kb-ink-e-mati #kb-ink-btn, html.kb-ink-e-mati #kb-ink-btn::before, html.kb-ink-e-mati #kb-ink-btn::after { animation: none !important; }
html.kb-ink-e-mati #kb-ink-btn::before, html.kb-ink-e-mati #kb-ink-btn::after { display: none; }