/* Theme Name: Enver Agent */ /* DEĞİŞTİ: WordPress'in style.css dosyasını tanıması için iç içe yorum kaldırıldı, tema adını Enver Agent olarak tanımlar */
/* Theme URI: https://enveragent.com */ /* DEĞİŞTİ: İç içe yorum yapısı düzeltildi, temanın web adresini belirtir */
/* Author: Enver Agent */ /* DEĞİŞTİ: İç içe yorum yapısı düzeltildi, tema yapımcısının adını belirtir */
/* Description: Enver Agent projesi için özel hazırlanmış, 2 saniyede %25 blurlanan responsive arkaplanlı ve sert teknolojik fontlu Çok Yakında WordPress teması. */ /* DEĞİŞTİ: İç içe yorum yapısı düzeltildi, temanın açıklamasını tanımlar */
/* Version: 1.1.0 */ /* DEĞİŞTİ: Blog sayfası, yazı detayı ve LinkedIn butonu eklendiği için sürüm 1.1.0 yapıldı */
/* License: GPL v2 or later */ /* DEĞİŞTİ: İç içe yorum yapısı düzeltildi, temanın lisans türünü belirtir */
/* Text Domain: enver-agent */ /* DEĞİŞTİ: İç içe yorum yapısı düzeltildi, çeviri işlemleri için metin etki alanını belirtir */

* { /* Sayfadaki tüm HTML elementlerini seçer */
    margin: 0; /* Tüm elementlerin dış boşluklarını sıfırlar */
    padding: 0; /* Tüm elementlerin iç boşluklarını sıfırlar */
    box-sizing: border-box; /* Genişlik ve yükseklik hesaplamalarına kenarlık ve iç boşluğu dahil eder */
} /* Evrensel seçici bloğunu kapatır */

html, body { /* HTML ve Body ana kapsayıcı etiketlerini seçer */
    width: 100%; /* Sayfa genişliğini ekranın tamamı (%100) yapar */
    min-height: 100%; /* DEĞİŞTİ: Blog ve yazı detaylarının aşağı doğru kaydırılabilmesi için sabit height yerine min-height yapıldı */
    overflow-x: hidden; /* DEĞİŞTİ: Yatay taşmaları gizlerken dikeyde blog yazılarını okumak için kaydırmaya izin verildi */
    scroll-behavior: smooth; /* DEĞİŞTİ: Blog butonuna tıklandığında aşağıya yumuşak kaydırma geçişi eklendi */
    background-color: #07090c; /* Görsel yüklenene kadar görünecek koyu teknolojik arkaplan rengini ayarlar */
    font-family: 'Oxanium', 'Orbitron', 'Chakra Petch', sans-serif; /* Yeni nesil sert ve teknolojik font ailesini tanımlar */
    color: #ffffff; /* Varsayılan yazı rengini beyaz olarak ayarlar */
    -webkit-font-smoothing: antialiased; /* Yazıların ekranlarda daha keskin ve net görünmesini sağlar */
} /* HTML ve Body stil bloğunu kapatır */

.enver-hero { /* Tüm ekranı kaplayan ana taşıyıcı alanı seçer */
    position: relative; /* İçindeki mutlak konumlu elementler için referans noktası oluşturur */
    width: 100%; /* DEĞİŞTİ: Kaydırma çubuğu genişliğiyle çakışmaması için 100vw yerine %100 genişlik yapıldı */
    min-height: 100vh; /* DEĞİŞTİ: İlk açılış ekranının en az tam ekran yüksekliğinde olması sağlandı */
    min-height: 100dvh; /* DEĞİŞTİ: Mobil tarayıcılarda dinamik ekran yüksekliğinin %100'ünü kaplaması sağlandı */
    display: flex; /* İçeriği ortalamak için esnek kutu (flexbox) modelini aktif eder */
    align-items: center; /* İçeriği dikey eksende tam ortaya hizalar */
    justify-content: center; /* İçeriği yatay eksende tam ortaya hizalar */
    padding: 5.5rem 1rem 3rem 1rem; /* DEĞİŞTİ: Üst navigasyon çubuğu ile çakışmaması için iç boşluk eklendi */
    z-index: 3; /* DEĞİŞTİ: Sabit arkaplan katmanlarının üzerinde görünmesi için z-index değeri verildi */
} /* Ana taşıyıcı stil bloğunu kapatır */

