style.css

body {
    margin: 0; /* Kenar boşluklarını sıfırlar */
    padding: 0;
    overflow-x: hidden;
    /*font-family: Arial, sans-serif; /* Yazı tipi */
    background-image: url('/Resimler/arkaPlanResmi.jpg'); /* Arka plan resmi */
    background-size: cover; /* Resmi tam sayfaya uyarlar */
    background-position: center; /* Resmi merkeze hizalar */
    background-repeat: no-repeat; /* Resmin tekrar etmesini engeller */
    background-attachment: fixed; /* Resmi sabit yapar */
}
.amblem {
    display: flex; /* Flexbox düzeni */
    align-items: center; /* Dikey hizalama */
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
    font-family: "Source Sans Pro", Sans-serif; 
    text-align: left;
}
.amblem img {
    margin-right: 10px;     /* Yazı ile resim arasındaki boşluk */
    text-align: right;
}
.bilgiler {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
    padding: 0px 15px 0px 15px;
    gap: 20px; 
    font-family: "Source Sans Pro", Sans-serif; 
    
}
.blgler{
    transition: color 0.5s ease; /* Renk değişiminde yumuşak geçiş efekti */
    text-decoration: none; /* Alt çizgiyi kaldır */
    color: inherit; /* Yazı rengini normal bırak */
}
.blgler:visited {
    color: inherit; /* Ziyaret edilmiş linkler için renk sıfırlanır */
    text-decoration: none; /* Alt çizgi kaldırılır */
}
.blgler:hover {
    color: #C3A800; /* Mouse üzerine gelince yazı rengi */
    text-decoration: none; /* Alt çizgi kaldırılır */
 }
 
.icon {
    display: flex;
}
img {
    color: white;
}
.iconlar{
    display: flex;
    gap: 40px;
}
.üst_bilgiler{
    display: flex; /* Flex düzeni etkinleştirir */
    justify-content: space-between; /* Elemanları kenarlara yayar */
    align-items: center; /* Dikeyde ortalama */
    padding: 0 200px 0 50px; /* Sağ ve soldan 50px iç boşluk */
    height: 100px; /* Yükseklik */
    color: white; /* Yazı rengi */
    position: fixed; /* Div'i sabitler */
    z-index: 10; /* Üst divin üstte kalması için yüksek z-index */
    width: 100%; /* Genişliği sayfa genişliği yapar */
   /*background-color: #0B1526; /* Arka plan rengi */
    box-sizing: border-box; /* Padding'in genişliğe dahil edilmesini sağlar */    
}
.üst_bilgiler.scrolled {
    background-color: #0B1526; /* Kaydırıldığında arka plan rengi */
}
.üst_resim {
    width: 100%;
    height: 900px; 
    background-size: cover; /* Resmin tamamını kapsar */
    background-position: center; /* Ortalar */
    background-repeat: no-repeat; /* Resmin tekrarlanmamasını sağlar */
    text-align: center;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%), url(/Resimler/Ebyu_Resim.png);
}


.resimAltıDiv{
    width: 100%;
    height: 53px;
    background: repeating-linear-gradient(
        45deg, /* Çizgilerin açısı */
        #0A0E2B, /* İlk renk */
        #0A0E2B 10px, /* İlk rengin son noktası */
        #1A1F3C 10px, /* İkinci rengin başlangıcı */
        #1A1F3C 20px /* İkinci rengin son noktası */
    ); 
}
.kare_bilgiler{
    display: flex;
    justify-content: center; 
    padding: 10px;
}
.kareler {
    width: 118px; 
    height: 98px; 
    margin: 11px;
    background-color: #0A0E2B;
    border-radius: 6px;
    display: flex; /* Flex düzeni */
    flex-direction: column; /* Elemanları dikey hizala */
    align-items: center; /* Ortada hizala */
    justify-content: center; 
    text-align: center; /* Yazıyı ortala */
    position: relative; /* H4'ü konumlandırmak için gerekli */
    z-index: 1; /* Üst divin arkasında kalacak şekilde z-index */
    transition: transform 0.2s ease, color 0.2s ease; /* Geçiş animasyonu */
}
.bilgiIcon{
    margin-bottom: 15px; 
    transition: transform 0.2s ease, filter 0.2s ease; /* İkon geçiş animasyonu */
}
.bilgiYazi{
    margin: 0;
    width: 130px;
    position: absolute;
    bottom: 11px;
    left: 50%;
    transform: translateX(-50%); 
    font-size: 10px;
    color: white;
    font-family: "Fira Sans Extra Condensed", Sans-serif;
    transition: color 0.2s; /* Renk değişimi geçiş efekti */
}
/* Hover (üstüne gelince) */
.kareler:hover .bilgiIcon {
    transform: scale(1.2); /* Biraz büyütme */
    filter: brightness(0) saturate(100%) invert(73%) sepia(92%) saturate(1639%) hue-rotate(0deg) brightness(105%) contrast(101%); /* #C3A800 rengi */
    animation: shake 0.3s infinite; /* Titreme animasyonu */
  }
  .kareler:hover .bilgiYazi {
    color: #C3A800; /* Yazının rengi sarıya döner */
  }
  
  /* Titreme animasyonu */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
  }
