/* ==========================================================================
   MENU AKSESIBILITAS MANDIRI - PENGADILAN NEGERI ENREKANG KELAS II
   Standar Ditjen Badilum Mahkamah Agung RI & Standar WCAG 2.0 Level AA
   ========================================================================== */

/* 1. TOMBOL MELAYANG AKSESIBILITAS (FLOATING TRIGGER BUTTON) */
#accessibility-floating-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 99995;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0056b3 0%, #003366 100%);
    color: #ffffff;
    border: 2.5px solid #ffffff;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    outline: none;
}

#accessibility-floating-btn.pos-right {
    left: auto;
    right: 25px;
    bottom: 95px;
}

#accessibility-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 51, 102, 0.6);
    background: linear-gradient(135deg, #0066cc 0%, #004080 100%);
    color: #ffffff;
}

#accessibility-floating-btn:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
}

#accessibility-floating-btn svg {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    fill: #ffffff !important;
    display: block !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease;
    pointer-events: none !important;
}

#accessibility-floating-btn span {
    pointer-events: none;
}

#accessibility-floating-btn:hover svg {
    transform: rotate(-8deg);
}

/* Lencana Hitungan Fitur Aktif pada Tombol */
#accessibility-active-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* 2. OVERLAY & DRAWER / MODAL MENU AKSESIBILITAS */
#accessibility-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#accessibility-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. MODAL MENU AKSESIBILITAS USERWAY (1:1 REPLICA) */
.userway-widget-container {
    position: fixed;
    bottom: 86px;
    left: 25px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 84vh;
    max-height: 700px;
    background: #f1f4f9;
    border-radius: 18px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.08);
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px) scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #111827;
}

.userway-widget-container.pos-right {
    left: auto;
    right: 25px;
    bottom: 155px;
}

.userway-widget-container.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Mode Oversized Widget (Skala Besar) */
.userway-widget-container.userway-oversized {
    width: 480px;
    max-width: calc(100vw - 20px);
    max-height: 760px;
}

.userway-widget-container.userway-oversized .userway-card {
    padding: 24px 12px 18px;
    min-height: 125px;
}

.userway-widget-container.userway-oversized .uwy-card-icon svg {
    transform: scale(1.15);
}

.userway-widget-container.userway-oversized .uwy-card-label {
    font-size: 15px;
}

/* Header Biru Royal UserWay */
.userway-header {
    background: #0050ff;
    color: #ffffff;
    height: 56px;
    min-height: 56px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 80, 255, 0.35);
    z-index: 2;
}

.userway-header-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: #ffffff;
    line-height: 1;
}

.userway-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.userway-close-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

/* Body Area UserWay (Scrollable) */
.userway-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 14px 12px 14px;
    background: #f1f4f9;
}

.userway-body::-webkit-scrollbar {
    width: 5px;
}

.userway-body::-webkit-scrollbar-track {
    background: transparent;
}

.userway-body::-webkit-scrollbar-thumb {
    background: #0050ff;
    border-radius: 4px;
}

/* Tombol Spanduk Atas "How UserWay Works" */
.userway-banner-btn {
    width: 100%;
    background: #0050ff;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 11px 18px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 80, 255, 0.3);
    transition: transform 0.15s ease, background 0.15s ease;
    outline: none;
}

.userway-banner-btn:hover {
    background: #0044db;
    transform: translateY(-1px);
}

.userway-banner-btn .userway-play-icon {
    width: 22px;
    height: 22px;
    background: #0037ab;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    padding-left: 2px;
}

/* Baris Pengaturan Oversized Widget */
.userway-oversized-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 4px 14px 4px;
}

