

<style>

/* Sayfanın genel stilini düzenlemek için kullanılır. Roboto fontunu sayfaya dahil eder ve temel body stillerini tanımlar. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: #fff;
    color: #151e43;
}

/* Tüm h3 başlıklarının stilini belirlemek için kullanılır. Başlıkların rengini ve kalınlığını tanımlar. */
h3 {
    margin: 0;
    font-weight: 700;
    color: #f79433;
}

/* Hızlı bağlantılar bölümünün ana kapsayıcısını biçimlendirmek için kullanılır. Boşlukları düzenler. */
.speed-links-section {
    padding: 01px 0;
}

/* Hızlı bağlantılar menüsünün genel yapısını oluşturmak için kullanılır. Esnek bir düzen sağlar. */
.speed-links-section .ca-menu {
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Hızlı bağlantılar menüsündeki liste öğelerinin görünümünü düzenlemek için kullanılır. Boyut ve stil tanımlar. */
.speed-links-section .ca-menu li {
    width: 90px;
    height: 120px;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    background: #ffffff;
    margin: 10px;
    border: 3px double #dddddd;
    transition: all 300ms linear;
}

/* Hızlı bağlantı ikonlarının stilini belirlemek için kullanılır. Renk ve konum ayarları yapar. */
.speed-links-section .ca-menu li a .ca-icon {
    color: #f79433;
    font-size: 40px;
    line-height: 45px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    top: 5px;
    text-align: center;
    transition: all 200ms linear;
}

/* Hızlı bağlantı içeriğinin (metin) konumunu ve yapısını ayarlamak için kullanılır. */
.speed-links-section .ca-menu li a .ca-content {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    top: 50%;
}

/* Hızlı bağlantı içeriğindeki ana metnin stilini tanımlamak için kullanılır. Yazı tipi ve opaklık ayarlar. */
.speed-links-section .ca-menu li a .ca-content .ca-main {
    font-size: 12px;
    color: #404040;
    opacity: 0.8;
    text-align: center;
    transition: all 200ms linear;
}

/* Hızlı bağlantı liste öğesine fareyle gelindiğinde arka plan rengini değiştirmek için kullanılır. Görsel geri bildirim sağlar. */
.speed-links-section .ca-menu li:hover {
    background-color: #dddddd;
}

/* Hızlı bağlantı ikonuna hover efekti eklemek için kullanılır. Gölge ve animasyonla dikkat çeker. */
.speed-links-section .ca-menu li:hover .ca-icon {
    text-shadow: 0 0 20px #f79433;
    color: transparent;
    animation: moveFromTop 400ms ease;
}

/* Hızlı bağlantı ana metnine hover efekti eklemek için kullanılır. Renk ve animasyonla dinamizm katar. */
.speed-links-section .ca-menu li:hover .ca-main {
    color: #404040;
    animation: moveFromTop 300ms ease;
}

/* Hızlı menü resimli bölümünün ana kapsayıcısını düzenlemek için kullanılır. Esnek bir düzen oluşturur. */
.speed-links-section .quick-menu-img {
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Hızlı menü resimli bölümündeki liste öğelerinin stilini belirlemek için kullanılır. Boyut ve gölge tanımlar. */
.speed-links-section .quick-menu-img li {
    width: 178px;
    height: 178px;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 0 2px #dddddd;
    margin: 10px;
    border: 3px double #404040;
    transition: all 300ms linear;
}

/* Hızlı menü resimli bölümündeki ikonların stilini ayarlamak için kullanılır. Renk ve gölge efekti ekler. */
.speed-links-section .quick-menu-img li a .ca-icon {
    color: #ffffff;
    font-size: 40px;
    text-shadow: 1px 0 1px #808080;
    line-height: 75px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    text-align: center;
    transition: all 200ms linear;
}

/* Hızlı menü resimli bölümündeki içeriğin yapısını düzenlemek için kullanılır. Metin hizasını ve boşlukları ayarlar. */
.speed-links-section .quick-menu-img li a .ca-content {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    flex-direction: column-reverse;
    padding: 10px 0;
}

/* Hızlı menü resimli bölümündeki ana metnin stilini tanımlamak için kullanılır. Renk ve gölge ile okunabilirliği artırır. */
.speed-links-section .quick-menu-img li a .ca-content .ca-main {
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    transition: all 200ms linear;
    text-shadow: 0 0 1px #000;
    background: #6E0E1B;
    padding: 5px 0;
}

/* Hızlı menü resimli bölümündeki resimlerin stilini belirlemek için kullanılır. Gri ton filtresi uygular. */
.speed-links-section .quick-menu-img li a img {
    width: 178px;
    height: 178px;
    filter: grayscale(1);
}

/* Hızlı menü resimli liste öğesine hover efekti eklemek için kullanılır. Arka plan rengini koyulaştırır. */
.speed-links-section .quick-menu-img li:hover {
    background-color: #101010;
}

/* Hızlı menü ikonuna hover efekti eklemek için kullanılır. Gölge ve animasyonla dikkat çeker. */
.speed-links-section .quick-menu-img li:hover .ca-icon {
    text-shadow: 0 0 20px #f79433;
    color: transparent;
    animation: moveFromTop 400ms ease;
}

/* Hızlı menü ana metnine hover efekti eklemek için kullanılır. Renk değişimi ve animasyon sağlar. */
.speed-links-section .quick-menu-img li:hover .ca-main {
    color: #000;
    animation: moveFromTop 300ms ease;
}

/* Hızlı menü resmine hover efekti eklemek için kullanılır. Gri ton filtresini kaldırarak orijinal rengi gösterir. */
.speed-links-section .quick-menu-img li:hover img {
    filter: unset;
}

/* Yukarıdan kayma animasyonunu tanımlamak için kullanılır. Hover efektlerinde dinamik geçiş sağlar. */
@keyframes moveFromTop {
    from {
        transform: translateY(-300%);
    }
    to {
        transform: translateY(0%);
    }
}

/* Aşağıdan kayma animasyonunu tanımlamak için kullanılır. İçerik geçişlerinde kullanılır. */
@keyframes moveFromBottom {
    from {
        transform: translateY(200%);
    }
    to {
        transform: translateY(0%);
    }
}

/* ******HABERLER***** */



/* Üstteki yatay haberler bölümünün ana kapsayıcısını biçimlendirmek için kullanılır. Arka plan ve boşlukları düzenler. */
.news-section {
    padding: 20px;
    margin-bottom: 30px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

/* Haberler başlığını ve linkini içeren header alanını düzenlemek için kullanılır. Esnek bir hizalama sağlar. */
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #151e43;
    padding-bottom: 5px;
}

/* Haberler başlığının stilini belirlemek için kullanılır. Boyut ve renk ayarları yapar. */
.news-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #f79433;
}

/* "Tüm Haberler" gibi linklerin stilini tanımlamak için kullanılır. Renk ve kalınlık ayarlar. */
.view-all {
    font-size: 18px;
    color: #151e43;
    text-decoration: none;
    font-weight: bold;
}

/* "Tüm Haberler" linkine hover efekti eklemek için kullanılır. Alt çizgi ile görsel geri bildirim sağlar. */
.view-all:hover {
    text-decoration: underline;
}

/* Haberlerin yatay kaydırma alanını düzenlemek için kullanılır. Taşmayı engeller ve tek satır görünüm sağlar. */
.news-scroll-container {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
}

/* Haber listesinin genel yapısını oluşturmak için kullanılır. Yatay esnek bir düzen sağlar. */
.news-list {
    display: inline-flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Her bir haber öğesinin stilini belirlemek için kullanılır. Sabit genişlik ve kenarlık tanımlar. */
.news-item {
    flex: 0 0 auto;
    width: 260px;
    margin-right: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
}

/* Haber linkinin yapısını ve stilini düzenlemek için kullanılır. Dikey esnek düzen sağlar. */
.news-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    height: 100%;
}

/* Haber resminin stilini tanımlamak için kullanılır. Boyut ve kenar yuvarlama ayarlar. */
.news-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

/* Haber metin alanının stilini düzenlemek için kullanılır. Boşluk ve hizalamayı tanımlar. */
.news-text {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    white-space: normal;
    word-wrap: break-word;
    color: #151e43;
    font-weight: bold;
}

/* Haber başlığı ve paragrafının stilini belirlemek için kullanılır. Yazı tipi ve renk ayarlar. */
.news-text h2,
.news-text p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #151e43;
}

