html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Slider resimlerini sabitleyen özel sınıf */
.slider-resim {
    height: 400px; /* Burayı istediğin yüksekliğe göre değiştirebilirsin */
    object-fit: cover; /* Resmin ezilmeden/uzamadan alanı kaplamasını sağlar */
    width: 100%; /* Genişlik her zaman tam ekran olur */
}

body {
    /* Arka plan resmi ayarı */
    background: url('/images/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Tüm içeriği kapsayan ana taşıyıcı */
.ana-cerceve {
    background-color: rgba(255, 255, 255, 0.95); /* İçeriğin arkası hafif şeffaf beyaz */
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ekranın %100 yüksekliğini kaplamaya zorlar */
}


main {
    flex: 1; /* Main alanına "bulduğun tüm boşluğu doldur" der, böylece footer'ı en alta iter */
}



/* Lacivert Üst Bant */
.ust-bant {
    background-color: #004d73;
    color: white;
    padding: 5px 0;
}

.ust-link {
    color: white !important;
    text-decoration: none;
    margin-right: 15px;
    font-size: 12px;
}

/* Hover Menü (Üzerine gelince açılan) */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Slider yazı alanı düzenlemesi */
.carousel-caption {
    text-align: left; /* Metni sola yaslar */
    left: 5%; /* Sol kenardan biraz boşluk */
    bottom: 5%; /* Alt kenardan biraz boşluk */
    right: auto; /* Sağ taraftaki varsayılan genişliği iptal eder */
    padding: 0;
    background: none !important; /* Arka planı tamamen kaldırır */
}

    /* Slider başlık ve yazı stili */
    .carousel-caption h3 {
        color: white;
        font-weight: bold;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* Okunabilirlik için hafif gölge */
        font-size: 2.5rem;
        margin-bottom: 2px;
    }

    .carousel-caption p {
        color: rgba(255, 255, 255, 0.9); /* Yazıyı hafif şeffaf beyaz yapar */
        font-size: 1.3rem;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
        margin-bottom: 1px;
    }


/* Slider oklarının arka planını özelleştirme */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Koyu frame (Siyah, %50 şeffaf) */
    background-size: 50% 50%; /* Okun kutu içindeki boyutu */
    border-radius: 5px; /* Köşeleri hafif yuvarlatır (Karemsi) */
    width: 45px; /* Çerçevenin genişliği */
    height: 45px; /* Çerçevenin yüksekliği */
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* İnce bir çerçeve hattı (isteğe bağlı) */
}

/* Mouse ile üzerine gelindiğinde kutu biraz daha koyulaşsın */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.8);
}


/* 1. Ana Menü Başlıklarının Rengi */
.navbar-nav .nav-link {
    color: #004d73 !important; /* İstediğin ana renk (Örn: Koyu Gri) */
    font-weight: 500; /* Yazıyı biraz kalınlaştırır */
    transition: all 0.3s ease; /* Renk geçişini yumuşatır */
    font-size: 14px;
    padding-top: 8px !important; /* Menü yüksekliğini korumak için dikey boşluk */
    padding-bottom: 8px !important;
}

    /* 2. Ana Menü Üzerine Gelince (Hover) Renk */
    .navbar-nav .nav-link:hover {
        color: #007bff !important; /* Üzerine gelince olacak renk (Örn: Mavi) */
        background-color: #f8f9fa; /* Hafif bir arka plan rengi (İsteğe bağlı) */
        border-radius: 6px; /* Arka planın köşelerini yumuşatır */

    }

/* 3. Açılır Menü (Dropdown) İçindeki Yazıların Rengi */
.dropdown-item {
    color: #444444;
    font-size: 14px !important; /* Alt menüleri bir tık daha küçük yaparak hiyerarşi kurabiliriz */
    padding: 5px 15px !important; /* Alt menü öğelerini daha derli toplu yapar */
}

    /* 4. Açılır Menü Üzerine Gelince Arka Plan ve Yazı Rengi */
    .dropdown-item:hover {
        background-color: #007bff; /* Hover arka plan rengi */
        color: #ffffff; /* Hover yazı rengi (Beyaz) */
    }

/* Aktif olan menü başlığı */
.navbar-nav .nav-link.active {
    color: #007bff !important;
    font-weight: bold;
    border-bottom: 2px solid #007bff; /* Altına ince bir çizgi ekler */
}

