/* --- Erişilebilirlik Widget Tasarımı --- */
   .access-widget {
    position: fixed;
    bottom: 10px;
    right: 100px;
    z-index: 2147483647; /* En üst katmanda durmasını garantiler */
    font-family: sans-serif;
    display: block !important; /* Gizlenmeyi önler */
}

#access-btn {
    background-color: #0056b3;
    color: white;
    border: none;
    /* Yuvarlak yerine hap şekli için radius: */
    border-radius: 30px; 
    /* Genişlik içeriğe göre uzasın: */
    width: auto; 
    height: 50px;
    padding: 0 20px; /* Sağdan soldan boşluk */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    transition: transform 0.2s, background-color 0.2s;
    
    /* İkon ve yazıyı yanyana ortala */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* İkon ile yazı arasındaki boşluk */
}

#access-btn:hover {
    transform: scale(1.05); /* Üzerine gelince hafif büyüsün */
    background-color: #004494; /* Rengi biraz koyulaşsın */
}

/* İkonun boyutu */
#access-btn i {
    font-size: 24px;
}

/* Yazı stili */
.widget-text {
    white-space: nowrap; /* Yazı alt satıra kaymasın */
}

.access-panel {
    display: none; 
    position: absolute;
    bottom: 70px; /* Butonun üstünde dursun */
    right: 0;     /* Widget'ın sağ kenarına hizalansın */
    
    /* --- ÖNEMLİ KISIM BURASI --- */
    width: 350px !important; /* Genişliği 350px'e sabitledik */
    min-width: 300px;        /* En az 300px olsun dedik */
    /* --------------------------- */
    
    z-index: 2147483647;
}

/* Panel açılınca göster */
.access-panel.show {
    display: block !important;
}

/* --- MOBİL UYUMLULUK EKLEMESİ --- */
/* Telefonda 350px çok geniş gelebilir, ekran taşmasın diye: */
@media (max-width: 400px) {
    .access-panel {
        width: 90vw !important; /* Ekran genişliğinin %90'ı olsun */
        right: -10px; /* Mobilde hafif sağa kaydırıp ortalayalım */
    }
}

.access-panel button {
    margin: 4px 0;
    padding: 10px;
    cursor: pointer;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #333;
}

.access-panel button:hover {
    background: #e2e6ea;
}

.access-panel button i {
    width: 20px;
    text-align: center;
}

/* --- FONKSİYONEL SINIFLAR --- */