.userway-oversized-label {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

/* Sakelar Toggle Switch */
.userway-switch {
    width: 52px;
    height: 28px;
    background: #374151;
    border-radius: 9999px;
    position: relative;
    border: none;
    padding: 2px;
    cursor: pointer;
    transition: background 0.25s ease;
    outline: none;
    display: inline-flex;
    align-items: center;
}

.userway-switch-thumb {
    width: 24px;
    height: 24px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
}

.userway-switch .uwy-switch-check {
    display: none;
}

.userway-switch .uwy-switch-x {
    display: block;
}

.userway-switch[aria-pressed="true"] {
    background: #0050ff;
}

.userway-switch[aria-pressed="true"] .userway-switch-thumb {
    transform: translateX(24px);
}

.userway-switch[aria-pressed="true"] .uwy-switch-x {
    display: none;
}

.userway-switch[aria-pressed="true"] .uwy-switch-check {
    display: block;
}

/* Grid 2-Kolom UserWay Cards */
.userway-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

/* Kartu Fitur Interaktif */
.userway-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 20px 10px 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    outline: none;
    text-align: center;
    min-height: 110px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.userway-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 80, 255, 0.12);
    border-color: #93c5fd;
}

.userway-card:focus-visible {
    outline: 2px solid #0050ff;
    outline-offset: 2px;
}

/* Status Kartu Aktif */
.userway-card.active {
    border: 2px solid #0050ff !important;
    box-shadow: 0 4px 14px rgba(0, 80, 255, 0.22) !important;
}

.userway-card.active .userway-card-label {
    color: #0050ff !important;
}

.userway-card.active .uwy-card-icon {
    color: #0050ff !important;
}

.userway-card.active .uwy-active-indicator {
    display: block !important;
}

/* Indikator Titik Biru Aktif */
.uwy-active-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0050ff;
    display: none;
}