.enver-bg { /* Gönderilen arkaplan fotoğrafını tutan katmanı seçer */
    position: fixed; /* DEĞİŞTİ: Blog yazılarını aşağı kaydırırken de arkaplanın sabit kalması için fixed yapıldı */
    top: 0; /* Üst kenardan boşluğu sıfırlar */
    left: 0; /* Sol kenardan boşluğu sıfırlar */
    width: 100%; /* Genişliği kapsayıcının %100'ü yapar */
    height: 100%; /* Yüksekliği kapsayıcının %100'ü yapar */
    background-position: center center; /* Görselin her ekran boyutunda merkezdeki Enver Paşa figürüne odaklanmasını sağlar */
    background-repeat: no-repeat; /* Görselin kendini tekrar etmesini engeller */
    background-size: cover; /* Görselin ekran boyutuna göre responsive şekilde tüm alanı kaplamasını sağlar */
    filter: blur(0px) brightness(1); /* İlk başta görselin tamamen net (%0 blur) görünmesini sağlar */
    transform: scale(1); /* Başlangıç ölçeğini standart (1x) olarak ayarlar */
    animation: enverBlurTransition 2s cubic-bezier(0.22, 1, 0.36, 1) forwards; /* Görseli 2 saniye içinde %25 blurlayan animasyonu çalıştırır ve son halinde sabit tutar */
    will-change: filter, transform; /* Tarayıcıya filtre ve ölçek değişimi olacağını bildirerek performansı artırır */
    z-index: 1; /* Arkaplan katmanını en alt sıraya yerleştirir */
} /* Arkaplan katmanı stil bloğunu kapatır */

@keyframes enverBlurTransition { /* 2 saniyelik blurlanma animasyonunun adımlarını tanımlar */
    0% { /* Animasyonun başlangıç anını (0. saniye) tanımlar */
        filter: blur(0px) brightness(1); /* Görselin ilk açılışta net ve tam parlaklıkta olmasını sağlar */
        transform: scale(1); /* Görselin başlangıçta normal boyutta olmasını sağlar */
    } /* Başlangıç adımını kapatır */
    100% { /* Animasyonun bitiş anını (2. saniye sonu) tanımlar */
        filter: blur(6px) brightness(0.75); /* Görseli %25 oranında blurlar ve yazının okunması için hafifçe (%25) karartır */
        transform: scale(1.04); /* Blur nedeniyle kenarlarda beyaz boşluk oluşmaması için görseli %4 yakınlaştırır */
    } /* Bitiş adımını kapatır */
} /* Animasyon bloğunu kapatır */

.enver-overlay { /* Görselin üzerindeki teknolojik karartma ve ızgara (grid) katmanını seçer */
    position: fixed; /* DEĞİŞTİ: Sayfa aşağı kaydırıldığında siber ızgara dokusunun tüm sayfada devam etmesi için fixed yapıldı */
    inset: 0; /* Üst, sağ, alt ve sol kenarları sıfırlayarak tüm alanı kaplatır */
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(5, 7, 12, 0.72) 100%); /* Merkezden kenarlara doğru koyulaşan sinematik bir vinyet efekti verir */
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px), radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(5, 7, 12, 0.72) 100%); /* Arkaplana ince teknolojik siber ızgara dokusu ekler */
    background-size: 40px 40px, 40px 40px, 100% 100%; /* Teknolojik ızgara karelerinin boyutunu 40x40 piksel olarak ayarlar */
    z-index: 2; /* Bu katmanı arkaplan görselinin hemen üstüne yerleştirir */
    pointer-events: none; /* Bu katmanın fare tıklamalarını engellememesini sağlar */
} /* Overlay katmanı stil bloğunu kapatır */

.enver-topbar { /* Üst kısımdaki sabit teknolojik navigasyon ve LinkedIn çubuğunu seçer */
    position: fixed; /* Navigasyon çubuğunu ekranın üstüne sabitler */
    top: 0; /* Üst kenara sıfırlar */
    left: 0; /* Sol kenara sıfırlar */
    width: 100%; /* Çubuğun tüm ekran genişliğini kaplamasını sağlar */
    z-index: 20; /* Tüm içeriklerin üzerinde kalmasını sağlar */
    display: flex; /* İçindeki logo ve butonları yan yana hizalar */
    align-items: center; /* Elemanları dikeyde ortalar */
    justify-content: space-between; /* Marka adını sola, Blog ve LinkedIn butonlarını sağa yaslar */
    padding: 1rem 2.5rem; /* Üst çubuğun iç boşluklarını belirler */
    background: rgba(6, 8, 13, 0.75); /* Yarı saydam koyu siber arkaplan rengi verir */
    backdrop-filter: blur(10px); /* Çubuğun arkasındaki görüntüyü bulanıklaştırır */
    -webkit-backdrop-filter: blur(10px); /* Safari için bulanıklaştırma desteği sağlar */
    border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Alt kenara ince teknolojik çizgi ekler */
} /* Üst çubuk bloğunu kapatır */