.btn-giris {
    background-color: #004d73; /* Butonun rengi */
    color: white !important; /* Yazı rengi */
    border: none;
    /* BOYUT AYARLARI */
    padding: 5px 20px; /* 10px üst-alt, 30px sağ-sol boşluk (Büyütmek için bunları artır) */
    font-size: 12px; /* Yazı büyüklüğü */
    /*font-weight: bold; /* Yazıyı kalın yapar */  
    border-radius: 5px;  /*Köşelerin yuvarlaklığı */

    display: inline-block;
    transition: all 0.3s ease;
}

    .btn-giris:hover {
        background-color: #0056b3; /* Üzerine gelince biraz koyulaşsın */
        color: white !important;
        transform: scale(1.05); /* Üzerine gelince çok hafif büyür (Hoş bir efekt) */
    }

/* 1. Yeni Slider Genel Düzeni */
.custom-multi-carousel .carousel-item {
    padding: 15px; /* Öğeler arası boşluk */
}

/* 2. Öğenin İç Yapısı (Resim solda, metin sağda) */
.slider-item-content {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    height: 100%; /* Kartların aynı boyda olması için */
    display: flex; /* İçeriği esnek kutu yapar */
    align-items: center; /* Dikeyde ortalar */
}

/* 3. Slider Resim Alanı */
.slider-img-container {
    flex: 0 0 40%; /* Resim alanını %40 genişlik yapar */
}

.slider-img {
    width: 100%;
    height: 250px; /* Resimlerin sabit yüksekliği */
    object-fit: cover; /* Ezilmeden kaplama */
}

/* 4. Slider Metin Alanı */
.slider-text-container {
    flex: 1; /* Kalan %60 genişliği alır */
    padding: 20px;
}

    .slider-text-container h3 {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 10px;
    }

    .slider-text-container p {
        font-size: 1rem;
        color: #666;
        margin-bottom: 0;
    }

/* 5. Okların Çerçeveleri (Hafif Koyu, Transparan) */
.custom-multi-carousel .carousel-control-prev-icon,
.custom-multi-carousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.4); /* Koyu frame (%40 şeffaf) */
    width: 50px;
    height: 50px;
    border-radius: 5px; /* Hafif yuvarlak kare */
    background-size: 50% 50%;
}

.custom-multi-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.custom-multi-carousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.7); /* Üzerine gelince koyulaşır */
}

/* Slider'ın sağından ve solundan oklar için yer açıyoruz */
.custom-multi-carousel {
    padding-left: 60px;
    padding-right: 60px;
}

    /* Okların yerleşimi ve boyutları */
    .custom-multi-carousel .carousel-control-prev,
    .custom-multi-carousel .carousel-control-next {
        width: 40px; /* Okların kapsama alanını daralttık */
        opacity: 1; /* Her zaman görünür olsunlar */
    }

    /* Okların konumunu dışarı itiyoruz */
    .custom-multi-carousel .carousel-control-prev {
        left: 0; /* En sola yasla */
    }

    .custom-multi-carousel .carousel-control-next {
        right: 0; /* En sağa yasla */
    }

    /* OK KUTUCUKLARINI KÜÇÜLTME */
    .custom-multi-carousel .carousel-control-prev-icon,
    .custom-multi-carousel .carousel-control-next-icon {
        width: 30px !important; /* Genişliği küçülttük */
        height: 30px !important; /* Yüksekliği küçülttük */
        background-size: 60% 60%; /* İçindeki ok simgesini orantıladık */
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
    }

/* İTEMLARIN BOYUTUNU KÜÇÜLTME */
/* Resim ve metin alanını daha zarif hale getirelim */
.slider-img {
    height: 90px !important; /* Resim yüksekliğini azalttık */
    padding-left:5px;
}

.slider-text-container h3 {
    font-size: 0.8rem !important; /* Başlığı küçülttük */
}

.slider-text-container p {
    font-size: 0.55rem !important; /* Metni küçülttük */
}

.slider-item-content {
    min-height: 100px; /* Tüm kutunun yüksekliğini sabitledik */
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
}


@media (max-width: 768px) {
    .custom-multi-carousel {
        padding: 0; /* Mobilde boşluğu kaldır */
    }

        .custom-multi-carousel .carousel-control-prev-icon,
        .custom-multi-carousel .carousel-control-next-icon {
            width: 25px !important;
            height: 25px !important;
        }
}


a {
    text-decoration: none !important;
}

