body {
           max-width: 800px;
           margin: 0 auto;
           padding: 40px;
           background-color: #fca7cf;
       }

       /* --- YENİ GIF ÖNİZLEME MAKYAJI --- */
       .onizleme-gif {
           width: 300px;
           /* Kutunun genişliğini sabit tut */
           height: 200px;
           /* Kutunun yüksekliğini sabit tut */
           object-fit: cover;
           /* BÜYÜ BURADA: GIF'i kutuya sığdırırken en-boy oranını bozma, fazlalıkları kırp */
           border: 2px solid red;
           /* Kırmızı çerçeveyi koru */
           border-radius: 8px;
           /* Köşeleri yuvarlat */
           box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
           /* Hafif bir gölge at, şık dursun */
           display: block;
           /* Resmi bir kutu gibi davranmaya zorla */
       }



       .projeler-alani {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 50px;
       }


       .ust-menu {
           background-color: #f7c1df;
           padding: 15px;
           border-radius: 10px;
           display: flex;
           justify-content: space-around;
           margin-bottom: 40px;
       }


       .ust-menu a {
           color: #2f3542;
           text-decoration: none;
           font-weight: bold;
           font-size: 16px;
           padding: 10px 20px;
           transition: 0.3s;
       }


       .ust-menu a:hover {
           background-color: rgb(194, 68, 68);
           color: white;
           border-radius: 5px;
       }


       /* --- EKRANDA AÇILAN REKLAM KUTUSU (POP-UP) MAKYAJI --- */
       #reklam-kutusu {
           position: fixed;
           /* BÜYÜ BURADA: Sayfayı aşağı kaydırsan bile ekranda sabit durur */
           top: 50%;
           /* Yukarıdan ekranın %50'si kadar aşağı it */
           left: 50%;
           /* Soldan ekranın %50'si kadar sağa it */
           transform: translate(-50%, -50%);
           /* Tam milimetrik olarak ortalamak için ince ayar */

           background-color: white;
           /* Arka planı beyaz olsun */
           padding: 30px;
           /* İçindeki yazılar kenarlara yapışmasın */
           border: 3px solid #6f1820;
           /* Kırmızı şık bir çerçeve */
           border-radius: 15px;
           /* Köşeleri yuvarlat */
           box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
           /* Havada duruyor hissi için arkasına kocaman siyah bir gölge at */
           z-index: 1000;
           /* Diğer bütün kutuların ve yazıların EN ÖNÜNDE dursun */
           text-align: center;
           /* Yazıları ortala */
           width: 300px;
           /* Kutunun genişliği */
       }

       /* ÇARPI (X) BUTONU MAKYAJI */
       #kapat-butonu {
           position: absolute;
           /* Kutunun içinde istediğimiz yere koyabilmek için özgürlük verir */
           top: 10px;
           /* Kutunun tavanından 10 piksel aşağıda dursun */
           right: 15px;
           /* Kutunun sağ duvarından 15 piksel içeride dursun */
           background: none;
           /* Kendi gri arka planını sil */
           border: none;
           /* Kendi çerçevesini sil */
           font-size: 20px;
           font-weight: bold;
           cursor: pointer;
           /* Üstüne gelince fare ok yerine 'tıklama eli' olsun */
       }

       /* Fareyle Çarpının üstüne gelince... */
       #kapat-butonu:hover {
           color: red;
       }





       /* --- SADECE ÖZEL SİTE SAYFASINDA GÖRÜNECEK OLAN MENÜ --- */
       .ozel-menu {
           background-color: #2c3e50;
           /* Koyu lacivert/siyahımsı gizemli bir arka plan */
           padding: 15px 30px;
           border-radius: 10px;
           display: flex;
           justify-content: space-between;
           /* İki öğeyi sağa ve sola yasla */
           align-items: center;
           border: 2px solid gold;
           /* Altın sarısı şık bir çerçeve */
       }

       /* Özel menünün içindeki link (Ana Sayfaya Dön butonu) */
       .ozel-menu a {
           color: gold;
           text-decoration: none;
           font-weight: bold;
           padding: 8px 15px;
           border-radius: 5px;
           transition: 0.3s;
       }

       /* Özel menüdeki linkin üstüne gelince... */
       .ozel-menu a:hover {
           background-color: gold;
           color: #2c3e50;
       }





       /* --- ANA SAYFADAKİ PROJE LİNKLERİNİ BUTONA ÇEVİRME --- */

       .proje-karti a {
           display: inline-block;
           /* Sihir burada: Yazıyı bir 'kutu' gibi davranmaya zorlar */
           background-color: #ff4757;
           /* Şık bir kırmızı arka plan */
           color: white;
           /* Üzerindeki yazı beyaz olsun ki okunsun */
           text-decoration: none;
           /* O çirkin mavi alt çizgiyi tamamen sil */
           padding: 10px 20px;
           /* İçeriden ferahlat, buton tombullaşsın */
           border-radius: 8px;
           /* Köşeleri hafif yuvarlat */
           font-weight: bold;
           /* Yazıyı kalınlaştır */
           margin-bottom: 15px;
           /* Altındaki önizleme kutusuyla arasına nefes boşluğu koy */
           transition: 0.3s;
           /* Renk değişimi aniden değil, yumuşakça olsun */
       }

       /* Farenin ucuyla butonun üstüne gelince (Hover Büyüsü 2) */
       .proje-karti a:hover {
           background-color: #2f3542;
           /* Rengi koyu griye dönsün */
           transform: scale(1.05);
           /* Üstüne gelince hafifçe büyüsün (Buna bayılacaksın!) */
       }


       h1 {
           font-family: 'Francois One', sans-serif;
           /* Sadece menüdeki yazılar bu font olur */
           font-size: 35px;

           font-weight: 400;
           color: #751018;
           /* Başlığın rengi */
           /*text-align: center;*/
           /* Başlığı tam ortaya almak istersen bu kodu da ekleyebilirsin! */
       }

       /*ÖZEL İSTEK HTML KISMI*/
       .ozel-istek-yazisi {
           font-family: 'Mitr', sans-serif;
           /* Sadece menüdeki yazılar bu font olur */
           font-size: 18px;

           font-weight: 400;
           color: #13511c;
       }


       p {
           color: rgb(2, 62, 62);
       }

       .not-alani p {
           font-family: 'Mitr', sans-serif;
           /* Sadece menüdeki yazılar bu font olur */
           font-size: 18px;

           font-weight: 400;
           color: #133b09;
       }

       .ust-menu a {
           font-family: 'Oswald', sans-serif;
           /* Sadece menüdeki yazılar bu font olur */
           font-size: 18px;
           color: #333;
           font-weight: 400;
       }


       /* 1. MESAJ ALANININ GENEL DURUŞU */
       .mesaj-alani {
           margin-top: 30px;


       }

       /* 2. YAZI YAZILAN KUTU (TEXTAREA) */
       .mesaj-alani textarea {
           width: 100%;
           /* Sayfanın genişliğine yayılsın */
           max-width: 500px;
           /* Ama çok da devasa olmasın */
           height: 150px;
           /* Yüksekliği */
           padding: 15px;
           /* İçerideki yazılar kenara yapışmasın */
           border: 2px solid #ff4757;
           /* Çerçeve rengi */
           border-radius: 12px;
           /* Köşeleri yumuşat */
           font-family: 'Mitr', sans-serif;
           /* Senin seçtiğin o güzel font */
           font-size: 16px;
           background-color: rgba(255, 255, 255, 0.8);
           /* Hafif şeffaf beyaz (arkadaki pembe biraz görünsün) */
           outline: none;
           /* Tıklayınca çıkan o çirkin mavi çizgiyi yok et */
           transition: 0.3s;
           /* Değişimler yumuşak olsun */
       }

       /* KUTUYA TIKLAYINCA (FOCUS) NE OLSUN? */
       .mesaj-alani textarea:focus {
           border-color: #2f3542;
           /* Tıklayınca çerçeve rengi değişsin */
           box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
           /* Hafif bir parlama efekti */
       }

       /* 3. GÖNDER BUTONU */
       .mesaj-alani button {
           display: block;
           /* Butonu tek başına bir satıra al */
           margin: 20px;
           /* Üstten boşluk bırak ve ortala */
           padding: 20px 40px;
           background-color: #2f3542;
           /* Butonun rengi */
           color: white;
           border: none;
           border-radius: 25px;
           /* Tam yuvarlak köşeler */
           font-family: 'Mitr', sans-serif;
           font-weight: bold;
           cursor: pointer;
           transition: 0.3s;
       }

       /* BUTONUN ÜSTÜNE GELİNCE... */
       .mesaj-alani button:hover {
           background-color: #ff4757;
           /* Rengi kırmızıya dönsün */
           transform: translateY(-3px);
           /* Hafifçe yukarı zıplasın (çok havalı durur!) */
       }

       /*ÖZEL İSTEK HTML KISMI*/
       /* REKLAM KUTUSU KISMI */

       #reklam-kutusu p {
           font-family: 'Mitr', sans-serif;
           /* Sadece menüdeki yazılar bu font olur */
           font-size: 18px;

           font-weight: 400;
           color: #3b0909;
       }

       /* ÖZEL SİTEM SAYFASI İÇERİK DÜZENİ */
       .ozel-sitem-icerik {
           text-align: center;
           margin-top: -10px;
           padding: 20px;
       }

       .ozel-sitem-icerik h1 {
           margin-bottom: 20px;
       }

       .ozel-sitem-icerik p,
       .ozel-sitem-icerik li {
           line-height: 1.6;
           margin-bottom: 15px;
           font-family: 'Lalezar', sans-serif;

           font-size: 23px;

           font-weight: 400;
           color: #270644;
       }


       .ozel-menu a {
           font-family: 'Francois One', sans-serif;
           /* Sadece menüdeki yazılar bu font olur */
           font-size: 25px;

           font-weight: 400;
           color: #d7cccd;
       }

       #reklam-kutusu a {
           display: inline-block;
           /* Sihir burada: Yazıyı bir 'kutu' gibi davranmaya zorlar */
           background-color: #f6ff47;
           /* Şık bir kırmızı arka plan */
           color: rgb(18, 17, 17);
           /* Üzerindeki yazı beyaz olsun ki okunsun */
           text-decoration: none;
           /* O çirkin mavi alt çizgiyi tamamen sil */
           padding: 10px 20px;
           /* İçeriden ferahlat, buton tombullaşsın */
           border-radius: 8px;
           /* Köşeleri hafif yuvarlat */
           font-weight: bold;
           /* Yazıyı kalınlaştır */
           margin-bottom: 15px;
           /* Altındaki önizleme kutusuyla arasına nefes boşluğu koy */
           transition: 0.3s;
           /* Renk değişimi aniden değil, yumuşakça olsun */

       }


       #reklam-kutusu a:hover {
           background-color: #2f3542;
           transform: scale(1.05);
       }

       .proje-karti a {
           font-family: 'Lalezar', sans-serif;

           font-size: 23px;

           font-weight: 400;
           color: #3b0909;


       }


       footer {
           margin-top: 40px;
           /* İçerikle arasına büyük bir boşluk koy */
           padding: 10px;
           border-top: 1px solid rgba(0, 0, 0, 0.1);
           /* Hafif bir çizgi */
           text-align: center;
       }

       .tiktok-buton {
           display: inline-block;
           background-color: #0c2070;
           /* TikTok siyahı */
           color: white;
           padding: 12px 25px;
           border-radius: 50px;
           text-decoration: none;
           font-weight: bold;
           font-family: 'Mitr', sans-serif;
           transition: 0.3s;
       }

       .tiktok-buton:hover {
           background-color: #ff0050;
           /* TikTok pembesi/kırmızısı */
           transform: scale(1.1);
       }

       .footer-alan p {
           font-family: 'Mitr', sans-serif;
           /* Sadece menüdeki yazılar bu font olur */
           font-size: 18px;

           font-weight: 400;
           color: #0f343d;
       }



       /* --- HAKKIMIZDA SAYFASI ŞEFFAF KART MAKYAJI --- */

       /* 1. Önce kartı sayfanın ortasına alalım ve genişliğini sınırlayalım */
       .hakkimda-kapsayici {
           display: flex;
           justify-content: center;
           /* Yatayda ortala */
           margin-top: 20px;
           /* Üstten boşluk bırak */
           padding: 0 20px;
           /* Küçük ekranlarda kenarlara yapışmasın */
       }


       /* --- HAKKIMIZDA SAYFASI ŞEFFAF KART GÜNCELLEME --- */

       .hakkimda-kart {
           background-color: rgba(255, 255, 255, 0.7);
           max-width: 600px;
           border-radius: 20px;
           box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
           text-align: left;

           /* BOŞLUK AYARI BURADA: */
           /* Sırasıyla: Üst(5px) - Sağ(30px) - Alt(30px) - Sol(30px) */
           padding: 5px 30px 30px 30px;
       }

       /* Başlığın (Hakkımızda) kendi doğuştan gelen boşluğunu öldürelim */
       .hakkimda-kart h1 {
           margin-top: 0;
           padding-top: 0;
           line-height: 1;
           /* Satır yüksekliğini daraltarak daha da yukarı çeker */
       }