.enver-brand { /* Üst çubuktaki ENVER AGENT marka bağlantısını seçer */
    font-family: 'Orbitron', 'Oxanium', sans-serif; /* Sert teknolojik fontu uygular */
    font-size: 1.05rem; /* Yazı boyutunu ayarlar */
    font-weight: 900; /* En kalın font ağırlığını verir */
    letter-spacing: 0.2em; /* Harf aralığını açar */
    color: #ffffff; /* Rengi beyaz yapar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    text-transform: uppercase; /* Büyük harfe çevirir */
    display: inline-flex; /* Yanındaki kırmızı nokta ile hizalamak için esnek kutu yapar */
    align-items: center; /* Nokta ve yazıyı dikeyde ortalar */
    gap: 0.55rem; /* Nokta ile yazı arasına boşluk koyar */
} /* Marka bağlantısı bloğunu kapatır */

.enver-nav { /* Üst çubuktaki sağ buton grubunu seçer */
    display: flex; /* Butonları yan yana dizer */
    align-items: center; /* Butonları dikeyde ortalar */
    gap: 0.85rem; /* Butonlar arasına boşluk bırakır */
} /* Sağ buton grubu bloğunu kapatır */

.enver-content { /* Ortadaki yazı ve logo içerik kutusunu seçer */
    position: relative; /* Katman sıralamasında üstte durabilmesi için göreceli konumlandırma verir */
    z-index: 3; /* İçeriği arkaplan ve karartma katmanlarının en üstüne çıkarır */
    text-align: center; /* Tüm metinleri yatay olarak ortalar */
    padding: 2.5rem 3rem; /* İçerik kutusuna iç boşluklar verir */
    max-width: 92%; /* Küçük ekranlarda kenarlara yapışmaması için maksimum genişliği %92 ile sınırlar */
    border: 1px solid rgba(255, 255, 255, 0.14); /* Kutunun etrafına ince, yarı saydam teknolojik bir çerçeve çizer */
    background: rgba(8, 10, 15, 0.55); /* DEĞİŞTİ: Yazıların ve yeni butonların daha net okunması için zemin koyuluğu 0.48'den 0.55'e çıkarıldı */
    backdrop-filter: blur(4px); /* Kutu arkasındaki alanı hafifçe buzlu cam görünümüne kavuşturur */
    -webkit-backdrop-filter: blur(4px); /* Safari tarayıcıları için buzlu cam efektini destekler */
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); /* Kutunun köşelerine keskin, sert teknolojik (cyber/tactical) kesik köşe formu verir */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(212, 36, 38, 0.08); /* Kutuya derinlik gölgesi ve hafif kızıl teknolojik iç parlama verir */
    animation: contentReveal 2s cubic-bezier(0.22, 1, 0.36, 1) forwards; /* Görsel blurlanırken yazı bloğunun netleşerek ekrana gelmesini sağlar */
} /* İçerik kutusu stil bloğunu kapatır */

@keyframes contentReveal { /* Ortadaki metin kutusunun giriş animasyonunu tanımlar */
    0% { /* Başlangıç anını tanımlar */
        opacity: 0.15; /* İlk anda görselin net görünmesi için metin kutusunu çok hafif görünür yapar */
        transform: translateY(12px) scale(0.98); /* Kutuyu biraz aşağıda ve hafif küçük başlatır */
    } /* Başlangıç adımını kapatır */
    100% { /* 2. saniye sonundaki bitiş anını tanımlar */
        opacity: 1; /* Metin kutusunu tamamen görünür hale getirir */
        transform: translateY(0) scale(1); /* Metin kutusunu tam merkezdeki yerine oturtur */
    } /* Bitiş adımını kapatır */
} /* İçerik animasyon bloğunu kapatır */

