/* Genel Ayarlar ve Font */
body {
    font-family: 'Source Sans Pro', sans-serif;
    background: url('img/gray_pattern.gif') repeat;
    background-size: auto;
    color: #42464a;
}

/* Linkler */
a {
    color: #42464a;
    transition: color 0.3s ease;
    text-decoration: none;
}

a:hover {
    color: #111;
}

/* Navigasyon ve Logo */
.navarka { background: #fafafa; }
.logom, .iconrenk, .blog { color: #70086d; }
.logo2, .yazilar, .renkb, .navmenum i { color: #f80538; }

#navbarNav ul {
    list-style-type: none;
    padding: 0;
}

#navbarNav li {
    float: left;
}

.nav-link i {
    margin-right: 5px;
}

/* Header ve Giriş Bölümü */
.asktema {
    background: #f80538;
    color: #fff;
    margin-bottom: -7px;
    padding-top: 10px;
}

.girisumit {
    color: #fff;
    padding: 60px 0 40px;
}

.sgiris {
    background-color: #fff;
    padding: 10px 15px 10px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    border-radius: 4px;
}

.umit {
    background: url('img/arka.jpg') no-repeat center center / cover;
}

/* Kartlar ve Blog Alanı */
.arkas {
    box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07) !important;
}

.blogmakale {
    height: 135px;
    width: 100%;
    border-radius: 4px 0 0 4px;
    object-fit: cover;
}

.bcard {
    box-shadow: 0 12px 15px rgba(0,0,0,.1), 0 17px 50px rgba(0,0,0,.1);
    background: #fff;
}