/* Haber tarihinin stilini tanımlamak için kullanılır. Renk ve boyut ile dikkat çeker. */
.news-text .post-date {
    font-size: 13px;
    color: #f79433;
    font-weight: 600;
}

/* Haber linkine hover efekti eklemek için kullanılır. Arka plan rengini hafif değiştirir. */
.news-link:hover {
    background: #f9f9f9;
}

/* Haber kaydırıcısının ana yapısını düzenlemek için kullanılır. Göreceli konumlandırma sağlar. */
.news-slider {
    position: relative;
}

/* Kaydırıcı oklarının stilini belirlemek için kullanılır. Görünüm ve konum ayarları yapar. */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
}

/* Sol okun pozisyonunu belirlemek için kullanılır. Kaydırıcıda sola hizalama yapar. */
.arrow.left {
    left: 10px;
}

/* Sağ okun pozisyonunu belirlemek için kullanılır. Kaydırıcıda sağa hizalama yapar. */
.arrow.right {
    right: 10px;
}

/* Kaydırıcı noktalarının genel alanını düzenlemek için kullanılır. Ortalanmış bir görünüm sağlar. */
.news-dots {
    text-align: center;
    margin-top: 10px;
}

/* Her bir noktanın stilini tanımlamak için kullanılır. Yuvarlak ve gri bir görünüm verir. */

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/* Aktif noktanın stilini belirlemek için kullanılır. Seçili durumu koyu renk ile vurgular. */

.dot.active {
    background: #f79433;
}

/* Duyurular ve etkinlikler bölümünün ana kapsayıcısını düzenlemek için kullanılır. Esnek bir düzen sağlar. */

