/* ============================================================
   blog.css — Blog & Arama modulu (blogPages / searchPage)
   Bu dosya YALNIZCA blog ve arama sayfalarinda yuklenir; bu yuzden
   secicilerin ayrica scope'lanmasina gerek yoktur.

   Renkler --custom-* degiskenleriyle yonetilir. Tema (safeair) acik
   zeminli, mavi accent'lidir. Temayi degistirmek icin sadece asagidaki
   :root degerlerini guncellemen yeterli.
   ============================================================ */

:root {
    /* Tema renkleri (safeair — acik tema / mavi accent) */
    --custom-color-1: #0081c9;   /* ana accent (mavi) */
    --custom-color-2: #022b6d;   /* koyu mavi (hover / aktif) */
    --custom-color-3: #666666;   /* soluk metin */
    --custom-color-4: #f7f7f7;   /* acik yuzey (kart / rozet zemini) */
    --custom-text-1: var(--font-default, 'Outfit', sans-serif);
    --custom-text-2: var(--font-heading, 'Outfit', sans-serif);

    /* blog.css ic kullanim (acik tema) */
    --kb-bg: #ffffff;
    --kb-card: #ffffff;
    --kb-card-2: #f7f7f7;
    --kb-border: #e7e7e7;
    --kb-text: #0e0e0e;
    --kb-muted: #666666;
}

/* ---------- Genel ---------- */
.inner-header-section,
.blog2,
.blog-left-section-area,
.service1,
main {
    color: var(--kb-text);
    font-family: var(--custom-text-1);
}

/* Bolum bosluklari (template utiliteleri) */
.sp3 { padding: 80px 0; }
.sp6 { padding: 100px 0; }

/* Dikey bosluk yardimcilari */
.space12 { height: 12px; }
.space16 { height: 16px; }
.space20 { height: 20px; }
.space24 { height: 24px; }
.space32 { height: 32px; }
.space40 { height: 40px; }

/* ---------- Sayfa basligi (hero) ---------- */
.inner-header-section {
    position: relative;
    background: linear-gradient(120deg, var(--custom-color-2) 0%, var(--custom-color-1) 100%);
    padding: 170px 0 70px;
    text-align: center;
    border-bottom: 1px solid var(--kb-border);
    overflow: hidden;
}

.inner-header-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
}

.about-inner-header h1 {
    color: #fff;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.about-inner-header a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .3s ease;
}

.about-inner-header a:hover { color: #fff; }

.about-inner-header i {
    color: #fff;
    margin: 0 6px;
    font-size: 13px;
}

.about-inner-header span.fw-bold { color: #fff; }

/* ---------- Blog liste kartlari (blog2) ---------- */
.blog2-box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--kb-card);
    border: 1px solid var(--kb-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Dikey boşluk kartta değil, grid hücresinde (sütunda) olmalı.
   Aksi halde height:100% + margin-bottom bir alt satıra taşıp çakışır. */
.blog2 .col-lg-6 {
    margin-bottom: 26px;
}

.blog2-box:hover {
    transform: translateY(-6px);
    border-color: var(--custom-color-1);
    box-shadow: 0 22px 45px rgba(2, 43, 109, .12);
}

.blog2-box .img {
    position: relative;
    overflow: hidden;
}

.blog2-box .img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.blog2-box:hover .img img { transform: scale(1.06); }

/* tarih rozeti (takvim ikonlu pill) */
.blog2 .blog2-box .img .date {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto !important;
    background: rgba(255, 255, 255, .95) !important;
    color: var(--custom-color-2) !important;
    font-family: var(--custom-text-1);
    font-size: 13px !important;
    font-weight: 600;
    padding: 7px 15px !important;
    line-height: 1 !important;
    border-radius: 30px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12) !important;
    z-index: 2;
}

.blog2 .blog2-box .img .date i { color: var(--custom-color-1); font-size: 13px; }

/* icerik alani */
.blog2-box .hadding {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px 22px 24px;
}

/* baslik (inline <style>'daki rengi gecersiz kilar) */
.blog2 .blog2-box .hadding h2 { margin: 0; }

.blog2 .blog2-box .hadding h2 a {
    color: var(--kb-text) !important;
    font-family: var(--custom-text-2);
    font-size: 20px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    display: inline-block;
    transition: color .3s ease;
}

.blog2 .blog2-box .hadding h2 a:hover { color: var(--custom-color-1) !important; }

/* ozet metni (3 satir) */
.blog2-box .excerpt {
    color: var(--kb-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 12px 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Read More" (dairesel ok) */
.blog2-box .read-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--custom-color-1);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: gap .3s ease, color .3s ease;
}

.blog2-box .read-more i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 129, 201, .1);
    transition: background .3s ease, color .3s ease;
}

.blog2-box:hover .read-more { gap: 14px; }
.blog2-box:hover .read-more i { background: var(--custom-color-1); color: #fff; }

/* ---------- Sayfalama ---------- */
.pagination-area { margin-top: 20px; }

.pagination-area .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination-area .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    background: var(--kb-card);
    border: 1px solid var(--kb-border);
    color: var(--kb-text);
    border-radius: 8px;
    text-decoration: none;
    transition: all .3s ease;
}