.enver-badge { /* Üst kısımdaki küçük teknolojik sistem durumu etiketini seçer */
    display: inline-flex; /* İkon noktası ve metni yan yana hizalamak için esnek kutu kullanır */
    align-items: center; /* Nokta ve metni dikeyde ortalar */
    gap: 0.6rem; /* Nokta ile metin arasına boşluk bırakır */
    padding: 0.35rem 1rem; /* Etiketin iç boşluklarını ayarlar */
    margin-bottom: 1.2rem; /* Altındaki ana başlıkla arasına mesafe koyar */
    font-size: 0.78rem; /* Etiket yazı boyutunu ayarlar */
    font-weight: 700; /* Yazıyı kalınlaştırır */
    letter-spacing: 0.32em; /* Harfler arasına geniş teknolojik boşluk verir */
    text-transform: uppercase; /* Tüm harfleri büyük harfe çevirir */
    color: #e63946; /* Fes/sancak kırmızısına uyumlu siber kırmızı renk verir */
    background: rgba(230, 57, 70, 0.12); /* Etiket arkasına hafif kırmızı yarı saydam zemin verir */
    border: 1px solid rgba(230, 57, 70, 0.4); /* Etiket etrafına kırmızı teknolojik kenarlık ekler */
} /* Sistem durumu etiketi bloğunu kapatır */

.enver-dot { /* Etiket içindeki yanıp sönen aktif sistem noktasını seçer */
    width: 8px; /* Noktanın genişliğini 8 piksel yapar */
    height: 8px; /* Noktanın yüksekliğini 8 piksel yapar */
    background-color: #e63946; /* Nokta rengini kırmızı yapar */
    box-shadow: 0 0 10px #e63946; /* Noktaya neon parlama efekti verir */
    animation: pulseDot 1.4s infinite ease-in-out; /* Noktanın sürekli nabız gibi yanıp sönmesini sağlar */
} /* Aktif sistem noktası bloğunu kapatır */

@keyframes pulseDot { /* Yanıp sönen noktanın animasyonunu tanımlar */
    0%, 100% { /* Başlangıç ve bitiş anını seçer */
        opacity: 1; /* Noktayı tam parlak yapar */
    } /* Adımı kapatır */
    50% { /* Animasyonun ortasını seçer */
        opacity: 0.25; /* Noktayı kısık hale getirir */
    } /* Adımı kapatır */
} /* Nokta animasyonu bloğunu kapatır */

.enver-title { /* ENVER AGENT ana proje başlığını seçer */
    font-family: 'Orbitron', 'Oxanium', sans-serif; /* En sert ve köşeli teknolojik fontu uygular */
    font-size: clamp(2.2rem, 6vw, 5.2rem); /* Ekran boyutuna göre otomatik büyüyüp küçülen responsive yazı boyutu ayarlar */
    font-weight: 900; /* En kalın (Black) font ağırlığını kullanır */
    letter-spacing: 0.18em; /* Harfler arasına sert ve otoriter boşluk bırakır */
    text-transform: uppercase; /* Başlığı tamamen büyük harf yapar */
    line-height: 1.1; /* Satır yüksekliğini sıkı ve dengeli tutar */
    color: #ffffff; /* Başlık rengini saf beyaz yapar */
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.25), 0 4px 20px rgba(0, 0, 0, 0.9); /* Yazıya hem parlama hem de arkaplandan ayrıştıran güçlü gölge verir */
    margin-bottom: 1rem; /* Altındaki çizgi ve alt başlıkla mesafe bırakır */
} /* Ana başlık bloğunu kapatır */

