/*
 * GENEL STİLLER (Esnek ve Masaüstü Odaklı)
 */
* {
    /* Padding ve border'ın genişliğe dahil olmasını sağlar, responsive tasarım için kritik */
    box-sizing: border-box;
}

body{
    background-image:url('http://i.imgur.com/uDuPEZd.jpg');
    letter-spacing:1px;
    text-align:justify;
    font-size:13px;
    line-height:20px;
    font-family: 'Mate', serif;
    margin:0 auto;
    border-top:6px solid #dac33b;
}

p{
    text-indent:26px;
}

h1{
    font-family: 'Lustria', serif;
    margin-bottom:4px;
    text-align:right;
    font-weight:normal;
    letter-spacing:2px;
    border-left:16px #dac33b solid;
}

h2{
    font-family: 'Lustria', serif;
    border-top:1px gray dotted;
    margin-top:4px;
    font-weight:normal;
    letter-spacing:2px;
    font-size:11px;
}

a{
    color:#000;
    text-decoration:none;
}

a:hover{
    color:#fff;
    background:#dac33b;
}

#linkboxbox a{
    margin-bottom:4px;
    display:block;
    padding:2px;
}

#linkboxbox a:hover{
    text-align:right;
}

/* GENEL GÖRSEL KURALI: Tüm görsellerin esnek olmasını sağlar */
img {
    max-width: 100%;
    height: auto; /* Oranını korur */
    display: block;
}

/*
 * ANA KONTEYNERLER VE SÜTUNLAR (Değiştirilmiş Genişlikler)
 */

/* Sabit Menü Kutusu */
#linkboxbox{
    width:196px; /* Masaüstünde sabit kalabilir */
    float:left;
    position:fixed; /* Sabit konumunu korur */
    left:26px;
    top:32px;
    padding:16px;
    background-color:teal;
}

#linkbox{
    padding:11px;
    border:2px black dotted;
}

/* Ana İçerik Konteyneri */
#box1 {
    position: relative;
    /* Masaüstünde içeriği sabit menüden ayırır */
    width: auto;
    margin-left: 296px; 
    top: 26px;
    border: 4px dotted;
}

#box2 {
    position: relative;
    /* Masaüstünde içeriği sabit menüden ayırır */
    width: auto;
    margin-left: 296px; 
    top: 200px;
}

#box3 {
  position: relative;
  width: auto;
  margin-left: 400px;
  top: 100px;
}

/* Yazı Kutusu (Artık Esnek Genişlikte) */
.post {
    width: 90%; /* Masaüstünde biraz esneklik sağlar */
    max-width: 572px; /* En fazla 572px genişler */
    padding: 16px;
    background-color: lightgray;
    float: left; /* Masaüstünde fotoğraf kutusuyla yan yana durur */
    margin-bottom: 60px;
}

/* Fotoğraf Kutusu */
#profile-photo {
    float: left;
    margin-left: 16px;
    margin-top: 26px;
    background-color: #fff;
    padding: 0px;
    border: 1px dotted gray;
    box-shadow: 0px 0px 0 silver;
}

#profile-photo img {
    /* HTML'den taşınan genişlik ve border stilini buraya alıyoruz (masaüstü için) */
    width: 10vw; /* Masaüstünde istediğiniz görünüm */
    min-width: 50px; 
    border: 10px outset silver;

    max-width: 140px; 
    height: auto;
    display: block;
}

#profile-photo-mobile {
    display: none;
}

/* Masaüstü fotoğraf kutusu */
#profile-photo-desktop {
    float: left; /* VEYA float: right; masaüstü yerleşiminize göre */
    margin-left: 16px; 
    margin-top: 26px;
    background-color: #fff;
    padding: 0px;
    border: 1px dotted gray;
    box-shadow: 0px 0px 0 silver;
}