.pagination-area .page-link:hover {
    border-color: var(--custom-color-1);
    color: var(--custom-color-1);
}

.pagination-area .page-link.active {
    background: var(--custom-color-1);
    border-color: var(--custom-color-1);
    color: #fff;
}

/* ---------- Sidebar (arama + kategoriler) ---------- */
.defense-sidebar h3,
.blog-left-section-area h3,
.blog-post-area h3 {
    color: var(--kb-text);
    font-size: 19px;
    margin: 0;
    position: relative;
    padding-bottom: 12px;
}

.search-area h3::after,
.catagories-boxarea h3::after,
.blog-post-area h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--custom-color-1);
}

.search-area,
.catagories-boxarea,
.blog-post-area,
.portfolio {
    background: var(--kb-card);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--box-shadow-regular, 0 2px 12px 0 #e7e7e7);
}

/* arama formu */
.search-area form { display: flex; gap: 8px; }

.search-area input {
    flex: 1;
    min-width: 0;
    background: var(--kb-card-2);
    border: 1px solid var(--kb-border);
    color: var(--kb-text);
    padding: 12px 14px;
    border-radius: 8px;
    outline: none;
}

.search-area input::placeholder { color: #999; }
.search-area input:focus { border-color: var(--custom-color-1); }

.search-area button {
    background: var(--custom-color-1);
    border: none;
    color: #fff;
    width: 48px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .3s ease;
}

.search-area button:hover { background: var(--custom-color-2); }

/* kategori listesi */
.catagories-boxarea ul { list-style: none; margin: 0; padding: 0; }
.catagories-boxarea li { border-bottom: 1px solid var(--kb-border); }
.catagories-boxarea li:last-child { border-bottom: none; }

.catagories-boxarea li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--kb-muted);
    text-decoration: none;
    padding: 12px 0;
    transition: color .3s ease, padding-left .3s ease;
}

.catagories-boxarea li a:hover { color: var(--custom-color-1); padding-left: 6px; }
.catagories-boxarea li a span { color: var(--custom-color-1); font-size: 12px; }

/* ---------- Blog detay: makale ---------- */
.blog-sidebar-area .img1 {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--kb-border);
}

.blog-sidebar-area > .img1 img {
    width: 100%;
    height: auto;
    display: block;
}

/* tarih/yazar bilgi rozetleri */
.blog-info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.blog-info .blog-info-date { color: var(--kb-muted) !important; font-family: var(--custom-text-1); }

.blog-info .blog-info-text {
    background: var(--custom-color-1) !important;
    color: #fff !important;
    border-radius: 6px;
    font-family: var(--custom-text-1);
}

/* Icindekiler (content navigation) */
.content-navigation {
    border: 1px solid var(--kb-border) !important;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(2, 43, 109, .08) !important;
    overflow: hidden;
}

.content-navigation > div[style*="background"] {
    background: var(--kb-card-2) !important;
    border-color: var(--kb-border) !important;
}

.content-navigation h6,
.content-navigation #navTitle { color: var(--kb-text) !important; }

.content-navigation .border-top {
    background: var(--kb-card) !important;
    border-top-color: var(--kb-border) !important;
}

.content-navigation .nav-item-link { color: var(--kb-muted) !important; }
.content-navigation .nav-item-link:hover { color: var(--custom-color-1) !important; }

/* ---------- Makale govdesi (ham HTML) ---------- */
.blog-content {
    color: #444444;
    font-size: 16px;
    line-height: 1.85;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.blog-content > *:first-child { margin-top: 0; }

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    color: var(--kb-text);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.8em 0 .6em;
    font-family: var(--custom-text-2);
}

.blog-content h1 { font-size: 30px; }
.blog-content h2 { font-size: 26px; padding-bottom: 8px; border-bottom: 1px solid var(--kb-border); }
.blog-content h3 { font-size: 22px; }
.blog-content h4 { font-size: 19px; }
.blog-content h5 { font-size: 17px; }
.blog-content h6 { font-size: 16px; }

.blog-content p { margin: 0 0 1.2em; }

.blog-content a {
    color: var(--custom-color-1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-content a:hover { color: var(--custom-color-2); }

.blog-content strong,
.blog-content b { color: var(--kb-text); }

.blog-content ul,
.blog-content ol { margin: 0 0 1.2em; padding-left: 1.5em; }

.blog-content li { margin-bottom: .55em; }
.blog-content ul li::marker { color: var(--custom-color-1); }
.blog-content ol li::marker { color: var(--custom-color-1); font-weight: 700; }

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 1em 0;
}

.blog-content blockquote {
    margin: 0 0 1.4em;
    border-left: 4px solid var(--custom-color-1);
    background: var(--kb-card-2);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    color: var(--kb-muted);
}

.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.6em;
    font-size: 15px;
}

.blog-content th,
.blog-content td {
    border: 1px solid var(--kb-border);
    padding: 10px 14px;
    text-align: left;
}

.blog-content thead th { background: var(--kb-card-2); color: var(--kb-text); }