/* Sosyal Medya İkonları */
.ustmenu .fa {
    padding: 8px;
    font-size: 16px;
    width: 32px;
    margin: 3px;
    text-align: center;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.ustmenu .fa:hover {
    color: #fff;
    transform: scale(1.1);
}

.ustmenu .fa-facebook { background: #3b5998; color: #fff; }
.ustmenu .fa-twitter { background: #55acee; color: #fff; }
.ustmenu .fa-linkedin { background: #007bb5; color: #fff; }
.ustmenu .fa-youtube { background: #b00; color: #fff; }
.ustmenu .fa-instagram { background: #125688; color: #fff; }

/* Gradyan Arka Planlar (Modern Yazım) */
.bg-ask {
    color: #fff;
    background: linear-gradient(110deg, #f80538 40%, transparent 30%), 
                radial-gradient(farthest-corner at 0 0, #ff053a 70%, #fc1747 70%);
}

.bg-s {
    color: #fff;
    background: linear-gradient(110deg, #70086d 40%, transparent 30%), 
                radial-gradient(farthest-corner at 0 0, #870883 70%, #941290 70%);
}

.alt-kisim {
    color: #fff;
    background: linear-gradient(110deg, #e60232 40%, transparent 30%), 
                radial-gradient(farthest-corner at 0 0, #eb0737 70%, #de0734 70%);
    padding: 65px 50px;
}

/* Footer Alanı */
.alt-kisim p.footer-links {
    font-size: 18px;
    font-weight: 700;
}

.alt-kisim .footer-links a:before {
    content: "·";
    font-size: 20px;
    padding-right: 5px;
}

.alt-kisim .footer-links .link-1:before { content: none; }

/* Responsive Düzenlemeler */
@media (max-width: 767.98px) {
    .altimgs { height: 180px; width: 100%; padding-bottom: 20px; }
    .umitblog { padding: 0 20px; }
}

@media (min-width: 768px) {
    .altimgs { height: 50px; }
}

@media (max-width: 600px) {
    .alt-kisim .footer-left, .alt-kisim .footer-right { text-align: center; float: none; }
    .alt-kisim .footer-right { margin-bottom: 20px; }
}

/* Görsel Hizalamaları */
img { max-width: 100%; height: auto; }
.alignright { float: right; margin: 0 0 1em 1em; }
.alignleft { float: left; margin: 0 1em 1em 0; }
.aligncenter { display: block; margin: auto; }

/* Yardımcı Sınıflar */
.font400 { font-weight: 400 !important; }
.font400 a { color: #25aae1; }
.font400 a:hover { color: #177298; }

<style>
    .site-footer {
        background-color: #1a1d20 !important; /* Daha derin bir koyu ton */
    }
    
    /* Sosyal Medya İkonları İçin Özel Tasarım */
    .social-icon {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.05);
        color: #adb5bd;
        border-radius: 50%;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .social-icon:hover {
        background: #dc3545; /* Kırmızı tema rengi */
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
    }

    /* Hover Efekti İçin Link Alt Çizgisi */
    .footer-info a {
        transition: opacity 0.2s;
    }
    .footer-info a:hover {
        opacity: 0.8;
    }
</style>

/* Footer Ana Stil - Renkli ve Dokulu Arka Plan */
.site-footer {
    /* Görseldeki gibi hafif kırık, soft bir ton */
    background-color: #f6f7fb; 
    
    /* Noktalı desen (Noktalar biraz daha belirgin olması için koyulaştırıldı) */
    background-image: radial-gradient(#d8dce6 1px, transparent 1px);
    background-size: 20px 20px; 
    
    color: #4a148c; /* Ana metin rengi morumsu koyu */
    padding: 70px 0 30px;
    border-top: 2px solid #e1e4e8;
    position: relative;
}

/* Logo Yanındaki Küçük Pembe Kutu */
.brand-rect {
    background: #ff3366;
    width: 14px;
    height: 28px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 12px;
}

/* Başlıklar ve Pembe Çizgi */
.widget-title {
    font-weight: 700;
    color: #311b92;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 8px;
}

.widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 3px;
    background: #ff3366;
    border-radius: 2px;
}

/* Sosyal Medya Kutuları */
.social-item {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-left: 10px;
    transition: 0.3s all ease;
}

/* Görseldeki soft renk tonları */
.social-item.fb { background: #fff1f1; color: #ff5252; }
.social-item.tw { background: #f0f4ff; color: #5c7cff; }
.social-item.ig { background: #fff0f6; color: #ff5c8d; }
.social-item.yt { background: #fffbe6; color: #ffd600; }

.social-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Linkler */
.widget-list a {
    color: #7e84a3;
    text-decoration: none;
    font-size: 14.5px;
    transition: color 0.2s;
}

.widget-list a:hover {
    color: #ff3366;
}
/* ==========================================================================
   Görsel Görünümlü Modern Footer Stil Kodları
   ========================================================================== */

/* 1. Temel Footer Konteyneri: Arka plan koyu lacivert/mavi */
.alt-kisim.main-footer {
    background-color: #0d1b3e; /* Koyu Lacivert Arka Plan (Görsele yakın ton) */
    color: #ffffff; /* Temel yazı rengi beyaz */
    padding: 60px 0 30px; /* İç boşluklar */
    font-family: Arial, sans-serif; /* Temiz yazı tipi */
}

/* 2. Ortak Konteyner Genişliği (Eğer temanın container classı farklıysa burayı düzenle) */
.footer-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 3. ÜST BÖLÜM: Logo ve Sosyal Medya Sıralaması */
.footer-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* İnce ayırıcı çizgi */
    padding-bottom: 20px;
    margin-bottom: 40px;
}

/* 3a. Logo Stili */
.footer-logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.logo-icon {
    background-color: #ff0000; /* Pembe kalp arka planı */
    color: #000000;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Hafif yuvarlak köşeli */
    margin-right: 12px;
}

.logo-text {
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
}

.logo-text:hover {
    color: #ff3366; /* Hoverda pembeleşen yazı */
}

/* 3b. Sosyal Medya İkonları Stili */
.footer-social-icons {
    display: flex;
    gap: 12px; /* İkonlar arası boşluk */
}

.social-icon-btn {
    width: 20px;
    height: 20px;
    background-color: #ff1414; /* İkon kutusu arka planı beyaz */
    color: #0d1b3e; /* İkon rengi koyu */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon-btn:hover {
    background-color: #ff3366; /* Hoverda pembe arka plan */
    color: #ffffff; /* Hoverda beyaz ikon */
    transform: translateY(-3px); /* Hoverda hafif yukarı kayma */
}

/* 4. ORTA BÖLÜM: Sütun Düzeni */
.footer-columns-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 eşit sütun */
    gap: 30px;
    margin-bottom: 40px;
}

/* 4a. Sütun Başlıkları (Başlık altındaki kırmızı çizgi dahil) */
.col-title {
    font-size: 1.1rem;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding-bottom: 12px; /* Çizgi ile yazı arası */
}

/* Başlık altındaki kısa kırmızı çizgi efekti */
.col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; /* Çizgi genişliği */
    height: 3px; /* Çizgi kalınlığı */
    background-color: #ff3366; /* Çizgi rengi kırmızı/pembe */
}

/* 4b. Sütun Metin ve Link Düzeni */
.col-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8); /* Metinler biraz daha soluk beyaz */
}

.col-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-links li {
    margin-bottom: 12px; /* Linkler arası boşluk */
}

.col-links a {
    color: rgba(255, 255, 255, 0.8); /* Link rengi soluk beyaz */
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.col-links a:hover {
    color: #ff3366; /* Hoverda kırmızı/pembe link */
    padding-left: 5px; /* Hoverda hafif sağa kayma efekti */
}

/* 4c. İkonlu Linkler Sütunu (Kaynak Sütunu) */
.col-links.icon-links li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.col-icon {
    color: #ff3366; /* İkon rengi kırmızı */
    font-size: 1.1rem;
    width: 16px; /* İkon genişliği hizalama için */
    text-align: center;
}

.col-links.icon-links span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

/* 5. ALT BÖLÜM: Copyright Çizgisi */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
}

.copyright-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* 6. MOBİL UYUMLULUK (Responsive) */
@media (max-width: 991px) {
    .footer-top-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2 sütun */
    }
}

@media (max-width: 576px) {
    .footer-columns-grid {
        grid-template-columns: 1fr; /* Mobilde 1 sütun */
        gap: 20px;
    }
}

/* Video Galeri Genel Alanı */
.video-gallery-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

/* Başlık Stili (Görseldeki Blog Yazıları stiline uygun) */
.section-title h2 {
    font-size: 28px;
    color: #333;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.section-title h2 span {
    color: #e91e63; /* Görseldeki pembe tonu */
}

.section-title p {
    color: #777;
    margin-bottom: 30px;
    font-size: 14px;
}

/* Video Izgara Yapısı */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Video Kutusu */
.video-item {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.video-item:hover {
    transform: translateY(-5px);
}

/* Video Oranı (16:9 Duyarlı Yapı) */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 5px;
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Video Alt Başlığı */
.video-item h3 {
    font-size: 16px;
    margin-top: 15px;
    color: #2c2c54;
    font-weight: 600;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}