.content-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 20px;
}

/* Her bir içerik kutusunun stilini tanımlamak için kullanılır. Gölge ve arka plan ile dikkat çeker. */

.content-box {
    flex: 1;
    min-width: 300px;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    color: #333;
    position: relative;
}

/* İçerik kutusundaki başlığın stilini belirlemek için kullanılır. Alt çizgi ve renk ekler. */

.content-box h3 {
    font-size: 24px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #151e43;
    color: #f79433;
}

/* "Tüm Duyurular" gibi linklerin stilini tanımlamak için kullanılır. Konum ve renk ayarlar. */

.content-box .view-all {
    font-size: 18px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* "Tüm Duyurular" linkine hover efekti eklemek için kullanılır. Alt çizgi ile görsel geri bildirim sağlar. */

.content-box .view-all:hover {
    text-decoration: underline;
}

/* İçerik listesinin genel yapısını düzenlemek için kullanılır. Varsayılan liste stilini kaldırır. */

.content-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Her bir liste öğesinin stilini belirlemek için kullanılır. Hizalama ve kenarlık ayarlar. */

.content-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #151e43;
}

/* Liste öğesindeki linkin stilini tanımlamak için kullanılır. Renk geçiş efekti ekler. */

.content-list li a {
    text-decoration: none;
    color: #151e43;
    transition: color 0.3s;
}

/* Liste öğesindeki linke hover efekti eklemek için kullanılır. Renk değişimi ile dikkat çeker. */

.content-list li a:hover {
    color: #151e43;
}

/* Tarih alanının stilini belirlemek için kullanılır. Renk ve hizalamayı tanımlar. */

.post-date {
    min-width: 80px;
    font-size: 14px;
    color: #f79433;
    font-weight: 600;
    text-align: left;
    opacity: 0.7; /* Yazının soluk görünmesini sağlar */

}

/* Duyurular kutusunun genişlik oranını ayarlamak için kullanılır. Flex düzeni ile boyutlandırır. */

.announcements {
    flex: 0.6;
}

/* Etkinlikler kutusunun genişlik oranını ayarlamak için kullanılır. Flex düzeni ile boyutlandırır. */

.events {
    flex: 0.4;
}

/* Slider bölümünün ana kapsayıcısını düzenlemek için kullanılır. Taşma ve arka plan ayarları yapar. */

.container.slider-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: #f9f9f9;
    padding: 10px 0;
    border-radius: 15px;
}

/* Slider wrapper'ının yapısını düzenlemek için kullanılır. İçerik hizalaması sağlar. */

.slider-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

/* Slider alanının stilini tanımlamak için kullanılır. Esnek düzen ve geçiş efekti ekler. */

.slider {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease-in-out;
}

/* Her bir slider kutusunun stilini belirlemek için kullanılır. Boyut ve kenarlık ayarlar. */

.box {
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    background: white;
    padding: 5px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

/* Slider kutusuna hover efekti eklemek için kullanılır. Büyütme animasyonu ile dikkat çeker. */

.box:hover {
    transform: scale(1.05);
}

/* Slider kutusundaki resimlerin stilini tanımlamak için kullanılır. Maksimum boyutları sınırlar. */

.box img {
    max-width: 100%;
    max-height: 100%;
}

/* Slider oklarının stilini belirlemek için kullanılır. Konum ve görünüm ayarları yapar. */

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

/* Oklara hover efekti eklemek için kullanılır. Arka planı koyulaştırarak görsel geri bildirim sağlar. */

.arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Sol okun pozisyonunu belirlemek için kullanılır. Sliderda sola hizalama yapar. */

.arrow-left {
    left: 0;
}

/* Sağ okun pozisyonunu belirlemek için kullanılır. Sliderda sağa hizalama yapar. */

.arrow-right {
    right: 0;
}

/* Navigasyon bölümünün ana kapsayıcısını düzenlemek için kullanılır. Arka plan ve gölge ekler. */

.nav-container {
    font-family: 'PT Sans', sans-serif;
    background: #f8f9fa;
    padding: 01px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Navigasyon link kutularının stilini tanımlamak için kullanılır. Görünüm ve geçiş efekti ayarlar. */

.nav-link-box {
    text-align: center;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    font-weight: 600;
    font-size: 14px;
    color: #1F3A93;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: white;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
}

/* Navigasyon link kutusuna hover efekti eklemek için kullanılır. Renk değişimi ve büyütme ile dikkat çeker. */

.nav-link-box:hover {
    background: #1F3A93;
    color: white !important;
    transform: scale(1.05);
}

/* Navigasyon link kutusundaki linkin stilini belirlemek için kullanılır. Renk ve dekorasyonu düzenler. */

.nav-link-box a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* HR içindeki resimlerin stilini tanımlamak için kullanılır. Tam genişlik sağlar. */

.hr img {
    width: 100%;
}

/* Butonlar bölümünde hover efekti tanımlamak için kullanılır. Gölge ile derinlik katar. */

.butonlar .col-10:hover {
    background: #FFF;
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.3);
}

</style>