.enver-divider { /* Başlık ile 'Çok Yakında Burdayız' yazısı arasındaki teknolojik ayırıcı çizgiyi seçer */
    width: 120px; /* Çizgi genişliğini 120 piksel yapar */
    height: 3px; /* Çizgi kalınlığını 3 piksel yapar */
    margin: 0 auto 1.4rem auto; /* Çizgiyi yatayda ortalar ve altına boşluk bırakır */
    background: linear-gradient(90deg, transparent, #e63946, #ffffff, #e63946, transparent); /* Çizgiye uçları saydam, ortası kırmızı-beyaz teknolojik geçiş verir */
} /* Ayırıcı çizgi bloğunu kapatır */

.enver-subtitle { /* 'ÇOK YAKINDA BURDAYIZ' metnini seçer */
    font-family: 'Oxanium', 'Chakra Petch', sans-serif; /* Türkçe karakter destekli sert teknolojik fontu uygular */
    font-size: clamp(1.1rem, 2.8vw, 2.1rem); /* Mobil ve masaüstüne duyarlı (responsive) font boyutu belirler */
    font-weight: 700; /* Yazıyı kalın ve net yapar */
    letter-spacing: 0.28em; /* Harf aralığını geniş tutarak fütüristik bir duruş sağlar */
    text-transform: uppercase; /* Tüm harfleri büyük harf yapar */
    color: #e2e8f0; /* Hafif metalik gümüş-beyaz tonunda yazı rengi verir */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); /* Okunabilirliği maksimuma çıkarmak için koyu gölge ekler */
    padding-left: 0.28em; /* Harf aralığından kaynaklanan sağ boşluğu dengeleyerek tam merkezleme sağlar */
    margin-bottom: 2rem; /* DEĞİŞTİ: Altına eklenen Blog ve LinkedIn butonlarıyla arasına boşluk bırakıldı */
} /* Alt başlık bloğunu kapatır */

.enver-actions { /* Hero kutusu içindeki Blog ve LinkedIn butonlarının kapsayıcısını seçer */
    display: flex; /* Butonları yan yana hizalar */
    align-items: center; /* Butonları dikeyde ortalar */
    justify-content: center; /* Butonları yatayda tam ortaya hizalar */
    gap: 1rem; /* Butonlar arasına boşluk bırakır */
    flex-wrap: wrap; /* Küçük ekranlarda butonların alt alta geçebilmesini sağlar */
} /* Aksiyon butonları kapsayıcısını kapatır */

.enver-btn { /* Genel teknolojik buton stilini seçer */
    display: inline-flex; /* İkon ve metni yan yana ortalamak için esnek kutu kullanır */
    align-items: center; /* İkon ve metni dikeyde ortalar */
    justify-content: center; /* İçeriği yatayda ortalar */
    gap: 0.55rem; /* İkon ile yazı arasına mesafe koyar */
    padding: 0.75rem 1.45rem; /* Buton iç boşluklarını ayarlar */
    font-family: 'Oxanium', 'Orbitron', sans-serif; /* Sert teknolojik fontu uygular */
    font-size: 0.82rem; /* Buton yazı boyutunu belirler */
    font-weight: 700; /* Yazıyı kalınlaştırır */
    letter-spacing: 0.18em; /* Harf aralığını açar */
    text-transform: uppercase; /* Tüm harfleri büyük yapar */
    text-decoration: none; /* Link alt çizgisini kaldırır */
    color: #ffffff; /* Yazı rengini beyaz yapar */
    background: rgba(230, 57, 70, 0.18); /* Hafif kızıl siber arkaplan verir */
    border: 1px solid rgba(230, 57, 70, 0.65); /* Kırmızı teknolojik kenarlık çizer */
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); /* Buton köşelerine keskin teknolojik kesik form verir */
    transition: all 0.25s ease; /* Üzerine gelindiğinde yumuşak geçiş sağlar */
    cursor: pointer; /* Fare imlecini el işaretine çevirir */
} /* Genel buton bloğunu kapatır */

.enver-btn:hover { /* Butonun üzerine fare ile gelindiğindeki (hover) durumu seçer */
    background: #e63946; /* Arkaplanı tam kırmızıya çevirir */
    box-shadow: 0 0 22px rgba(230, 57, 70, 0.6); /* Kırmızı neon parlama efekti ekler */
    transform: translateY(-2px); /* Butonu hafifçe yukarı kaldırır */
} /* Buton hover bloğunu kapatır */

.enver-btn-linkedin { /* LinkedIn özel buton stilini seçer */
    background: rgba(10, 102, 194, 0.24); /* LinkedIn mavisi tonunda yarı saydam siber zemin verir */
    border-color: rgba(56, 152, 255, 0.65); /* Parlak siber mavi kenarlık ekler */
} /* LinkedIn butonu bloğunu kapatır */

.enver-btn-linkedin:hover { /* LinkedIn butonunun üzerine gelindiğindeki durumu seçer */
    background: #0a66c2; /* Arkaplanı orijinal LinkedIn mavisi yapar */
    border-color: #60a5fa; /* Kenarlığı açık mavi ile parlatır */
    box-shadow: 0 0 22px rgba(10, 102, 194, 0.75); /* Mavi neon parlama efekti verir */
} /* LinkedIn hover bloğunu kapatır */

.enver-btn-icon { /* Buton içindeki SVG ikonlarını seçer */
    width: 16px; /* İkon genişliğini 16 piksel yapar */
    height: 16px; /* İkon yüksekliğini 16 piksel yapar */
    fill: currentColor; /* İkon rengini yazı rengiyle aynı (beyaz) yapar */
    flex-shrink: 0; /* İkonun dar ekranlarda büzülmesini engeller */
} /* İkon stil bloğunu kapatır */

.enver-blog-section { /* Blog yazılarının listelendiği ana bölümü seçer */
    position: relative; /* Sabit arkaplanın üzerinde yer alması için göreceli konumlandırır */
    z-index: 3; /* Arkaplan ve vinyet katmanının üstüne çıkarır */
    max-width: 900px; /* Blog akışının üstte görsel altta yazı şeklinde dikey ve okunaklı olması için genişliği 900px yapar */
    margin: 0 auto; /* Blog bölümünü ekranın ortasına hizalar */
    padding: 4.5rem 1.5rem 6rem 1.5rem; /* Üstten, yanlardan ve alttan ferah boşluklar bırakır */
} /* Blog bölümü bloğunu kapatır */

