#aks-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

/* Tombol Floating */
#aks-toggle{
    position:fixed;bottom:24px;left:24px;z-index:99998;
    width:60px;height:60px;border-radius:50%;
    background:#0a2e5c;color:#fff;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(10,46,92,.3);
    transition:transform .2s,background .2s;
}
#aks-toggle svg{
    stroke:#fff !important;
    fill:none !important;
    width:32px !important;height:32px !important;
    min-width:32px !important;min-height:32px !important;
    max-width:none !important;max-height:none !important;
    display:block !important;
    flex-shrink:0 !important;
}
#aks-toggle svg *{
    stroke:#fff !important;
    stroke-width:2 !important;
}
#aks-toggle:hover{transform:scale(1.08);background:#1a6bbf}
#aks-toggle:focus{outline:3px solid #fbbf24;outline-offset:2px}

/* Panel */
#aks-panel{
    position:fixed;bottom:94px;left:24px;z-index:99999;
    width:300px;max-height:75vh;overflow-y:auto;
    background:#fff;border-radius:16px;
    box-shadow:0 12px 40px rgba(10,46,92,.25);
    transform:translateY(10px) scale(.97);opacity:0;pointer-events:none;
    transition:transform .2s,opacity .2s;
}
#aks-panel.aks-open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.aks-hidden{display:none !important}

.aks-panel-header{
    background:#0a2e5c;color:#fff;padding:14px 16px;
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:1;
}
.aks-panel-header strong{font-size:14px}
#aks-close{
    background:none !important;border:none;color:#fff !important;font-size:22px;cursor:pointer;
    width:28px;height:28px;border-radius:50%;line-height:1;
    display:flex;align-items:center;justify-content:center;
}
#aks-close:hover{background:rgba(255,255,255,.15) !important}

.aks-panel-body{padding:16px}

.aks-section{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #eef1f5}
.aks-section:last-of-type{border-bottom:none;margin-bottom:10px}

.aks-section-label{font-size:12px;font-weight:700;color:#0a2e5c;margin:0 0 10px;text-transform:uppercase;letter-spacing:.03em}

.aks-btn{
    display:flex;align-items:center;gap:10px;width:100%;
    background:#f4f7fb;border:1px solid #e0e5ee;border-radius:8px;
    padding:10px 14px;font-size:13px;font-weight:600;color:#222;
    cursor:pointer;margin-bottom:8px;text-align:left;
    transition:background .15s,border-color .15s;
}
.aks-btn:last-child{margin-bottom:0}
.aks-btn:hover{background:#eef3fb;border-color:#1a6bbf}
.aks-btn:focus{outline:3px solid #fbbf24;outline-offset:1px}

.aks-btn-icon{font-size:16px;flex-shrink:0}

.aks-btn-toggle[data-active="true"]{
    background:#0a2e5c;border-color:#0a2e5c;color:#fff;
}

.aks-btn-row{display:flex;gap:8px}
.aks-btn-small{
    flex:1;justify-content:center;padding:10px 8px;font-size:14px;font-weight:700;
}

.aks-hint{font-size:11px;color:#888;margin:6px 0 0;line-height:1.5}

.aks-btn-reset-all{
    background:#fef2f2;border-color:#fecaca;color:#991b1b;
    justify-content:center;font-weight:700;
}
.aks-btn-reset-all:hover{background:#fee2e2;border-color:#fca5a5}

/* Garis bantu baca */
#aks-readline-bar{
    position:fixed;left:0;right:0;height:36px;
    background:rgba(251,191,36,.25);
    border-top:2px solid #fbbf24;border-bottom:2px solid #fbbf24;
    z-index:99997;pointer-events:none;
    transition:top .05s linear;
}

@media(max-width:480px){
    #aks-toggle{bottom:16px;left:16px;width:50px;height:50px}
    #aks-panel{
        bottom:74px;left:16px;
        width:calc(100vw - 32px);
        max-height:70vh;
    }
}

html.aks-font-step-1{ zoom: 1.1; }
html.aks-font-step-2{ zoom: 1.2; }
html.aks-font-step-3{ zoom: 1.3; }
html.aks-font-step-4{ zoom: 1.4; }
html.aks-font-step--1{ zoom: 0.9; }
html.aks-font-step--2{ zoom: 0.8; }

/* Fallback untuk browser tanpa dukungan 'zoom' (misal Firefox lama) */
@supports not (zoom: 1){
    html.aks-font-step-1 body{ transform:scale(1.1); transform-origin:top left; width:90.9%; }
    html.aks-font-step-2 body{ transform:scale(1.2); transform-origin:top left; width:83.3%; }
    html.aks-font-step-3 body{ transform:scale(1.3); transform-origin:top left; width:76.9%; }
    html.aks-font-step-4 body{ transform:scale(1.4); transform-origin:top left; width:71.4%; }
    html.aks-font-step--1 body{ transform:scale(0.9); transform-origin:top left; width:111.1%; }
    html.aks-font-step--2 body{ transform:scale(0.8); transform-origin:top left; width:125%; }
}

/* ══════════════════════════════════════════════
   STATE GLOBAL — diterapkan ke <html> / <body>
   ══════════════════════════════════════════════ */

html.aks-contrast-mode{
    filter:contrast(1.3) !important;
}
html.aks-contrast-mode body{
    background:#000 !important;color:#fff !important;
}
html.aks-contrast-mode a{color:#ffeb3b !important}

html.aks-grayscale-mode{
    filter:grayscale(1) !important;
}

html.aks-spacing-mode body,
html.aks-spacing-mode p,
html.aks-spacing-mode li,
html.aks-spacing-mode div{
    line-height:2 !important;
    letter-spacing:.03em !important;
}

/* Highlight saat hover untuk TTS */
.aks-tts-hover-highlight{
    outline:2px solid #1a6bbf !important;
    outline-offset:2px !important;
    background:rgba(26,107,191,.06) !important;
    cursor:pointer !important;
}