/* Alt bant (Footer) linkleri için özel stil */
.footer-link,
.footer-link:link,
.footer-link:visited,
.footer-link:active {
    color: #004d73 !important; /* Buradan sabit rengi değiştirebilirsin (Örn: #ffffff beyaz yapar) */
    text-decoration: none !important; /* Alt çizgiyi tamamen kaldırır */
    /* FONT BOYUTU AYARI */
    font-size: 12px; /* Buradaki rakamı büyüterek veya küçülterek boyutu ayarlayabilirsin */
    font-weight: 400; /* Yazı kalınlığı (400 normal, 700 bold) */

    transition: color 0.3s ease; /* Hover anında renk geçişi yumuşak olsun */
}

    /* Üzerine gelince (Hover) rengin değişmesini istersen */
    .footer-link:hover {
        color: #007bff !important; /* Üzerine gelince mavi olur */
        text-decoration: none !important;
    }

footer {
    min-height: 20px; /* İstediğin yüksekliğe göre burayı küçültebilirsin */
    line-height: 20px; /* Yazıları dikeyde ortalamak için yükseklikle aynı yapabilirsin */
    padding: 0 !important; /* Tüm varsayılan boşlukları iptal eder */
}

    /* Footer içindeki yazıların altındaki gizli boşlukları (margin) siler */
    footer p, footer div {
        margin-bottom: 0 !important;
    }

.cookie-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 31, 63, 0.95); /* Üst bant ile uyumlu lacivert */
    color: white;
    padding: 15px 0;
    z-index: 9999; /* Her şeyin en üstünde görünmesi için */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    font-size: 14px;
}

.cookie-text {
    margin-right: 20px;
}

/* Mobilde butonların alt alta binmemesi için */
@media (max-width: 768px) {
    .cookie-container {
        text-align: center;
    }

    .cookie-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}


/* Dikey Menü Genel Kutusu */
.dikey-menu-cerceve {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

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

    /* Menü Maddeleri */
    .dikey-menu li {
        border-bottom: 1px solid #f1f1f1;
        position: relative; /* İşareti konumlandırmak için şart */
    }

        .dikey-menu li:last-child {
            border-bottom: none;
        }

        /* Linklerin Görünümü ve Padding Ayarı */
        .dikey-menu li a {
            display: block;
            padding: 12px 20px; /* Maddeler arası boşluğu buradan ayarla */
            color: #444; /* Varsayılan yazı rengi */
            text-decoration: none;
            font-size: 12px; /* Font büyüklüğü */
            transition: all 0.3s ease;
        }

            /* HOVER ÖZELLİĞİ */
            .dikey-menu li a:hover {
                background-color: #f8f9fa;
                color: #007bff; /* Üzerine gelince yazı rengi */
                padding-left: 25px; /* Hafif sağa kayma efekti */
            }

/* AKTİF MADDE İŞARETİ (İnce Hücre Efekti) */
.aktif-isaret {
    display: none; /* Normalde gizli */
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px; /* İstediğin o ince hücrenin genişliği */
    background-color: #007bff; /* İşaretin rengi */
}

/* Madde Aktifken Görünecek Stil */
.dikey-menu li.active {
    background-color: #e7f1ff; /* Aktif satırın arka planı */
}

    .dikey-menu li.active .aktif-isaret {
        display: block; /* Sadece aktif maddede göster */
    }

    .dikey-menu li.active a {
        color: #007bff;
        font-weight: bold;
    }







/* Sağ taraftaki ana içerik kutusunun genel font ayarları */
.sayfa-icerik {
    font-size: 12px; /* Genel metin boyutu (Varsayılan 16px) */
    line-height: 1.6; /* Satır aralığı (Okunabilirlik için 1.6 idealdir) */
    color: #333; /* Genel yazı rengi */
}

    /* Sayfa başlığının (h2) boyutunu ayarlama */
    .sayfa-icerik h2 {
        font-size: 15px !important; /* Başlık boyutunu buradan büyütebilirsin */
        font-weight: 700; /* Kalınlık ayarı */
        color: #001f3f; /* Başlık rengi (Lacivert) */
        margin-bottom: 20px;
    }

    /* Paragrafların (p) boyutunu ayarlama */
    .sayfa-icerik p {
        font-size: 13px; /* Sadece paragrafları biraz daha büyük yapmak istersen */
        margin-bottom: 15px;
    }

    /* Eğer içerikte liste (ul-li) kullanırsan onları da buradan yönetebilirsin */
    .sayfa-icerik li {
        font-size: 16px;
        margin-bottom: 8px;
    }