.enver-section-header { /* Blog bölümünün başlık alanını seçer */
    text-align: center; /* Başlığı ortalar */
    margin-bottom: 3rem; /* Yazı kartları ile başlık arasına boşluk bırakır */
} /* Bölüm başlığı bloğunu kapatır */

.enver-section-title { /* 'BLOG // OPERASYON KAYITLARI' başlığını seçer */
    font-family: 'Orbitron', 'Oxanium', sans-serif; /* Sert teknolojik başlık fontunu uygular */
    font-size: clamp(1.6rem, 3.5vw, 2.5rem); /* Responsive başlık boyutu belirler */
    font-weight: 900; /* En kalın font ağırlığını verir */
    letter-spacing: 0.2em; /* Harf aralığını açar */
    text-transform: uppercase; /* Büyük harfe çevirir */
    color: #ffffff; /* Rengi beyaz yapar */
    margin-bottom: 0.8rem; /* Altındaki çizgiyle mesafe bırakır */
} /* Bölüm başlığı yazı bloğunu kapatır */

.enver-post-list { /* Blog yazılarını alt alta dizen kapsayıcıyı seçer */
    display: flex; /* Esnek kutu modelini açar */
    flex-direction: column; /* Yazı kartlarını yukarıdan aşağıya doğru dikey olarak sıralar */
    gap: 2.8rem; /* Her blog yazısı arasına dikey boşluk bırakır */
} /* Yazı listesi bloğunu kapatır */

.enver-post-card { /* Tekil blog yazısı kartını (üstte görsel, altta yazı) seçer */
    display: flex; /* Esnek kutu modelini aktif eder */
    flex-direction: column; /* İstediğin gibi üstte görsel ve alta doğru akan yazı düzenini kurar */
    background: rgba(8, 11, 18, 0.78); /* Kartın koyu yarı saydam siber zemin rengini ayarlar */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Kart etrafına teknolojik çerçeve çizer */
    backdrop-filter: blur(8px); /* Kartın arkasındaki alanı buzlu cam gibi bulanıklaştırır */
    -webkit-backdrop-filter: blur(8px); /* Safari için buzlu cam desteğini ekler */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); /* Kartın köşelerine keskin teknolojik kesik form verir */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); /* Karta güçlü derinlik gölgesi verir */
    overflow: hidden; /* Görselin kart sınırlarından taşmasını önler */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Kart üzerine gelindiğinde yumuşak geçiş sağlar */
} /* Blog kartı bloğunu kapatır */

.enver-post-card:hover { /* Blog kartının üzerine gelindiğindeki durumu seçer */
    transform: translateY(-4px); /* Kartı hafifçe yukarı kaldırır */
    border-color: rgba(230, 57, 70, 0.55); /* Çerçeve rengini siber kırmızıya yaklaştırır */
} /* Blog kartı hover bloğunu kapatır */

.enver-post-thumb-link { /* Blog kartının üstündeki görselin tıklanabilir bağlantısını seçer */
    display: block; /* Bağlantıyı blok seviyesine getirerek tüm üst alanı kaplatır */
    width: 100%; /* Genişliği %100 yapar */
    overflow: hidden; /* Yakınlaşma efektinde taşmayı gizler */
    border-bottom: 2px solid rgba(230, 57, 70, 0.5); /* Görsel ile alttaki yazı arasına kırmızı teknolojik sınır çizgisi çeker */
} /* Görsel bağlantısı bloğunu kapatır */

.enver-post-thumb { /* Blog yazısının üstündeki görseli seçer */
    display: block; /* Görsel altındaki boşluğu sıfırlar */
    width: 100%; /* Görselin kart genişliğini tamamen kaplamasını sağlar */
    height: clamp(220px, 38vw, 420px); /* Ekran boyutuna göre duyarlı (responsive) görsel yüksekliği verir */
    object-fit: cover; /* Görseli bozmadan alanı dolduracak şekilde kırpar */
    object-position: center center; /* Görselin merkezine odaklanır */
    transition: transform 0.5s ease, filter 0.5s ease; /* Üzerine gelindiğinde yumuşak yakınlaşma geçişi sağlar */
} /* Blog görseli bloğunu kapatır */