/* Lencana 'i' Khusus Kartu Dyslexia */
.uwy-card-badge-i {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #0d9488;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Ikon Kartu */
.uwy-card-icon {
    color: #0f172a;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.uwy-card-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    margin-top: 10px;
    line-height: 1.2;
    transition: color 0.15s ease;
}

/* Ikon Typography Khusus T T & Df */
.uwy-icon-text {
    font-family: serif;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.uwy-icon-text .t-small {
    font-size: 21px;
}

.uwy-icon-text .t-large {
    font-size: 29px;
}

.uwy-icon-df {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

/* Footer UserWay (Manage Button + Branding) */
.userway-footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    height: 54px;
    min-height: 54px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.userway-manage-btn {
    background: #0050ff;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 6px 18px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    outline: none;
}

.userway-manage-btn:hover {
    background: #0044db;
    transform: translateY(-1px);
}

.userway-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.userway-brand-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.userway-brand-text .brand-title {
    font-size: 16.5px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #111827;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.userway-brand-text .brand-sub {
    font-size: 9.5px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1;
}

.userway-brand-text .brand-sub strong {
    color: #111827;
}

/* Dialog Bantu (How UserWay Works & Manage) */
.userway-info-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2147483648;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.uwy-dialog-content {
    background: #ffffff;
    border-radius: 14px;
    width: 440px;
    max-width: 95vw;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: uwyFadeIn 0.2s ease-out;
}

@keyframes uwyFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.uwy-dialog-header {
    background: #0050ff;
    color: #ffffff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uwy-dialog-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.uwy-dialog-body {
    padding: 18px;
    max-height: 65vh;
    overflow-y: auto;
}

.uwy-dialog-footer {
    padding: 12px 18px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   4. KELAS-KELAS TRANSFORMASI AKSESIBILITAS PADA ELEMEN SITUS (BODY)
   ========================================================================== */

/* 1. Mode Kontras Tinggi (High Contrast - Standar WCAG 2.0 AA) */
body.acc-high-contrast {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffff00 !important;
}

body.acc-high-contrast *:not(.userway-widget-container *):not(#accessibility-floating-btn *):not(#asr-player-dock *):not(.userway-info-dialog *) {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.acc-high-contrast a:not(.userway-widget-container *):not(#asr-player-dock *):not(.userway-info-dialog *) {
    color: #00ffff !important;
    text-decoration: underline !important;
}

body.acc-high-contrast img:not(.slide-zone-img):not(.skt-logo-img) {
    filter: grayscale(100%) contrast(150%) !important;
}

body.acc-high-contrast .btn:not(.userway-widget-container *):not(#asr-player-dock *):not(.userway-info-dialog *),
body.acc-high-contrast button:not(.userway-widget-container *):not(#asr-player-dock *):not(.userway-info-dialog *) {
    background-color: #111111 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

/* 2. Mode Gelap (Dark Mode) */
body.acc-dark-mode {
    background-color: #121212 !important;
    background-image: none !important;
    color: #e2e8f0 !important;
}

body.acc-dark-mode .sheet,
body.acc-dark-mode .card,
body.acc-dark-mode .module,
body.acc-dark-mode .module-card,
body.acc-dark-mode #headerbar,
body.acc-dark-mode footer {
    background-color: #1e1e1e !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.acc-dark-mode h1, 
body.acc-dark-mode h2, 
body.acc-dark-mode h3, 
body.acc-dark-mode h4, 
body.acc-dark-mode h5, 
body.acc-dark-mode h6 {
    color: #f8fafc !important;
}

body.acc-dark-mode a:not(.userway-widget-container *):not(#asr-player-dock *) {
    color: #38bdf8 !important;
}

/* 3. Mode Monokrom (Grayscale) */
body.acc-grayscale {
    filter: grayscale(100%) !important;
}

/* 4. Mode Pembalikan Warna (Invert) */
body.acc-invert {
    filter: invert(100%) hue-rotate(180deg) !important;
}

body.acc-invert img,
body.acc-invert video,
body.acc-invert iframe,
body.acc-invert .userway-widget-container,
body.acc-invert #accessibility-floating-btn,
body.acc-invert .userway-info-dialog {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/* 5. Font Ramah Disleksia (OpenDyslexic / Lexend) */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

body.acc-dyslexic-font,
body.acc-dyslexic-font *:not(.bi):not(.fa):not(.fas):not(.fab):not(.userway-widget-container *):not(#asr-player-dock *) {
    font-family: 'Lexend', 'Comic Sans MS', sans-serif !important;
    letter-spacing: 0.04em !important;
}

/* 6. Spasi Teks (Text Spacing Levels) */
body.acc-spacing-1 *:not(.userway-widget-container *):not(#asr-player-dock *) {
    letter-spacing: 0.08em !important;
    word-spacing: 0.16em !important;
}

body.acc-spacing-2 *:not(.userway-widget-container *):not(#asr-player-dock *) {
    letter-spacing: 0.14em !important;
    word-spacing: 0.24em !important;
}

body.acc-spacing-3 *:not(.userway-widget-container *):not(#asr-player-dock *) {
    letter-spacing: 0.20em !important;
    word-spacing: 0.32em !important;
}

/* 7. Tinggi Baris (Line Height Levels) */
body.acc-lh-1 p, body.acc-lh-1 li, body.acc-lh-1 td, body.acc-lh-1 a {
    line-height: 1.65 !important;
}

body.acc-lh-2 p, body.acc-lh-2 li, body.acc-lh-2 td, body.acc-lh-2 a {
    line-height: 1.95 !important;
}

body.acc-lh-3 p, body.acc-lh-3 li, body.acc-lh-3 td, body.acc-lh-3 a {
    line-height: 2.3 !important;
}

/* 8. Perataan Teks (Text Align Levels) */
body.acc-align-left p, body.acc-align-left div:not(.userway-widget-container *), body.acc-align-left article {
    text-align: left !important;
}

body.acc-align-center p, body.acc-align-center div:not(.userway-widget-container *), body.acc-align-center article {
    text-align: center !important;
}

body.acc-align-right p, body.acc-align-right div:not(.userway-widget-container *), body.acc-align-right article {
    text-align: right !important;
}

body.acc-align-justify p, body.acc-align-justify div:not(.userway-widget-container *), body.acc-align-justify article {
    text-align: justify !important;
}

/* 9. Sembunyikan Gambar (Hide Images) */
body.acc-hide-images img:not(.userway-brand *),
body.acc-hide-images video,
body.acc-hide-images picture,
body.acc-hide-images .slide-zone-img,
body.acc-hide-images .service-img-frame {
    opacity: 0.04 !important;
    visibility: hidden !important;
}

/* 10. Sorot Semua Tautan (Highlight Links) */
body.acc-highlight-links a:not(.userway-widget-container *):not(#accessibility-floating-btn):not(#asr-player-dock *):not(.userway-info-dialog *) {
    background-color: #fef08a !important;
    color: #854d0e !important;
    text-decoration: underline 2.5px solid #b45309 !important;
    outline: 2px solid #eab308 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
}

/* 11. Hentikan Animasi (Pause Animations) */
body.acc-pause-animations *,
body.acc-pause-animations *::before,
body.acc-pause-animations *::after {
    animation-play-state: paused !important;
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* 12. Kursor Mouse Besar & Reading Guide */
body.acc-big-cursor,
body.acc-big-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M4 4 L22 40 L28 26 L42 22 Z' fill='%23000000' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, auto !important;
}

body.acc-big-cursor a,
body.acc-big-cursor button,
body.acc-big-cursor [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M16 4 C13 4 11 7 11 10 L11 24 C9 22 7 21 5 23 C3 25 3 28 6 31 L14 40 C17 43 23 44 28 44 C34 44 38 39 38 33 L38 21 C38 18 35 15 32 15 C31 15 30 15 29 16 C28 14 26 12 23 12 C22 12 21 12 20 13 L20 10 C20 7 18 4 16 4 Z' fill='%230050ff' stroke='%23ffffff' stroke-width='2.5'/%3E%3C/svg%3E") 14 4, pointer !important;
}

/* Garis Panduan Membaca (Reading Guide Ruler) */
#acc-reading-ruler {
    position: fixed;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(254, 240, 138, 0.35);
    border-top: 2.5px solid #ca8a04;
    border-bottom: 2.5px solid #ca8a04;
    pointer-events: none;
    z-index: 2147483645;
    display: none;
    transform: translateY(-50%);
    box-shadow: 0 0 15px rgba(202, 138, 4, 0.25);
    transition: top 0.04s linear;
}

/* Tooltip Mengambang Ramah Aksesibilitas */
#uwy-floating-tooltip {
    position: fixed;
    background: #1e293b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 2147483646;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    max-width: 280px;
    line-height: 1.3;
}

/* Penyesuaian Responsif Tablet */
@media (max-width: 768px) {
    #accessibility-floating-btn {
        width: 48px;
        height: 48px;
        bottom: 20px;
        left: 20px;
    }
    #accessibility-floating-btn.pos-right {
        right: 20px;
        bottom: 85px;
    }
    .userway-widget-container {
        left: 16px;
        bottom: 76px;
        width: 360px;
    }
    .userway-widget-container.pos-right {
        left: auto;
        right: 16px;
        bottom: 140px;
    }
}

/* Penyesuaian Responsif Smartphone */
@media (max-width: 576px) {
    .userway-widget-container {
        left: 8px !important;
        right: 8px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: 100vw !important;
        height: 88vh !important;
        border-radius: 14px;
    }
    .userway-grid {
        gap: 8px;
    }
    .userway-card {
        padding: 16px 8px 12px 8px;
        min-height: 98px;
    }
    .userway-card-label {
        font-size: 12px;
    }
    #accessibility-floating-btn {
        width: 44px;
        height: 44px;
        bottom: 18px;
        left: 16px;
    }
    #accessibility-floating-btn.pos-right {
        right: 16px;
        bottom: 78px;
    }
    #accessibility-floating-btn svg {
        width: 24px;
        height: 24px;
    }
}