/* Edu-Katik 1.13 — menu Aksesibilitas (sisi kiri) & chatbot "Sekar" di halaman publik */

/* ---------- tab aksesibilitas (melekat di tepi kiri) ---------- */
.ak-tab{position:fixed;left:0;top:42%;z-index:950;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 7px 10px 6px;border:0;border-radius:0 14px 14px 0;background:#1B4FD6;color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(16,30,70,.28);font:700 .66rem/1.1 system-ui,sans-serif;letter-spacing:.02em;transition:padding .15s,background .15s}
.ak-tab span{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase}
.ak-tab:hover,.ak-tab:focus-visible{padding-left:12px;background:#0F3BB0}
.ak-tab:focus-visible{outline:3px solid #FFD43B;outline-offset:2px}
.ak-tab.aktif::after{content:"";position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:#FFD43B;box-shadow:0 0 0 2px #1B4FD6}
.ak-panel{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:960;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;background:#fff;color:#111;border-radius:18px;box-shadow:0 24px 60px rgba(10,20,50,.35);padding:14px 14px 16px;font:500 .9rem/1.35 system-ui,sans-serif;animation:akMasuk .18s ease-out}
@keyframes akMasuk{from{opacity:0;transform:translate(-14px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.ak-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ak-panel header b{font-size:1.02rem}
.ak-x{border:0;background:#EEF1F8;color:#111;width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer}
.ak-uk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#F3F5FB;border-radius:12px;margin-bottom:10px}
.ak-uk div{display:flex;gap:4px}
.ak-uk button{min-width:36px;height:36px;border:1px solid #CBD3E6;background:#fff;color:#111;border-radius:9px;font-weight:800;cursor:pointer}
.ak-uk button.on{background:#1B4FD6;color:#fff;border-color:#1B4FD6}
.ak-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ak-o{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:66px;padding:9px 10px;border:1.5px solid #D9DFEC;border-radius:12px;background:#fff;color:#111;text-align:left;cursor:pointer;font:600 .8rem/1.2 system-ui,sans-serif}
.ak-o i{font-style:normal;font-weight:800;font-size:1rem;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#EEF1F8}
.ak-o[aria-pressed=true]{border-color:#1B4FD6;background:#EAF0FF}
.ak-o[aria-pressed=true] i{background:#1B4FD6;color:#fff}
.ak-o:focus-visible,.ak-uk button:focus-visible,.ak-x:focus-visible,.ak-panel select:focus-visible{outline:3px solid #FFB000;outline-offset:2px}
.ak-sel{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;font-weight:600;font-size:.82rem}
.ak-sel select{padding:8px;border:1.5px solid #D9DFEC;border-radius:10px;background:#fff;color:#111;font:inherit}
.ak-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ak-act .btn{flex:1;justify-content:center}
.ak-garis{position:fixed;left:0;right:0;top:0;height:36px;z-index:940;pointer-events:none;background:rgba(255,212,59,.18);border-top:2px solid #FFB000;border-bottom:2px solid #FFB000;box-shadow:0 0 0 100vmax rgba(0,0,0,.28)}
.ak-garis[hidden]{display:none}

/* ---------- efek pilihan ---------- */
html[data-ukuran="3"]{font-size:140%}html[data-ukuran="3"] body.pub{font-size:22.5px}
html.ak-abu body>:not(.ak-tab):not(.ak-panel):not(.sk):not(.ak-garis):not(script){filter:grayscale(1)}
html[data-buta=protan] body>:not(.ak-tab):not(.ak-panel):not(.sk):not(.ak-garis):not(script){filter:url(#edk-protan)}
html[data-buta=deutan] body>:not(.ak-tab):not(.ak-panel):not(.sk):not(.ak-garis):not(script){filter:url(#edk-deutan)}
html[data-buta=tritan] body>:not(.ak-tab):not(.ak-panel):not(.sk):not(.ak-garis):not(script){filter:url(#edk-tritan)}
html.ak-abu[data-buta] body>:not(.ak-tab):not(.ak-panel):not(.sk):not(.ak-garis):not(script){filter:grayscale(1)}
html.ak-disleksia body,html.ak-disleksia body *:not(svg):not(svg *){font-family:"Comic Sans MS","Comic Neue",Verdana,Tahoma,sans-serif!important;letter-spacing:.04em}
html.ak-spasi body p,html.ak-spasi body li,html.ak-spasi body td,html.ak-spasi body dd{line-height:1.9!important;letter-spacing:.06em!important;word-spacing:.16em!important}
html.ak-spasi body p{margin-bottom:1.1em}
html.ak-tautan body a:not(.btn):not(.ak-tab){background:#FFF3A0!important;color:#00237A!important;text-decoration:underline!important;text-decoration-thickness:2px!important;outline:1px dashed #00237A}
html.ak-tautan body a.btn{outline:3px solid #FFB000;outline-offset:2px}
html.ak-kursor,html.ak-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 2l16 9-7 1.6L9.4 20z' fill='%23111' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2,auto!important}
html.ak-diam *,html.ak-diam *::before,html.ak-diam *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.ak-gambar body img,html.ak-gambar body video,html.ak-gambar body picture,html.ak-gambar body .bg-img{opacity:.04!important}
html.ak-gambar body img{outline:1px dashed #888}
html.ak-kiri body p,html.ak-kiri body li,html.ak-kiri body h1,html.ak-kiri body h2,html.ak-kiri body h3,html.ak-kiri body td{text-align:left!important}
html.ak-fokus body :focus{outline:4px solid #FFB000!important;outline-offset:3px!important;box-shadow:0 0 0 7px rgba(27,79,214,.45)!important}
html.ak-fokus body a:hover{outline:2px dashed #1B4FD6}

/* ---------- chatbot Sekar ---------- */
.sk{position:fixed;right:16px;bottom:16px;z-index:955;font:500 .92rem/1.4 system-ui,sans-serif}
.sk-fab{display:flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:linear-gradient(135deg,#24407A,#3F6B4A);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 28px rgba(20,40,90,.35);transition:transform .15s}
.sk-fab:hover{transform:translateY(-2px)}
.sk-fab:focus-visible{outline:3px solid #FFD43B;outline-offset:3px}
.sk.buka .sk-fab{display:none}
.sk-av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:#FFD9A8;color:#7A4A28;font:800 1.05rem/1 Georgia,serif;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.sk-win{width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 32px));display:flex;flex-direction:column;background:#fff;color:#14182A;border-radius:20px;overflow:hidden;box-shadow:0 26px 70px rgba(10,20,50,.38);animation:skMasuk .2s ease-out}
.sk-win[hidden]{display:none}
@keyframes skMasuk{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.sk-win header{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:linear-gradient(135deg,#24407A,#2F5A6E);color:#fff}
.sk-win header div{flex:1;min-width:0;display:flex;flex-direction:column}
.sk-win header small{opacity:.85;font-size:.74rem}
.sk-win header button{border:0;background:rgba(255,255,255,.16);color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.05rem;cursor:pointer}
.sk-win header .sk-x{font-size:1.35rem;line-height:1}
.sk-log{flex:1;overflow:auto;padding:14px 12px;display:flex;flex-direction:column;gap:9px;background:#F5F7FB}
.sk-m{max-width:86%;padding:9px 12px;border-radius:16px;word-wrap:break-word}
.sk-m p{margin:0}
.sk-m.dia{align-self:flex-start;background:#fff;border:1px solid #E1E6F0;border-bottom-left-radius:5px}
.sk-m.aku{align-self:flex-end;background:#24407A;color:#fff;border-bottom-right-radius:5px}
.sk-t{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sk-t a{display:inline-block;padding:4px 10px;border-radius:999px;background:#EAF0FF;color:#1B3A86;font-weight:700;font-size:.8rem;text-decoration:none}
.sk-t a:hover{background:#D7E2FF}
.sk-ketik p{display:flex;gap:4px;padding:3px 0}
.sk-ketik i{width:7px;height:7px;border-radius:50%;background:#8A94AD;animation:skTitik 1s infinite}
.sk-ketik i:nth-child(2){animation-delay:.15s}.sk-ketik i:nth-child(3){animation-delay:.3s}
@keyframes skTitik{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sk-chip{display:flex;gap:6px;overflow-x:auto;padding:8px 10px 0;background:#F5F7FB}
.sk-chip:empty{display:none}
.sk-chip button{flex:0 0 auto;padding:6px 11px;border:1px solid #C9D3EA;border-radius:999px;background:#fff;color:#1B3A86;font:600 .78rem/1.2 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.sk-in{display:flex;gap:6px;padding:10px;background:#F5F7FB;border-top:1px solid #E1E6F0}
.sk-in input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid #D1D8E8;border-radius:999px;font:inherit;background:#fff;color:#14182A}
.sk-in input:focus{outline:none;border-color:#24407A;box-shadow:0 0 0 3px rgba(36,64,122,.18)}
.sk-in button{width:42px;height:42px;flex:0 0 42px;border:0;border-radius:50%;cursor:pointer;font-size:1rem}
.sk-kirim{background:#24407A;color:#fff}
.sk-mic{background:#E8ECF6;color:#14182A}
.sk-mic.dengar{background:#D93636;color:#fff;animation:skDenyut 1s infinite}
@keyframes skDenyut{0%,100%{box-shadow:0 0 0 0 rgba(217,54,54,.5)}50%{box-shadow:0 0 0 8px rgba(217,54,54,0)}}

/* tema gelap & kontras tinggi */
html[data-theme=dark] .ak-panel,html[data-theme=dark] .sk-win{background:#151B2C;color:#EEF1F8}
html[data-theme=dark] .ak-uk,html[data-theme=dark] .ak-x{background:#222A40;color:#EEF1F8}
html[data-theme=dark] .ak-o,html[data-theme=dark] .ak-uk button,html[data-theme=dark] .ak-sel select{background:#1B2236;color:#EEF1F8;border-color:#344061}
html[data-theme=dark] .ak-o i{background:#2A3350}
html[data-theme=dark] .ak-o[aria-pressed=true]{background:#20316A;border-color:#7C9BFF}
html[data-theme=dark] .sk-log,html[data-theme=dark] .sk-chip,html[data-theme=dark] .sk-in{background:#10162A;border-color:#2A3350}
html[data-theme=dark] .sk-m.dia{background:#1B2236;border-color:#2A3350;color:#EEF1F8}
html[data-theme=dark] .sk-in input,html[data-theme=dark] .sk-chip button{background:#1B2236;color:#EEF1F8;border-color:#344061}
html[data-theme=dark] .sk-t a{background:#22336A;color:#D6E0FF}
html[data-kontras="1"] .ak-tab,html[data-kontras="1"] .sk-fab,html[data-kontras="1"] .sk-kirim,html[data-kontras="1"] .sk-m.aku{background:#000;color:#fff;outline:2px solid #fff}
html[data-kontras="1"] .sk-win header{background:#000}

/* ponsel */
@media (max-width:640px){
  .ak-tab{top:auto;bottom:86px;padding:7px 4px 7px 3px;opacity:.94}
  .ak-tab svg{width:22px;height:22px}
  .ak-tab span{display:none}
  .ak-panel{left:8px;right:8px;width:auto;top:auto;bottom:8px;transform:none;max-height:78vh;animation:none}
  .sk{right:10px;bottom:10px}
  .sk-fab b{display:none}
  .sk-fab{padding:7px}
  .sk-win{position:fixed;left:8px;right:8px;bottom:8px;width:auto;height:min(78vh,600px)}
}
@media print{.ak-tab,.ak-panel,.ak-garis,.sk{display:none!important}}
@media (prefers-reduced-motion:reduce){.ak-panel,.sk-win,.sk-ketik i,.sk-mic.dengar{animation:none}}
/* teks diperbesar: tautan navigasi atas pindah ke menu ☰ agar halaman tidak melebar */
@media (max-width:1900px){html[data-ukuran="2"] body.pub .pub-nav .links,html[data-ukuran="3"] body.pub .pub-nav .links{display:none}}
@media (max-width:1600px){html[data-ukuran="1"] body.pub .pub-nav .links{display:none}}
html[data-ukuran="2"] body.pub .pub-nav .brand small,html[data-ukuran="3"] body.pub .pub-nav .brand small{display:none}
html[data-ukuran] body.pub h1,html[data-ukuran] body.pub h2{overflow-wrap:break-word}
html[data-ukuran="2"] body.pub .gk-hero>*,html[data-ukuran="3"] body.pub .gk-hero>*{min-width:0}
html[data-ukuran="3"] body.pub .btn.lg{white-space:normal}
.sk-nilai{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:.74rem;color:#6B7390}
.sk-nilai button{border:1px solid #D7DCEA;background:#fff;border-radius:999px;padding:1px 8px;cursor:pointer;font-size:.85rem}
.sk-nilai button:hover{background:#EAF0FF}
html[data-theme=dark] .sk-nilai button{background:#1B2236;border-color:#344061}