.enver-post-card:hover .enver-post-thumb { /* Kartın üzerine gelindiğinde görselin davranışını seçer */
    transform: scale(1.03); /* Görseli hafifçe (%3) yakınlaştırır */
} /* Görsel hover bloğunu kapatır */

.enver-post-body { /* Görselin hemen altında aşağı doğru akan yazı alanını seçer */
    padding: 2rem 2.2rem 2.4rem 2.2rem; /* Yazı alanının iç boşluklarını belirler */
    display: flex; /* İçerikleri dikey dizmek için esnek kutu kullanır */
    flex-direction: column; /* Tarih, başlık, metin ve butonu yukarıdan aşağıya doğru sıralar */
    gap: 1rem; /* Elemanlar arasına dikey boşluk koyar */
    text-align: left; /* Blog yazılarını rahat okunması için sola hizalar */
} /* Yazı alanı bloğunu kapatır */

.enver-post-meta { /* Yazının tarih ve kategori bilgisi satırını seçer */
    display: flex; /* Tarih ve kategoriyi yan yana hizalar */
    align-items: center; /* Dikeyde ortalar */
    gap: 0.8rem; /* Aralarına boşluk koyar */
    flex-wrap: wrap; /* Dar ekranlarda taşmayı önler */
    font-size: 0.78rem; /* Yazı boyutunu ayarlar */
    font-weight: 700; /* Kalın font ağırlığı verir */
    letter-spacing: 0.2em; /* Teknolojik harf aralığı verir */
    text-transform: uppercase; /* Büyük harfe çevirir */
    color: #e63946; /* Siber kırmızı renk uygular */
} /* Meta bilgisi bloğunu kapatır */

.enver-post-title { /* Blog yazısının başlığını seçer */
    font-family: 'Orbitron', 'Oxanium', sans-serif; /* Sert teknolojik fontu uygular */
    font-size: clamp(1.3rem, 2.5vw, 1.85rem); /* Responsive başlık boyutu ayarlar */
    font-weight: 800; /* Kalın ve güçlü duruş verir */
    letter-spacing: 0.08em; /* Harf aralığını ayarlar */
    line-height: 1.3; /* Satır yüksekliğini dengeler */
} /* Yazı başlığı bloğunu kapatır */

.enver-post-title a { /* Blog başlığı içindeki bağlantıyı seçer */
    color: #ffffff; /* Başlık rengini beyaz yapar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    transition: color 0.2s ease; /* Renk değişimini yumuşatır */
} /* Başlık bağlantısı bloğunu kapatır */

.enver-post-title a:hover { /* Başlığın üzerine gelindiğinde rengini değiştirir */
    color: #e63946; /* Başlığı siber kırmızı yapar */
} /* Başlık hover bloğunu kapatır */

.enver-post-excerpt { /* Görselin altında aşağı doğru akan yazı özetini ve içeriğini seçer */
    font-family: 'Oxanium', 'Chakra Petch', sans-serif; /* Okunaklı teknolojik fontu uygular */
    font-size: 1.05rem; /* Rahat okunabilir yazı boyutu verir */
    line-height: 1.75; /* Satır aralığını ferah tutar */
    color: #cbd5e1; /* Göz yormayan açık metalik gri-beyaz tonu verir */
} /* Yazı özeti bloğunu kapatır */

.enver-post-excerpt p { /* Yazı içindeki paragrafları seçer */
    margin-bottom: 1.1rem; /* Paragraflar arasına aşağı doğru boşluk bırakır */
} /* Paragraf bloğunu kapatır */

.enver-post-footer { /* Kartın en altındaki 'Yazı Detayını Oku' butonu alanını seçer */
    margin-top: 0.5rem; /* Üstteki metinle arasına mesafe koyar */
    display: flex; /* Butonu hizalamak için esnek kutu açar */
    align-items: center; /* Dikeyde ortalar */
    justify-content: flex-start; /* Butonu sola yaslar */
} /* Kart alt alanını kapatır */

.enver-single-wrapper { /* Yazı detay sayfasının (single.php) ana kapsayıcısını seçer */
    position: relative; /* Sabit arkaplanın üzerinde konumlandırır */
    z-index: 3; /* Katman sırasını üstte tutar */
    max-width: 920px; /* Detay sayfasının okuma genişliğini 920 piksel olarak sınırlar */
    margin: 0 auto; /* Detay kutusunu yatayda ortalar */
    padding: 6.5rem 1.5rem 5rem 1.5rem; /* Üst navigasyon çubuğunun altında kalacak şekilde boşluk verir */
} /* Detay sayfası kapsayıcısını kapatır */