.blog-content hr { border: none; height: 1px; background: var(--kb-border); margin: 2em 0; }

/* ---------- Etiket / kategori rozetleri & sosyal ---------- */
.tags-area h3,
.social-area h4 { color: var(--kb-text); margin: 0; }

.tags-area ul,
.social-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tags-area li a {
    display: inline-block;
    color: var(--custom-color-1);
    background: rgba(0, 129, 201, .08);
    border: 1px solid rgba(0, 129, 201, .25);
    padding: 6px 16px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    transition: all .3s ease;
}

.tags-area li a:hover { background: var(--custom-color-1); color: #fff; }

.social-area { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.social-area li a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kb-border);
    border-radius: 50%;
    color: var(--kb-text);
    text-decoration: none;
    transition: all .3s ease;
}

.social-area li a:hover {
    background: var(--custom-color-1);
    border-color: var(--custom-color-1);
    color: #fff;
    transform: translateY(-3px);
}

/* ---------- Yazar kutusu (portfolio) ---------- */
.portfolio { text-align: center; }

.portfolio .img1 { margin: 0 auto; border-radius: 10px; overflow: hidden; }
.portfolio .textarea h3 { color: var(--kb-text); }
.portfolio .textarea p { color: var(--kb-muted); line-height: 1.7; font-size: 14px; }

.portfolio a.readmore { color: var(--kb-text) !important; text-decoration: none; font-weight: 600; }
.portfolio a.readmore:hover { color: var(--custom-color-1) !important; }

.portfolio ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.portfolio ul li a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kb-border);
    border-radius: 50%;
    color: var(--kb-text);
    text-decoration: none;
    transition: all .3s ease;
}

.portfolio ul li a:hover { background: var(--custom-color-1); border-color: var(--custom-color-1); color: #fff; }

/* ---------- Okumaya devam et (recent posts) ---------- */
.blog-post-area .recent-posts-area .post-content { position: relative; }

.blog-post-area .post-content .date {
    display: block;
    color: var(--custom-color-1);
    font-size: 12px;
    margin-bottom: 4px;
}

.blog-post-area .post-content a {
    color: var(--kb-text);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.45;
    transition: color .3s ease;
}

.blog-post-area .post-content a:hover { color: var(--custom-color-1); }

/* dikey timeline cizgisi/noktasi temaya uyarlanir */
.list-stlye-date .post-content::before { background: var(--kb-border) !important; }

.list-stlye-date .post-content::after {
    background: var(--custom-color-1) !important;
    border-color: #fff !important;
}

.list-stlye-date .post-content:hover::after { background: var(--custom-color-2) !important; }

/* ---------- SSS / Accordion ---------- */
.sss-head { color: var(--kb-text) !important; font-family: var(--custom-text-2); }

.faq3 .accordion-item {
    background: var(--kb-card);
    border: 1px solid var(--kb-border) !important;
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq3 .accordion-button {
    background: var(--kb-card);
    color: var(--kb-text);
    font-weight: 600;
    box-shadow: none;
    font-family: var(--custom-text-1);
}

.faq3 .accordion-button:not(.collapsed) {
    background: var(--kb-card-2);
    color: var(--custom-color-1);
    box-shadow: none;
}

.faq3 .accordion-button::after { filter: none; }
.faq3 .accordion-button:not(.collapsed)::after {
    filter: invert(38%) sepia(96%) saturate(1352%) hue-rotate(178deg) brightness(94%) contrast(101%);
}

.faq3 .accordion-button:focus {
    border-color: var(--custom-color-1);
    box-shadow: 0 0 0 .15rem rgba(0, 129, 201, .25);
}

.faq3 .accordion-body { background: var(--kb-card); color: var(--kb-muted); line-height: 1.7; }

/* ---------- Arama sonuc kartlari (service1) ---------- */
.service1 { background: var(--bg-gray, #f7f7f7) !important; }

.service1-box {
    background: var(--kb-card);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    padding: 28px 22px;
    height: 100%;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Dikey boşluk grid hücresinde; height:100% ile çakışmayı önler */
.service1 .col-lg-4 {
    margin-bottom: 24px;
}

.service1-box:hover {
    transform: translateY(-5px);
    border-color: var(--custom-color-1);
    box-shadow: 0 20px 45px rgba(2, 43, 109, .12);
}

.service1-box .icon {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--kb-border);
}

.service1-box h2 a,
.service1-box h2 { color: var(--kb-text) !important; font-family: var(--custom-text-2); }
.service1-box h2 a:hover { color: var(--custom-color-1) !important; }
.service1-box p { color: var(--kb-muted); line-height: 1.7; font-size: 14px; }

/* "Detaylar" / "Profili Incele" linkleri */
.learn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--custom-color-1);
    font-weight: 600;
    text-decoration: none;
    transition: gap .3s ease, color .3s ease;
}

.learn-more:hover { color: var(--custom-color-2); gap: 12px; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 991px) {
    .inner-header-section { padding: 130px 0 50px; }
    .sp3 { padding: 50px 0; }
    .sp6 { padding: 60px 0; }
    .defense-sidebar { margin-top: 30px; }
}