/* ---------- Genel ve Reset Ayarları ---------- */
html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #F8F8F8;
}

* {
    box-sizing: border-box;
}

/* YENİ EKLENEN KAPSAYICI */
.body-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ---------- Masaüstü Grid Sistemi (Bootstrap 2 float'ları) ---------- */
/* Bu kurallar, bs.css'in yüklenmemesi durumuna karşı güvencedir */
.row-fluid {
  margin-left: -2.127659574468085%;
}
.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}
.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  float: left;
  margin-left: 2.127659574468085%;
}

.row-fluid .span12 { width: 100%; }
.row-fluid .span7 { width: 57.44680851063829%; }
.row-fluid .span5 { width: 40.42553191489362%; }
/* Diğer span'lar (gerekirse eklenebilir) */

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}
/* ---------- --------------------------------- ---------- */

/* ---------- Ana Konteyner ve İçerik ---------- */
.genel {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
}

.orta {
    padding-top: 10px;
    padding-bottom: 10px;
}

h2, h3 {
    padding: 0px;
    margin: 0px;
    line-height: 18px;
}

h4 {
    padding: 0px;
    margin: 0px;
    color: #999999;
}

.ortala {
    text-align: center;
    padding: 10px 0px 10px 0px;
}

.ortala a {
    color: #333333;
}

/* ---------- Profil ve Menü ---------- */
.me {
    background-position: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 85px;
    background-image: url('./img/me.png');
    background-repeat: no-repeat;
}

.beyaz {
    background-color: #FFFFFF;
    padding: 20px;
    border-bottom: 1px solid #EBEBEB;
    box-shadow: 1px 1px 3px #eee;
    width: 100%;
    border-radius: 5px;
}

.sonmenu {
    padding: 0px;
    width: auto;
    margin: 16px 0px 0px 0px;
    float: right;
}

.sonmenu li {
    list-style-type: none;
    padding: 0 10px;
    float: left;
    text-align: center;
}

.sonmenu li a {
    color: #333333;
}

/* ---------- Responsive Ayarlar ---------- */
@media (max-width: 1000px) {
    
.body-wrapper {
        align-items: flex-start; /* Mobil için üste hizala */
    }

    /* YENİ: Mobilde float'ları sıfırla */
    .row-fluid [class*="span"] {
        width: 100% !important; /* Tam genişlik */
        margin-left: 0 !important; /* Sol boşluğu sıfırla */
        float: none !important; /* Float'ı kaldır */
        margin-bottom: 25px; /* Alt alta gelince boşluk */
    }
    .row-fluid [class*="span"]:last-child {
        margin-bottom: 0;
    }

    .span5, .span7, .span12 {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }
    
    div.me {
        text-align: center;
        background-position: center top;
        padding-top: 180px;
        padding-left: 0;
        background-image: url('./img/res-profile-photo.png');
    }

.sonmenu {
    float: none;
    width: 100%;
    text-align: center;
    margin: 20px 0 0 0; /* Üstten biraz boşluk bırakalım */
    padding: 0;
    display: flex; /* Flexbox'ı aktive edelim */
    flex-direction: column; /* Elemanları dikey sıralayalım */
    gap: 10px; /* Her menü elemanı arasına 10px boşluk koyalım */
}

.sonmenu li {
    float: none;
    display: block; /* inline-block yerine block kullanalım */
    padding: 0; /* İç padding'i sıfırlayıp linke verelim */
    width: 100%; /* Liste elemanı tam genişliği kapsasın */
}

/* Her bir menü linkine buton stili verelim */
.sonmenu li a {
    display: block; /* Linkin tüm alanı tıklanabilir olsun */
    padding: 15px 10px; /* İç boşluklar */
    background-color: #f5f5f5; /* Hafif bir arka plan rengi */
    border-radius: 5px; /* Köşeleri yuvarlatalım */
    text-decoration: none;
    transition: all 0.2s ease-in-out; /* Yumuşak geçiş efekti */
}

/* Linkin üzerine gelince (hover) efekti */
.sonmenu li a:hover {
    background-color: #e9e9e9;
    transform: scale(1.02); /* Hafifçe büyüme efekti */
}

/* ---------- DÜZELTME 4: Hizalama ve Mobil Kırılma Sorunu (Tam Çözüm) ---------- */

/* MASAÜSTÜ: 
   Cufon'un 'inline' yaptığı h2/h4'ü tekrar 'block' (dikey) hale getirir.
   Bu kural masaüstü görünümünü düzeltir.
*/
.me h2,
.me h4 {
    display: block !important;
    width: 100%;
    margin-bottom: 5px; /* Başlıklar arasına boşluk */
}

/* MOBİL: 1000px altında... */
@media (max-width: 1000px) {
    
    /* KELİME KIRILMASINI ENGELLEYEN KURAL:
       h2 ve h4 etiketlerine, içindeki kelimelerin (cufon elementlerinin)
       alt satıra kaymasını engellemesini (nowrap) söylüyoruz.
    */
    .me h2,
    .me h4 {
        white-space: nowrap !important; 
    }
}

/* ---------- DÜZELTME 6: Admin Çubuğu Kaydırma Çubuğu (Scroll Bar) Sorunu ---------- */

/* WordPress, giriş yapıldığında <body> etiketine 'admin-bar' class'ı ekler.
  Bu class'ı gördüğümüzde, sayfa yüksekliğini admin çubuğu (32px) kadar kısaltıyoruz.
*/
body.admin-bar .body-wrapper {
    min-height: calc(100vh - 32px);
}

/* Admin çubuğu mobilde (782px altı) 46px yüksekliktedir. 
  Bu durumu da hesaba katıyoruz.
*/
@media screen and (max-width: 782px) {
  body.admin-bar .body-wrapper {
      min-height: calc(100vh - 46px);
  }
}