.enver-back-bar { /* Yazı detay sayfasının üstündeki 'Bloga Dön' çubuğunu seçer */
    margin-bottom: 1.5rem; /* Altındaki yazı kartıyla mesafe bırakır */
    display: flex; /* Butonları yan yana dizer */
    justify-content: space-between; /* Geri butonunu sola, LinkedIn butonunu sağa yaslar */
    align-items: center; /* Dikeyde ortalar */
    flex-wrap: wrap; /* Mobil uyumluluk sağlar */
    gap: 1rem; /* Butonlar arası boşluk bırakır */
} /* Geri dönüş çubuğu bloğunu kapatır */

.enver-single-content { /* Yazı detayındaki tam metin alanını seçer */
    font-family: 'Oxanium', 'Chakra Petch', sans-serif; /* Teknolojik ve okunaklı font uygular */
    font-size: 1.12rem; /* Detay sayfasında daha büyük ve rahat okuma boyutu sağlar */
    line-height: 1.85; /* Satır yüksekliğini geniş tutar */
    color: #e2e8f0; /* Açık gümüş-beyaz metin rengi verir */
} /* Detay metin alanı bloğunu kapatır */

.enver-single-content p { /* Detay sayfasındaki paragrafları seçer */
    margin-bottom: 1.4rem; /* Paragraflar arasına aşağı doğru boşluk bırakır */
} /* Detay paragraf bloğunu kapatır */

.enver-single-content h2, .enver-single-content h3 { /* Yazı detayı içindeki alt başlıkları seçer */
    font-family: 'Orbitron', 'Oxanium', sans-serif; /* Sert teknolojik font uygular */
    color: #ffffff; /* Rengi beyaz yapar */
    margin: 2rem 0 1rem 0; /* Üstten ve alttan boşluk bırakır */
    letter-spacing: 0.1em; /* Harf aralığını açar */
    text-transform: uppercase; /* Büyük harf yapar */
} /* Detay alt başlık bloğunu kapatır */

@media (max-width: 768px) { /* Tablet ve mobil ekranlar (768px ve altı) için responsive kuralları başlatır */
    .enver-topbar { /* Mobilde üst navigasyon çubuğunu seçer */
        padding: 0.8rem 1rem; /* Mobilde çubuk iç boşluklarını daraltır */
    } /* Mobil üst çubuk bloğunu kapatır */
    .enver-brand { /* Mobilde marka yazısını seçer */
        font-size: 0.85rem; /* Mobilde marka yazı boyutunu küçültür */
        letter-spacing: 0.12em; /* Harf aralığını mobilde dengeler */
    } /* Mobil marka bloğunu kapatır */
    .enver-btn { /* Mobilde butonları seçer */
        padding: 0.6rem 1rem; /* Mobilde buton iç boşluklarını kompakt yapar */
        font-size: 0.74rem; /* Buton yazı boyutunu mobilde optimize eder */
    } /* Mobil buton bloğunu kapatır */
    .enver-content { /* Mobil ekranlarda ortadaki içerik kutusunu seçer */
        padding: 1.8rem 1.4rem; /* Mobilde iç boşlukları ekrana sığacak şekilde daraltır */
        width: 92%; /* DEĞİŞTİ: Kutu genişliği mobilde %92 olarak optimize edildi */
    } /* Mobil içerik kutusu bloğunu kapatır */
    .enver-title { /* Mobilde ana başlığı seçer */
        letter-spacing: 0.1em; /* Mobilde taşmayı önlemek için harf aralığını optimize eder */
    } /* Mobil ana başlık bloğunu kapatır */
    .enver-subtitle { /* Mobilde 'ÇOK YAKINDA BURDAYIZ' yazısını seçer */
        letter-spacing: 0.15em; /* Mobilde harf aralığını ekran genişliğine göre dengeler */
        padding-left: 0.15em; /* Merkezleme dengesini yeni harf aralığına göre günceller */
    } /* Mobil alt başlık bloğunu kapatır */
    .enver-post-body { /* Mobilde blog kartı yazı alanını seçer */
        padding: 1.4rem 1.2rem 1.8rem 1.2rem; /* Mobilde blog yazısı iç boşluklarını dengeler */
    } /* Mobil blog yazı alanı bloğunu kapatır */
    .enver-bg { /* Mobilde arkaplan görselini seçer */
        background-position: 50% center; /* Görselin merkezindeki Enver Paşa portresinin mobilde de tam ortada kalmasını garantiler */
    } /* Mobil arkaplan bloğunu kapatır */
} /* Mobil medya sorgusu bloğunu kapatır */