/* =========================================
HAKKIMIZDA BÖLÜMÜ CSS (.hakkimizda kapsayıcısı)
========================================= *//* Ana Kapsayıcı ve Değişkenler */
.hakkimizda {
--text-dark: #0b1526; /* Başlıklar için koyu lacivert/siyah */
--text-body: #4a4a4a; /* Paragraf metni rengi */
--line-color: #cbd5e1; /* Buton kenarlığı ve ayırıcı çizgi rengi */background-color: #ffffff;
font-family: var(--font-sans);
padding: 100px 20px; /* Üstten alttan geniş boşluk */
line-height: 1.8; /* Okunabilirliği artıran satır yüksekliği */
}/* Diğer stillerin karışmaması için Reset işlemi sadece bu div içinde yapılıyor */
.hakkimizda *,
.hakkimizda *::before,
.hakkimizda *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}/* İçerik Ortalayıcı (Maksimum genişlik) */
.hakkimizda .hakkimizda-container {
max-width: 776px;
margin: 0 auto;
text-align: center; /* Başlık ve buton alanlarını ortalar */
}/* Ana Başlık */
.hakkimizda-title {
color: var(--text-dark);
font-size: 22px;
font-weight: 500;
letter-spacing: 8px; /* Harfler arası geniş boşluk */
text-transform: uppercase;
margin-bottom: 50px;
text-align: center;
}/* Paragraf Alanı */
.hakkimizda .hakkimizda-content {
text-align: left; /* Metin sola dayalı kalsın (okunabilirlik için) */
font-size: 15px;
color: var(--text-body);
}.hakkimizda .hakkimizda-content p {
margin-bottom: 30px;
text-align: justify;
line-height: 1.6;
color: #334155;
font-size: 15px;
}.hakkimizda .hakkimizda-content p:last-child {
margin-bottom: 0;
}/* Metin İçi Link (military superiority) */
.hakkimizda .hakkimizda-content a {
color: var(--text-body);
text-decoration: underline;
text-underline-offset: 4px; /* Alt çizginin metne olan uzaklığı */
text-decoration-thickness: 1px;
transition: color 0.3s ease;
}.hakkimizda .hakkimizda-content a:hover {
color: var(--text-dark);
}/* --- İndirme / Rapor Alanı --- */
.hakkimizda .hakkimizda-download {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
}/* İndirme Başlığı */
.hakkimizda .hakkimizda-download-title {
color: var(--text-dark);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}/* İnce Ayırıcı Çizgi */
.hakkimizda .hakkimizda-divider {
width: 30px;
height: 1px;
background-color: #a0aec0;
margin-bottom: 30px;
}/* İndirme Butonu */
.hakkimizda .hakkimizda-btn {
display: inline-block;
padding: 15px 35px;
border: 1px solid var(--line-color);
color: var(--text-dark);
text-decoration: none;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}.hakkimizda .hakkimizda-btn:hover {
background-color: #f8fafc;
border-color: #94a3b8;
}/* Mobil Uyumluluk */
@media (max-width: 768px) {
.hakkimizda {
padding: 60px 20px;
}.hakkimizda .hakkimizda-title {
font-size: 18px;
letter-spacing: 4px;
}
}/**//* Genel Ayarlar */
* {
box-sizing: border-box;
}/* Ana Kapsayıcı - Yan yana dizilimi sağlar */
.makaleler-kapsayici {
display: flex;
justify-content: center;
gap: 30px; /* Kartlar arası boşluk */
padding: 40px 20px;
max-width: 1400px; /* Maksimum genişlik */
margin: 0 auto;
}/* Tekil Makale Kartı */
.makale-karti {
display: flex;
gap: 20px; /* Resim ile metin arası boşluk */
flex: 1; /* 3 kartın da eşit genişlikte olmasını sağlar */
min-width: 0; /* Taşmaları engellemek için önemli */
}/* Görsel Alanı */
.makale-gorsel {
flex-shrink: 0;
width: 140px; /* Görsel genişliği */
height: 147px; /* Görsel yüksekliği (Kare) */
}.makale-gorsel img {
width: 100%;
height: 100%;
object-fit: cover; /* Resmi ezmeden kareye sığdırır */
}/* İçerik Alanı Kapsayıcısı */
.makale-icerik {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0; /* Taşan metinlerin üç nokta olabilmesi için gerekli */
}/* -------------------------------------
İSTEDİĞİNİZ TEK SATIR KURALI
------------------------------------- */
.makale-kategori {
font-size: 13px;
color: #1a2530; /* Koyu lacivert/siyah */
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0 0 10px 0;/* Tek satır ve üç nokta (...) yapan kısım */
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}/* Aradaki Gri Çizgi */
.ayirici-cizgi {
height: 1px;
background-color: #d1d5db;
margin-bottom: 7px;
width: 100%;
}/* -------------------------------------
İSTEDİĞİNİZ 3 SATIR KURALI
------------------------------------- */
.makale-baslik {
font-size: 12px;
color: #4b5563; /* Gri tonu */
font-weight: 400;
line-height: 1.5;
margin: 0 0 15px 0;/* 3 Satır ve üç nokta (...) yapan kısım */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;/* Başlık 1 veya 2 satır olsa bile yüksekliğin sabit kalmasını sağlar,
böylece butonlar her kartta aynı hizada olur. */
min-height: calc(12px * 1.5 * 3);
}/* Alt Bilgi (Tarih ve Butonu dibe iter) */
.makale-alt-bilgi {
margin-top: auto; /* Bu özellik tarih ve butonu her zaman kartın en altına sabitler */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}/* Tarih */
.makale-tarih {
font-size: 13px;
color: #6b7280;
}/* READ MORE Butonu */
.btn-read-more {
display: inline-block;
border: 1px solid #1a2530;
color: #1a2530;
background-color: transparent;
padding: 3px 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.2s ease-in-out;
}/* Butonun üzerine fare gelince */
.btn-read-more:hover {
background-color: #1a2530;
color: #ffffff;
}/* Mobil Cihazlar İçin Uyumluluk (Responsive) */
@media (max-width: 1024px) {
.makaleler-kapsayici {
flex-direction: column; /* Mobilde kartları alt alta dizer */
align-items: center;
}
.makale-karti {
width: 100%;
max-width: 600px;
}
}@media (max-width: 480px) {
.makale-karti {
flex-direction: column; /* Çok küçük ekranlarda resmi üste, yazıyı alta alır */
}
.makale-gorsel {
width: 100%;
height: 200px;
}
.makale-baslik {
min-height: auto; /* Mobilde boşluğu kaldırır */
}
}/**//* Genel font ayarı (Google Fonts vb. kullanabilirsiniz) */
/* Ana Kapsayıcı */
.gorevlerim {
width: 100%;
height: auto;
}
.gorevlerim .container {
display: flex;
margin: 0 auto; /* Sayfayı ortala */
padding: 100px 20px; /* Üstten alttan boşluk */
gap: 50px; /* Sol ve sağ sütun arası boşluk *//* ÇOK ÖNEMLİ: flex-start verilmezse sol taraf sağ ile aynı boya uzar ve sticky çalışmaz */
align-items: flex-start;
}/* -------------------------------------
SOL TARAF (SABİT KALACAK ALAN)
---------------------------------------- */
.gorevlerim .gorevlerim-sol {
width: 50%;
/* KAYDIRMA (SCROLL) SABİTLEME KODLARI */
position: -webkit-sticky; /* Safari desteği için */
position: sticky;
top: 150px; /* Ekranın üstünden ne kadar aşağıda sabitleneceği */
text-align: center;
}.gorevlerim .gorevlerim-baslik {
font-size: 1.5rem;
letter-spacing: 2px;
text-transform: uppercase;
color: #2d3436; /* Koyu gri/lacivert renk */
font-weight: 500;
margin: 0;
text-align: center;
}.gorevlerim .gorevlerim-sol img{
width: auto;
height: 200px;
}/* -------------------------------------
SAĞ TARAF (KAYAN LİSTE ALANI)
---------------------------------------- */
.gorevlerim .gorevlerim-sag {
width: 50%;
display: flex;
flex-direction: column;
gap: 60px; /* Maddeler arası boşluk */
}.gorevlerim .gorevlerim-madde {
display: flex;
flex-direction: column;
}.gorevlerim .gorevlerim-numara {
font-size: 20px;
font-weight: 600;
color: #2d3436;
margin-bottom: 15px;
}.gorevlerim .gorevlerim-madde p {
font-size: 15px;
line-height: 1.4;
color: #636e72; /* Daha açık gri metin rengi */
margin: 0;
}/* Mobil Cihazlar İçin Duyarlılık (Responsive) */
@media (max-width: 768px) {
.gorevlerim {
flex-direction: column; /* Yan yana değil alt alta sırala */
padding: 50px 20px;
}.gorevlerim .gorevlerim-sol {
width: 100%;
position: static; /* Mobilde sabitlemeyi iptal et (opsiyonel) */
margin-bottom: 40px;
}.gorevlerim .gorevlerim-sag {
width: 100%;
}
}/* =========================================
.home-galeri STİLLERİ (İzole Edilmiş)
========================================= */.home-galeri {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Masaüstünde yan yana 3 eşit parça */
gap: 10px; /* Resimler arasındaki boşluk (görseldeki tasarıma uygun) */
width: 100%;
margin: 0 auto; /* Sayfayı ortalar */
padding: 20px 0 70px; /* Üstten alttan hafif boşluk */
}.home-galeri-item {
margin: 0; /* Tarayıcı varsayılan figure boşluğunu sıfırlar */
padding: 0;
overflow: hidden; /* Resim yakınlaştığında dışarı taşmasını engeller */
position: relative;
background-color: #f5f5f5; /* Resim yüklenene kadar görünen şık arka plan rengi */
}.home-galeri-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* Resmi kutuya kırparak sığdırır, oranları bozup ezmez */
aspect-ratio: 3 / 2; /* Sitenizdeki resimlerin boyutları farklı olsa bile hepsini aynı dikdörtgen oranda hizalar */
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Şık ve yumuşak bir animasyon */
}/* Şık Hover (Üzerine Gelme) Efekti */
.home-galeri-item:hover img {
transform: scale(
1.04
); /* Üzerine gelince resmi çok hafif ve yavaşça büyütür */
}/* =========================================
RESPONSİVE (MOBİL UYUMLULUK) AYARLARI
========================================= *//* Tablet ve küçük dizüstü bilgisayarlar için (992px altı) */
@media screen and (max-width: 992px) {
.home-galeri {
grid-template-columns: repeat(2, 1fr); /* 2 kolona düşer */
gap: 12px;
}
}/* Telefonlar için (768px altı) */
@media screen and (max-width: 768px) {
.home-galeri {
grid-template-columns: 1fr; /* Mobilde alt alta tek kolon olur */
gap: 15px;
padding: 15px; /* Mobilde ekran kenarlarına yapışmaması için boşluk */
}
}/**//* Ana Arka Plan ve Genel Boşluklar (Nefes alan tasarım) */
.zarif-alan-kapsayici {
margin: 0 auto;
padding: 0px 20px 80px; /* Üstten alttan bolca boşluk */
display: flex;
flex-direction: column;
overflow: hidden;
}/* Satır Düzeni */
.zarif-alan-kapsayici .zarif-alan-satir {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px; /* Görsel ve metin arası geniş boşluk */
border-top: 1px solid #e2e8f0; /* Zarif bir ayırıcı çizgi */
padding: 50px 0; /* Satırların üstünde ve altında bolca boşluk */
}/* Çaprazlama (Ters Satır) */
.zarif-alan-kapsayici .zarif-alan-ters {
flex-direction: row-reverse;
}/* Görsel ve İçerik Genişlik Oranları */
.zarif-alan-kapsayici .zarif-alan-gorsel-kutu {
width: 50%;
position: relative;
}.zarif-alan-kapsayici .zarif-alan-icerik {
width: 45%; /* Metin kutusu biraz daha dar, daha dergi vari bir görünüm için */
display: flex;
flex-direction: column;
justify-content: center;
}/* Görsel Tasarımı - Daha yumuşak, çerçevesiz ama derinlikli */
.zarif-alan-kapsayici .zarif-alan-gorsel-kutu img {
width: 100%;
height: 300px;
object-fit: contain;
border-radius: 4px; /* Çok keskin olmasın ama çok yuvarlak da olmasın (kibar bir radius) */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04); /* Çok çok hafif, zarif bir gölge */
display: block;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}/* Zarif bir hover efekti */
.zarif-alan-kapsayici .zarif-alan-gorsel-kutu:hover img {
transform: scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}/* Tipografi - Başlık üstü ufak etiket */
.zarif-alan-kapsayici .zarif-alan-etiket {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 3px;
color: #9e8a78; /* Soft, zarif bir bej/kahve tonu */
margin-bottom: 20px;
font-weight: 400;
display: block;
}/* Tipografi - Ana Başlık */
.zarif-alan-kapsayici .zarif-alan-baslik {
font-size: 25px;
font-weight: 700;
color: #2c3135;
margin: 0 0 15px 0;
line-height: 1.15;
}/* Tipografi - Paragraf Metni */
.zarif-alan-kapsayici .zarif-alan-metin {
font-size: 16px;
line-height: 1.4;
font-weight: 300;
color: #6c757d;
margin: 0;
}/* =========================================
MOBİL (Telefon ve Tablet Görünümleri)
========================================= */
@media (max-width: 992px) {
.zarif-alan-kapsayici .zarif-alan-baslik {
font-size: 2.2rem;
}
}@media (max-width: 1200px) {
.zarif-alan-kapsayici {
padding: 20px 20px;
}.zarif-alan-kapsayici .zarif-alan-metin {
font-size: 15px;
line-height: 1.4;
font-weight: 300;
color: #6c757d;
margin: 0;
text-align: justify;
}/* HTML'deki sıra sayesinde resim otomatik üstte kalır */
.zarif-alan-kapsayici .zarif-alan-satir,
.zarif-alan-kapsayici .zarif-alan-ters {
flex-direction: column;
gap: 40px;
}.zarif-alan-kapsayici .zarif-alan-gorsel-kutu,
.zarif-alan-kapsayici .zarif-alan-icerik {
width: 100%;
}/* Mobilde yazıyı hafif içeri çekerek okumayı kolaylaştırır */
.zarif-alan-kapsayici .zarif-alan-icerik {
padding: 0 10px;
}.zarif-alan-kapsayici .zarif-alan-baslik {
font-size: 26px;
margin-bottom: 20px;
}.gorevlerim .container {
display: block;
margin: 0 auto;
padding: 30px 20px;
gap: 50px;
align-items: flex-start;
}
}/**//* =========================================
FFOOTER - ŞIK & MİNİMALİST ALT BİLGİ
========================================= *//* Ana Footer Alanı */
.ffooter {
background-color: #161616; /* Çok şık ve premium duran koyu antrasit/siyah tonu */
padding: 80px 20px; /* Üstten ve alttan geniş nefes alma boşluğu */
}/* İçeriği Ortalayan Kapsayıcı */
.ffooter .ffooter-kapsayici {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center; /* Her şeyi tam ortaya hizalar */
justify-content: center;
}/* Ünvan / Marka İsmi Tasarımı */
.ffooter .ffooter-unvan {
color: #ffffff;
font-size: 15px;
font-weight: 300;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 35px 0;
text-align: center;
}/* Sosyal Medya İkonlarının Kapsayıcısı */
.ffooter .ffooter-sosyal {
display: flex;
gap: 30px; /* İkonlar arası geniş ve ferah boşluk */
align-items: center;
}/* Her Bir Sosyal Medya Linki/İkonu */
.ffooter a {
color: #777777; /* Başlangıçta zarif bir gri tonu */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Çok yumuşak geçiş animasyonu */
}/* İçerideki SVG (İkon) Çiziminin Ayarı */
.ffooter a svg {
width: 22px; /* İkon boyutu */
height: 22px;
fill: currentColor; /* Rengini kapsayıcı a etiketinden alır */
}/* Fare ile İkonun Üzerine Gelindiğinde (Hover) */
.ffooter a:hover {
color: #ffffff; /* İkon parlak beyaza döner */
transform: translateY(-4px); /* Zarifçe yukarı doğru zıplama/kalkma efekti */
}