:root {
     --adu-navy: #002855;
     /* ADÜ Lacivert */
     --adu-red: #e20613;
     /* ADÜ Kırmızı */
     --text-gray: #555;
 }

 body,
 html {
     margin: 0;
     padding: 0;
     font-family: 'Montserrat', sans-serif;
     overflow-x: hidden;
 }

 #bg-video {
     position: fixed;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -10;
     /* En altta */
     transform: translate(-50%, -50%);
     object-fit: cover;
 }

 .video-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -5;
     /* Videonun ÜSTÜNDE ama içeriğin altında */
     background-color: #002855;
     /* ADÜ Laciverti (Varsayılan hali) */
     opacity: 0.8;
     /* Normalde videoyu %50 göster */
     transition: opacity 0.3s ease-in-out;
     /* Geçiş süresi 0.5 saniye */
     pointer-events: none;
     /* Tıklamaları engellemesin */
 }

 /* Bu sınıf eklendiğinde ekran simsiyah/lacivert olsun */
 .video-overlay.mask-active {
     opacity: 1 !important;
     /* Videoyu TAMAMEN gizle */
 }

 /* --- 2. MENÜ (NAVBAR) --- */
 .navbar {
     padding: 15px 0;
     transition: all 0.4s ease;
 }

 .navbar-transparent {
     background-color: transparent;
     padding: 20px 0;
 }

 .navbar-scrolled {
     background-color: rgba(0, 40, 85, 0.98);
     /* Kaydırınca koyu lacivert */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     padding: 10px 0;
 }

 /* --- LOGO KONTUR EFEKTİ (PS Tarzı) --- */
 .navbar-brand img {
     height: 70px;
     /* Önceki dikdörtgen border ayarlarını sıfırla */


     transition: all 0.3s ease;
 }

 /* Opsiyonel: Hover efekti */
 .navbar-brand img:hover {}

 .navbar-nav .nav-link {
     color: white !important;
     font-weight: 600;
     font-size: 16px;
     text-transform: uppercase;
     margin-left: 15px;
     position: relative;
 }

 /* Menü alt çizgi efekti (Mavi) */
 .navbar-nav .nav-link::after {
     content: '';
     display: block;
     width: 0;
     height: 3px;
     background: #4da8da;
     transition: width .3s;
     position: absolute;
     bottom: 0px;
     left: 0;
 }

 .navbar-nav .nav-link:hover::after {
     width: 100%;
 }

 /* Dropdown Hover Ayarları */
 @media (min-width: 992px) {
     .nav-item.dropdown:hover .dropdown-menu {
         display: block;
         animation: fadeIn 0.3s;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .dropdown-menu {
     border: none;
     border-top: 4px solid var(--adu-navy);
     border-radius: 0 0 5px 5px;
     padding: 0;
 }

 .dropdown-item {
     padding: 12px 20px;
     font-size: 13px;
     text-transform: uppercase;
     font-weight: 600;
     color: #444;
     border-bottom: 1px solid #f1f1f1;
 }

 .dropdown-item:hover {
     background-color: #f8f9fa;
     color: var(--adu-navy) !important;
     padding-left: 25px;
     transition: 0.2s;
 }

 /* --- 3. HERO (GİRİŞ) ALANI --- */
 .hero-section {
     height: 100vh;
     /* Ekranı tam kaplar */
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     position: relative;
     z-index: 1;
 }

 .hero-title {
     font-size: 4rem;
     font-weight: 800;
     text-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
     margin-bottom: 10px;
 }

 .hero-subtitle {
     font-size: 1.5rem;
     font-weight: 300;
     letter-spacing: 2px;
     margin-bottom: 40px;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
 }

 .btn-hero {
     padding: 15px 40px;
     border-radius: 50px;
     font-weight: 700;
     text-transform: uppercase;
     margin: 10px;
     transition: transform 0.3s;
 }

 .btn-hero:hover {
     transform: translateY(-3px);
 }

 /* --- 4. İÇERİK BÖLÜMÜ (BEYAZ KISIM) --- */
 .main-content {
     position: relative;
     background-color: #fff;
     /* Video üzerine gelen beyaz perde */
     z-index: 2;
     padding-top: 80px;
     padding-bottom: 60px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
     /* Üstte gölge */
 }

 /* Başlıklar */
 .section-header {

     margin-bottom: 30px;
     padding-bottom: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .section-title {
     color: var(--adu-navy);
     font-weight: 800;
     font-size: 1.8rem;
     position: relative;
 }

 .section-title::after {
     content: '';
     position: absolute;
     bottom: -17px;
     left: 0;
     width: 80px;
     height: 4px;
     background-color: var(--adu-red);
 }

 /* Haber Kartları */
 .news-card {
     border: none;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     margin-bottom: 30px;
     background: #fff;
     overflow: hidden;
     border-radius: 8px;
 }

 .news-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .news-img-wrapper {
     position: relative;
     height: 220px;
     overflow: hidden;
 }

 .news-img-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s;
 }

 .news-card:hover .news-img-wrapper img {
     transform: scale(1.1);
 }

 .date-badge {
     position: absolute;
     top: 15px;
     left: 15px;
     background: var(--adu-red);
     color: white;
     padding: 8px 12px;
     text-align: center;
     border-radius: 4px;
     font-weight: bold;
     line-height: 1.1;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 }

 .date-badge span {
     display: block;
     font-size: 1.2rem;
 }

 .date-badge small {
     font-size: 0.7rem;
     text-transform: uppercase;
 }

 .news-body {
     padding: 20px;
 }

 .news-title {
     font-size: 1.1rem;
     font-weight: 700;
     color: #333;
     text-decoration: none;
     display: block;
     margin-bottom: 10px;
     line-height: 1.4;
 }

 .news-title:hover {
     color: var(--adu-navy);
 }

 .read-more {
     font-size: 0.85rem;
     color: var(--adu-navy);
     font-weight: 600;
     text-decoration: none;
 }

 /* Duyuru Listesi */
 .announcement-list .list-group-item {
     border: none;
     border-bottom: 1px solid #eee;
     padding: 15px 0;
     display: flex;
     align-items: flex-start;
     background: transparent;
 }

 .announcement-icon {
     background: rgba(0, 40, 85, 0.1);
     color: var(--adu-navy);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     flex-shrink: 0;
 }

 .announcement-content h6 {
     font-weight: 600;
     margin-bottom: 5px;
     font-size: 1rem;
 }

 .announcement-content h6 a {
     text-decoration: none;
     color: #333;
     transition: color 0.2s;
 }

 .announcement-content h6 a:hover {
     color: var(--adu-red);
 }

 .announcement-date {
     font-size: 0.8rem;
     color: #888;
 }

 /* İstatistik Bandı */
 .stats-section {
     background-color: #f9f9f9;
     padding: 50px 0;
     border-top: 1px solid #eee;
 }

 .stat-item {
     text-align: center;
     padding: 20px;
 }

 .stat-icon {
     font-size: 2.5rem;
     color: var(--adu-navy);
     margin-bottom: 15px;
 }

 .stat-number {
     font-size: 2.5rem;
     font-weight: 800;
     color: #333;
 }

 .stat-label {
     font-size: 1rem;
     color: #666;
     text-transform: uppercase;
     font-weight: 500;
 }

 /* Footer */
 footer {
     background-color: var(--adu-navy);
     color: white;
     padding: 60px 0 20px;
     position: relative;
     z-index: 2;
 }

 footer h5 {
     color: white;
     font-weight: 700;
     margin-bottom: 25px;
     padding-bottom: 10px;
     border-bottom: 2px solid var(--adu-red);
     display: inline-block;
 }

 footer ul {
     padding: 0;
     list-style: none;
 }

 footer ul li {
     margin-bottom: 12px;
 }

 footer ul li a {
     color: #ccc;
     text-decoration: none;
     transition: 0.3s;
 }

 footer ul li a:hover {
     color: white;
     padding-left: 5px;
 }


 .sponsor-card {
     background: #fff;
     border-radius: 12px;
     /* Köşeleri yuvarlat */
     height: 200px;
     /* Tüm kutular eşit yükseklikte */
     display: flex;
     /* İçeriği ortalamak için */
     align-items: center;
     justify-content: center;
     padding: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     /* Hafif gölge */
     transition: all 0.3s ease;
     /* Yumuşak geçiş */
     border: 1px solid #eee;
     overflow: hidden;
 }

 .sponsor-card img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     /* Resim kutuya sığsın ama bozulmasın */

     opacity: 1;
     transition: all 0.3s ease;
 }

 /* Üzerine gelince (Hover) */
 .sponsor-card:hover {
     transform: translateY(-5px);
     /* Kutuyu yukarı kaldır */
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     /* Gölgeyi büyüt */

 }

 .sponsor-card:hover img {
     filter: grayscale(0%);
     /* Resmi renklendir */
     opacity: 1;
     transform: scale(1.05);
     /* Resmi çok hafif büyüt */
 }

 /* --- MOBİL İÇİN LOGO AYARLARI --- */

 /* Ekran genişliği 992px'den küçükse (Tablet ve Mobil Menü Modu) */
 @media (max-width: 991px) {
     .navbar-brand img {
         height: 50px !important;
         /* Yüksekliği 70px'den 50px'e düşür */
     }
 }

 /* Ekran genişliği 576px'den küçükse (Sadece Telefonlar) */
 @media (max-width: 576px) {
     .navbar-brand img {
         height: 35px !important;
         /* Telefonlarda daha da küçülsün */
         margin-right: 5px;
         /* İki logo arasındaki boşluğu da biraz kısalım */
     }

     /* Mobilde navbar markasının (logo alanı) paddingini ayarlayalım */
     .navbar-brand {
         padding-top: 5px;
         padding-bottom: 5px;
         margin-right: 0;
         /* Mobilde sağa itme sorunu olmasın */
     }
 }

 /* --- HERO MOBİL AYARLARI --- */
 @media (max-width: 768px) {

     /* 1. Ana Başlık (Kariyerini Kodla) */
     .hero-title {
         font-size: 2.2rem !important;
         /* 4rem'den 2.2'ye düşürdük */
         margin-bottom: 15px;
     }

     /* 2. Alt Başlık (Ege Kariyer Fuarı & ADÜ) */
     .hero-subtitle {
         font-size: 1rem !important;
         line-height: 1.4;
     }

     /* HTML içindeki 'fs-2' sınıfını mobilde küçültme */
     .hero-subtitle .fs-2 {
         font-size: 1.4rem !important;
         /* Normalde çok büyük, burada kıstık */
         display: inline-block;
         /* Alt çizgi daha düzgün dursun */
         margin-bottom: 5px;
     }

     /* 3. Tarih ve Konum Alanı */
     .hero-section p:last-child {
         font-size: 0.95rem;
         /* Biraz daha kibar olsun */
         margin-top: 15px;
     }

     /* İkonlar mobilde devasa kalmasın */
     .hero-section i {
         font-size: 0.9em;
     }
 }




 .page-header-banner {
     /* Resim Ayarları */
     background-image: url('/webfolders/1.jpg');
     /* Resmin yolunu gerekirse düzeltin örn: img/1.jpg */
     background-size: cover;
     /* Resmi kutuya sığdır */
     background-position: center;
     /* Resmi ortala */
     /*background-attachment: fixed;   /* PARALLAX EFEKTİ: Sayfa kayarken resim sabit durur (Çok şık durur) */

     position: relative;
     /* Overlay için gerekli */
     padding: 100px 0;
     /* Yüksekliği (genişliği) buradan artırıp azaltabilirsin */
     color: white !important;
     /* Yazı rengi beyaz */
     text-align: left;
     /* Yazıları ortala */
     overflow: hidden;
 }




 /* Başlık Stili */
 .page-title {
     position: relative;
     z-index: 2;
     /* Perdenin üstüne çıkar */
     font-size: 2.5rem;
     font-weight: 800;
     color: white !important;
     /*text-transform: uppercase;*/
     letter-spacing: 2px;
     margin: 0;
     display: inline-block;
     padding-bottom: 10px;
     /* border-bottom: 4px solid #e20613; /* ADÜ Kırmızı çizgi */
 }

 /* Alt Başlık Stili */
 .page-subtitle {
     position: relative;
     z-index: 2;
     font-size: 1.1rem;
     margin-top: 15px;
     font-weight: 300;
     opacity: 0.9;
 }

 /* Mobil Uyum */
 @media (max-width: 768px) {
     .page-header-banner {
         padding: 60px 0;
         /* Mobilde yüksekliği biraz kıs */
     }

     .page-title {
         font-size: 1.8rem;
     }
 }

 /* --- CUSTOM BREADCRUMB (MINIMAL) --- */
 .custom-breadcrumb {
     background-color: transparent !important;
     /* Arka planı yok et */
     padding: 0;
     margin-top: 20px;
     font-size: 0.95rem;
     letter-spacing: 0.5px;
 }

 /* Linkler (Anasayfa vb.) */
 .custom-breadcrumb .breadcrumb-item a {
     color: #CCC;
     text-decoration: none;
     transition: all 0.3s;
     font-weight: 500;
 }

 /* Hover (Üzerine gelince) */
 .custom-breadcrumb .breadcrumb-item a:hover {
     color: #333;
     /* Tam beyaz olsun */
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
     /* Hafif parlama */
 }

 /* Aktif Sayfa (Bulunduğumuz yer) */
 .custom-breadcrumb .breadcrumb-item.active {
     color: #fff !important;
     font-weight: 700;
     border-bottom: 2px solid var(--adu-red);
     /* Altına kırmızı çizgi */
     padding-bottom: 2px;
 }

 /* Araya giren ayraç (slash /) rengi */
 .breadcrumb-item+.breadcrumb-item::before {
     color: rgba(255, 255, 255, 0.5) !important;
     content: "›" !important;
     /* Slash yerine şık ok işareti */
     font-size: 1.1em;
     vertical-align: top;
 }


 /* --- DROPDOWN MENÜ ANİMASYONU (Sadece Bilgisayar İçin) --- */
 @media (min-width: 992px) {

     /* 1. Menünün Kapalı Hali (Ama aslında var) */
     .navbar .dropdown-menu {
         display: block;
         /* Bootstrap'ın 'yok etme' özelliğini eziyoruz */
         opacity: 0;
         /* Tamamen şeffaf */
         visibility: hidden;
         /* Tıklanamaz ve görünmez */
         transform: translateY(20px);
         /* Olduğu yerden 20px aşağıda dursun */
         transition: all 0.3s ease;
         /* 0.3 saniyede gerçekleşsin */
         border: none;
         /* Varsa kenarlığı kaldıralım, daha şık dursun */
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         /* Hafif gölge */
     }

     /* 2. Menünün Açık Hali (Show sınıfı gelince) */
     .navbar .dropdown-menu.show {
         opacity: 1;
         /* Tamamen görünür */
         visibility: visible;
         /* Görünür ve tıklanabilir */
         transform: translateY(0);
         /* Yerine (yukarı) kayarak otursun */
     }
 }

 /* Mobilde (Hamburger Menü) animasyonu kapatalım, karışıklık olmasın */
 @media (max-width: 991px) {
     .dropdown-menu {
         border: none;
         background: transparent;
         padding-left: 20px;
     }
 }

 .main-title {
     color:  #002855;
 }


 .video-wrapper {
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}

.custom-video {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5); /* Siyah şeffaf arka plan */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    pointer-events: none; /* Tıklamayı videoya iletir */
}