/* Genel fotoğraf img kuralları */
#profile-photo-desktop img {
    width: 10vw;          /* Masaüstü esnek genişliği */
    min-width: 50px;       
    border: 10px outset silver;
    max-width: 100%;       
    height: auto;
    display: block;
}

#photo {
  float: left;
  margin-left: 16px;
  margin-top: 5px;
  padding: 0px;
  
}

#photo2 {
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  padding: 5px;
  
}

#photo2 img{
  width: auto;
  min-width: 30%;
  border: 10px outset silver;
  max-width: 30%;
  height: auto;
  display: block;
  
}

#photo3 {
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  padding: 5px;
  
}

#photo3 img{
  width: 70%;
  min-width: 70%;
  border: 10px outset silver;
  max-width: 70%;
  height: 70%;
  display: block;
  
}


#photo img {
 width: 50%;
  min-width: 50px;
  border: 10px outset silver;
  max-width: 50%;
  height: 50%; 
}

/*
 * --- MOBİL UYUMLULUK: MAX GENİŞLİK 768PX İÇİN KURALLAR ---
 */
@media screen and (max-width: 768px) {

    /* Sabit sol menüyü (linkboxbox) mobil ekranda GİZLE */
    #linkboxbox {
        position: static; /* Sabit konumu iptal et */
        float: none;      /* Yan kaydırmayı iptal et */
        width: 100%;      /* Ekranın tamamını kapla */
        margin: 10px 0;   /* Üst ve alttan boşluk ver */
        display: block;   /* Görünür yap (eğer başka bir yerde gizlenmediyse) */
        left: auto;       /* Sol konumu iptal et */
        top: auto;        /* Üst konumu iptal et */
        order: 1;
    }
    
    /* body'nin üstündeki sarı borduru mobil görünümde kaldır */
    body {
        border-top: none;
    }

    /* Ana içeriği (box1) tamamen ekranın ortasına al */
    #box1 {
        width: 100%; 
        margin: 0px; /* Üstten 10px boşluk ve ortalama */
        top: 0; /* Sabit pozisyonu sıfırla */
        margin-left: 0;
       order: 3;
    }
    
     #box2 {
        width: 100%; 
        margin: 0px; /* Üstten 10px boşluk ve ortalama */
        top: 0; /* Sabit pozisyonu sıfırla */
        margin-left: 0;
       order: 3;
    }

    /* Yazı kutusu (post) %100 genişlik kaplamalı ve kaydırmayı bırakmalı */
    .post {
        width: 100%;
        max-width: none; /* Genişlik sınırını kaldır */
        float: none; /* Yan yana durma özelliğini iptal et */
        padding: 10px; /* Mobil için biraz daha az iç boşluk */
        text-align: left;
    }

    /* Fotoğraf kutusunu (profile-photo) alt alta getir ve ortala */
    #profile-photo {
        float: none;
        margin: 0px;
        /* Mobil cihazda fotoğraf kutusundaki görselin de ortalanması için eklenmiştir */
        text-align: center;
        width: 100%;
        order: 2;
    }
    
    #profile-photo img {
        /* Gerekirse mobil cihazda görseli daha küçük gösterebilirsiniz, ancak 140px zaten küçük. */
        max-width: 320px; 
        width:auto;
        height:auto;
    }
    
    /* Masaüstü fotoğraf kutusunu mobilde gizle */
    #profile-photo-desktop {
        display: none;
    }
    
    /* Mobil fotoğraf kutusunu göster ve stil ver */
    #profile-photo-mobile {
        display: block; /* Görünür yap */
        float: none;
        margin: 10px auto; 
        padding: 0;   
        text-align: center;
        width: 150px; /* Genişlik korunsun */
    }
    
    /* Mobil img stili */
    #profile-photo-mobile img {
        max-width: 150px;  
        width: auto;      
        height: auto;
        border: 10px outset silver;
    }
    
    #photo {
      display: none;
    }
    
    #photo3 {
      display:none;
    }

}