/* 1. Yüksek Kontrast */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}
body.high-contrast *:not(#access-widget):not(#access-widget *) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* 2. Gri Tonlama (Widget hariç) */
body.grayscale > *:not(#access-widget) {
    filter: grayscale(100%);
}

/* 3. Linkleri Vurgula */
body.highlight-links a {
    text-decoration: underline !important;
    background-color: yellow !important;
    color: black !important;
    font-weight: bold !important;
}

/* 4. Okunabilir Font (İkonları bozmadan) */
body.readable-font {
    font-family: Arial, Helvetica, sans-serif !important;
    line-height: 1.6 !important;
}
/* Font Awesome ikonlarının fontunu koru */
body.readable-font .fa, 
body.readable-font .fas, 
body.readable-font .fab,
body.readable-font i {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome !important;
}

/* 5. Resimleri Gizle (Widget ikonları hariç) */
body.hide-images img:not(#access-widget img),
body.hide-images svg:not(#access-widget svg),
body.hide-images video,
body.hide-images iframe {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- Sayfa Yapısı Modalı --- */
.structure-modal {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Arka planı karart */
    z-index: 2147483650; /* Widget'tan bile üstte olsun */
    align-items: center;
    justify-content: center;
}

.structure-content {
    background: white;
    width: 90%;
    max-width: 500px;
    max-height: 80vh; /* Ekranın %80'i kadar uzun olabilir */
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: sans-serif;
}

.structure-header {
    background: #f1f1f1;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.structure-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #555;
    line-height: 1;
}

.structure-list-container {
    padding: 15px;
    overflow-y: auto; /* Liste uzunsa kaydırma çubuğu çıksın */
}

/* Liste Elemanları */
.structure-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    color: #333;
}

.structure-item:hover {
    background-color: #f9f9f9;
    color: #0056b3;
}

.tag-badge {
    background: #e9ecef;
    color: #495057;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 10px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}


/* --- Odak Maskesi (Yatay Okuma Cetveli Modu) --- */
.focus-mask {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    top: 0;
    left: 0; /* Her zaman sol kenara yapışık */
    width: 100%; /* Ekranı yatay olarak tamamen kapla */
    height: 100px; /* Şeridin yüksekliği (öncekinin yarısı) */
    
    /* Yine aynı mantık: Kutu şeffaf, etrafındaki devasa gölge
       ekranın geri kalanını karartıyor.
    */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75); 
    
    z-index: 2147483645;
    pointer-events: none; /* Tıklamalar arkaya geçsin */
    
    /* Sadece dikeyde (Y ekseninde) ortala. Yatayda zaten tam genişlik. */
    transform: translateY(-50%); 
}

/* Aktif olduğunda görünür yap */
.focus-mask.active {
    display: block;
}
/* --- Sesli Okuma Modu --- */
/* --- Sesli Okuma Modu (DÜZELTİLMİŞ) --- */

/* 1. Mod aktifken genel imleç değişimi */
body.sr-active {
    cursor: help !important;
}

/* 2. Vurgulama Kuralı: 
   Widget'ın KENDİSİ (#access-widget) ve İÇİNDEKİLER (#access-widget *) HARİÇ 
   diğer tüm öğelerin üzerine gelince mavi yap.
*/
body.sr-active *:not(#access-widget):not(#access-widget *):hover {
    outline: 2px solid #0056b3; 
    background-color: rgba(0, 86, 179, 0.1);
    transition: all 0.2s;
}

/* 3. O an okunan metni vurgula (Yine widget hariç) */
.speaking-now {
    background-color: yellow !important;
    color: black !important;
}

/* 4. Widget'ın opaklığını ve görünürlüğünü garantiye al */
#access-widget {
    opacity: 1 !important;
    visibility: visible !important;
}



/* --- YENİ ÖZELLİKLER --- */

/* 1. Büyük İmleç Modu */
body.big-cursor, 
body.big-cursor * {
    /* Base64 ile gömülü büyük siyah ok */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M1 1l15 40 5-13 13 0z"/></svg>'), auto !important;
}
/* Linklerin üzerine gelince el işareti yerine yine büyük imleç çıksın */
body.big-cursor a, 
body.big-cursor button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M1 1l15 40 5-13 13 0z"/></svg>'), pointer !important;
}

/* 2. Animasyonları Durdur Modu */
body.stop-animations *,
body.stop-animations *:before,
body.stop-animations *:after {
    animation: none !important;       /* Hareketli animasyonları durdur */
    transition: none !important;      /* Yumuşak geçişleri iptal et */
    scroll-behavior: auto !important; /* Kaydırma animasyonunu kapat */
}

/* 3. Metin Aralığı Modu (WCAG Standardı) */
body.text-spacing {
    line-height: 2 !important;        /* Satır yüksekliği */
    letter-spacing: 0.12em !important; /* Harf arası */
    word-spacing: 0.16em !important;   /* Kelime arası */
}
/* İkonların yapısını bozmasın */
body.text-spacing .fa, 
body.text-spacing .fas {
    letter-spacing: normal !important;
}

/* Mobil cihazlarda (768px altı) yazıyı gizle */
@media (max-width: 768px) {
    .widget-text {
        display: none;
    }
    #access-btn {
        width: 50px; /* Tekrar kare/yuvarlak yap */
        height: 50px;
        padding: 0;
        border-radius: 50%;
    }
}


/* --- Aktif Özellik Butonu --- */
.access-panel .btn.active-feature {
    background-color: #0056b3 !important; /* Koyu Mavi Arka Plan */
    color: white !important;               /* Beyaz Yazı */
    border-color: #004494 !important;
}

/* İkonun rengini de beyaz yap */
.access-panel .btn.active-feature i {
    color: white !important; 
}