.duyuru_div, .etkinlik_div {
    display: flex;
    justify-content: center;
    padding: 20px;
    height: 200px;
}
.duyuru_çizgi, .etkinlik_çizgi{
    background: repeating-linear-gradient(
        45deg, /* Çizgilerin açısı */
        #0A0E2B, /* İlk renk */
        #0A0E2B 10px, /* İlk rengin son noktası */
        #1A1F3C 10px, /* İkinci rengin başlangıcı */
        #1A1F3C 20px /* İkinci rengin son noktası */
    ); 
    /*background-color: #0A0E2B; */
    width: 1350px;
    height: 37px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.duyuru_baslik, .etkinlik_baslik {
    margin: 0;
    font-size: 17px; /* Başlık boyutu */
    font-family: "Didact Gothic", sans-serif;
    font-weight: normal;
    color: white; /* Yazı rengi */
}
.duyuru_baslik a {
    text-decoration: none; /* Alt çizgi kaldırılır */
    color: inherit; /* Yazı rengi devralınır */
    transition: color 0.3s ease; /* Renk değişim animasyonu */
}
.haberler_div, .tv_div {
    display: flex;
    justify-content: center;
    padding: 20px;
    height: 550px;
}
.haberler_çizgi, .tv_çizgi{
    background: repeating-linear-gradient(
        45deg, /* Çizgilerin açısı */
        #0A0E2B, /* İlk renk */
        #0A0E2B 10px, /* İlk rengin son noktası */
        #1A1F3C 10px, /* İkinci rengin başlangıcı */
        #1A1F3C 20px /* İkinci rengin son noktası */
    ); 
    /*background-color: #0A0E2B; */
    width: 1350px;
    height: 37px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.haberler_baslik, .tv_baslik {
    margin: 0;
    font-size: 17px; /* Başlık boyutu */
    font-family: "Didact Gothic", sans-serif;
    font-weight: normal;
    color: white; /* Yazı rengi */
}
.haberler_baslik a {
    text-decoration: none; /* Alt çizgi kaldırılır */
    color: inherit; /* Yazı rengi devralınır */
    transition: color 0.3s ease; /* Renk değişim animasyonu */
}
.duyuru-divider {
    display: block;
    width: 1390px;             /* Genişlik 1290px olarak ayarlandı */
    height: 6px;               /* Çizginin kalınlığı 6px */
    background-color: #0A0E2B;    /* Üstte belirttiğiniz renk (örnek olarak koyu gri) */
    margin: 10px auto;         /* Üst ve alt boşluk 20px, yatayda ortalama */
}
.okul_bilgi{
    display: flex;
    justify-content: center;
    padding: 20px;
    height: 110px;
}
.okul_bilgiler{
    display: flex;
    justify-content: center; 
    gap: 40px;
}
.sayi_bilgi {
    width: 118px; 
    height: 98px; 
    display: flex; /* Flex düzeni */
    flex-direction: column; /* Elemanları dikey hizala */
    align-items: center; /* Ortada hizala */
    justify-content: center; 
    text-align: center; /* Yazıyı ortala */
    position: relative; /* H4'ü konumlandırmak için gerekli */
}
.sayilar {
    font-size: 25px; /* Sayıların boyutu */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: black; /* Yazı rengi */
    font-weight: bold; 
}
.isim_bilgi{
    font-size: 12px;
    font-family: Helvetica, sans-serif;
    color: #000000;
    margin: 0;
}
.alt_kareler{
    height: 115px;
    display: flex;
    justify-content: center; 
    padding: 10px;
}
.alt_kare{
    width: 142px; 
    height: 112px; 
    margin: 6px;
    border-radius: 6px;
    border-width: 1px;      /* Çizginin kalınlığı */
    border-style: dashed;   /* Çizgi tipi (kesikli) */
    border-color: #0A0E2B;     /* Çizginin rengi */
    display: flex; /* Flex düzeni */
    flex-direction: column; /* Elemanları dikey hizala */
    align-items: center; /* Ortada hizala */
    justify-content: center; 
    text-align: center; /* Yazıyı ortala */
    position: relative; /* H4'ü konumlandırmak için gerekli */
    transition: transform 0.2s ease, color 0.2s ease; /* Geçiş animasyonu */
    transition: background-color 0.3s ease; /* Geçiş süresi ve tipi */
}
.alt_icon{
    margin-bottom: 15px; 
    transition: transform 0.2s ease, filter 0.2s ease; /* İkon geçiş animasyonu */
}
.alt_yazi{
    width: 132px;
    margin: 0;
    position: absolute;
    bottom: 11px;
    left: 50%;
    transform: translateX(-50%); 
    font-size: 12px;
    color: black;
    font-family: "Fira Sans Extra Condensed", Sans-serif;
    transition: color 0.2s; /* Renk değişimi geçiş efekti */
}
/* Hover (üstüne gelince) */
.alt_kare:hover .alt_icon {
    transform: scale(1.2); /* Biraz büyütme */
    filter: brightness(0) saturate(100%) invert(73%) sepia(92%) saturate(1639%) hue-rotate(0deg) brightness(105%) contrast(101%); /* #C3A800 rengi */
    animation: shake 0.3s infinite; /* Titreme animasyonu */
  }
  .alt_kare:hover .alt_yazi {
    color: #C3A800; /* Yazının rengi sarıya döner */
  }
  .alt_kare:hover {
    background-color: #0A0E2B;
  }
  
  /* Titreme animasyonu */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
  }
.alt_kareler2{
    height: 115px;
    display: flex;
    justify-content: center; 
    padding: 10px;
}