/* Üzerine gelince videoyu biraz büyüt ve butonu belirginleştir */
.video-wrapper:hover .custom-video {
    transform: scale(1.05);
}

.video-wrapper:hover .play-overlay {
    background: rgba(255, 0, 0, 0.8); /* Hoverda kırmızı veya markanızın rengi */
    transform: translate(-50%, -50%) scale(1.1);
}


/* Videoyu sütun (col) içine hapseden ve buton hizalayan stil */
    .video-wrapper {
        position: relative;
        width: 100%; /* Sütun genişliğine zorla */
        border-radius: 10px;
        overflow: hidden;
        background: #000;
        /*aspect-ratio: 16 / 9; /* Videoların hepsini aynı yükseklikte tutar */
    }

    .custom-video {
        width: 100% !important;  /* Sütundan taşmasını engeller */
        height: 100% !important; /* Wrapper'ı doldurur */
        object-fit: cover;       /* Görüntü bozulmadan alanı kaplar */
        display: block;
    }

    /* Orta kısımdaki Play Butonu */
    .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        pointer-events: none; /* Tıklamayı engellemez */
    }

    .play-overlay i {
        color: rgba(255, 255, 255, 0.8);
        font-size: 40px;
        text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    /* Hover efekti: Mouse ile gelince buton parlasın */
    .video-wrapper:hover .play-overlay i {
        color: #fff;
        transform: scale(1.1);
        transition: 0.3s;
    }


    /* Tasarım Özelleştirmeleri */
    .ege-countdown-container {
        font-family: 'Inter', sans-serif;
    }
    .cd-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .cd-val {
        font-size: 2rem;
        font-weight: 900;
        color: #fff;
        line-height: 1;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    }
    .cd-lab {
        font-size: 0.60rem;
        font-weight: 700;
        color: rgba(255,255,255,0.7);
        letter-spacing: 2px;
        margin-top: 10px;
    }
    .cd-sep {
        font-size: 2rem;
        color: rgba(255,255,255,0.3);
        font-weight: 200;
        margin-top: -30px;
    }

    @media (max-width: 768px) {
        .cd-val { font-size: 2.2rem; }
        .cd-sep { font-size: 1.5rem; margin-top: -15px; }
        .cd-item { min-width: 50px; }
    }

    .hkapak{

        background-size: cover;
    }

    /* --- Erişilebilirlik Widget Tasarımı --- */
.access-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    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; 
}