/* ============================================================================
   BLOG (.co-blg) — liste (/{dil}/blog/) ve detay (/{dil}/blog/{seo}/)
   Kaynak: v382 arşivi "caliskan_ofis_blog.html" (liste düzeni birebir),
   detay sayfası aynı tasarım diliyle kuruldu.

   DİKKAT: anasayfadaki blog bandı redesign.css içinde ".co-blog__*" adlarını
   kullanıyor — bu dosya bilerek ".co-blg" kökünü kullanır, çakışmaz.
   ========================================================================== */
.co-blg {
    --bg:       #F5F4F2;
    --paper:    #FFFFFF;
    --surface:  #EDEAE5;
    --ink:      #2F2C28;
    --muted:    #716B64;
    --soft:     #68615B;
    --line:     rgba(47, 44, 40, .12);
    --line-2:   rgba(47, 44, 40, .18);
    --accent:   #6F9279;
    --red:      #D71920;
    --font:     Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;

    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}
.co-blg * { box-sizing: border-box; }
.co-blg a { color: inherit; text-decoration: none; }
.co-blg img { max-width: 100%; }
.co-blg button, .co-blg input { font-family: var(--font); }

/* Liste kapsayıcısı ile tam genişlik hero'nun metin bloğu AYNI sol hizada durur
   (hero-yazı padding'i aşağıda bu formülün aynısıyla hesaplanır). */
.co-blg .blg-kapsayici { width: min(1720px, calc(100% - 10vw)); margin: 0 auto; }

/* ============================== ÜST GİRİŞ ================================
   Hero TAM GENİŞLİK: mockup'taki yuvarlak kart, başlığın hemen altında ince bir
   zemin şeridi ve köşelerde üçüncü bir ton bırakıyordu (kesik bant etkisi).
   Servis / ortaklık / iletişim hero'larıyla aynı davranış: kenardan kenara. */
.co-blg .blg-hero {
    width: 100%;
    margin: 0 0 62px;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    min-height: 520px;
    overflow: hidden;
    background: var(--surface);
}
.co-blg .blg-hero-yazi {
    padding: 78px 52px 78px max(5vw, calc((100vw - 1720px) / 2));
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 12% 10%, rgba(126, 160, 136, .19), transparent 36%),
        linear-gradient(145deg, #F5F3F0, #E9E5DF);
}
.co-blg .blg-kicker {
    display: block;
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
}
.co-blg .blg-hero h1 {
    margin: 22px 0 24px;
    max-width: 680px;
    font-size: clamp(40px, 4.6vw, 82px);
    line-height: .96;
    font-weight: 400;
    letter-spacing: -.055em;
}
.co-blg .blg-hero h1 em { font-style: italic; font-weight: 400; }
.co-blg .blg-hero p { max-width: 600px; margin: 0; color: var(--soft); font-size: 15px; line-height: 1.75; }
.co-blg .blg-hero-medya {
    min-height: 520px;
    position: relative;
    background: #DCD7D0 center/cover no-repeat;
}
.co-blg .blg-hero-medya::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(47, 44, 40, .12), transparent 46%);
}

/* Arama kutusu */
.co-blg .blg-ara { display: flex; gap: 10px; margin-top: 30px; max-width: 470px; }
.co-blg .blg-ara input {
    flex: 1 1 auto;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: var(--ink);
    font-size: 14px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.co-blg .blg-ara input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(47, 44, 40, .07); background: #fff; }
.co-blg .blg-ara button {
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background .18s ease;
}
.co-blg .blg-ara button:hover { background: #171512; }

/* ============================== BÖLÜM BAŞLIĞI ============================ */
.co-blg .blg-bolum { padding-bottom: 84px; }
.co-blg .blg-bas {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-bottom: 30px;
}
.co-blg .blg-bas span { color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; }
.co-blg .blg-bas h2 {
    margin: 12px 0 0;
    max-width: 720px;
    font-size: clamp(30px, 3.5vw, 58px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.045em;
}
.co-blg .blg-filtreler { display: flex; flex-wrap: wrap; gap: 9px; }
.co-blg .blg-filtre {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.co-blg .blg-filtre:hover { border-color: var(--ink); }
.co-blg .blg-filtre.aktif { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Arama sonucu bilgisi */
.co-blg .blg-sonuc-bilgi {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 26px; padding: 15px 20px;
    border: 1px solid var(--line); background: var(--paper);
    font-size: 13.5px; color: var(--muted);
}
.co-blg .blg-sonuc-bilgi b { color: var(--ink); font-weight: 600; }
.co-blg .blg-sonuc-bilgi a { margin-left: auto; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ============================== KART IZGARASI ============================ */
.co-blg .blg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.co-blg .blg-kart {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    background: var(--paper);
    border: 1px solid rgba(47, 44, 40, .10);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.co-blg .blg-kart:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(47, 44, 40, .10); }
.co-blg .blg-kart-medya {
    position: relative;
    min-height: 210px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: end;
    padding: 26px;
    overflow: hidden;
    background: linear-gradient(135deg, #E7EDE8, #D7E2DA);
}
.co-blg .blg-kart:nth-child(3n+2) .blg-kart-medya { background: linear-gradient(135deg, #EFE6DE, #E5D4C7); }
.co-blg .blg-kart:nth-child(3n)   .blg-kart-medya { background: linear-gradient(135deg, #E8E5E1, #D8D2CC); }
.co-blg .blg-kart-medya img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.co-blg .blg-kart:hover .blg-kart-medya img { transform: scale(1.04); }
.co-blg .blg-kart-no { position: relative; z-index: 1; font-size: 80px; line-height: .8; color: rgba(47, 44, 40, .16); font-weight: 400; }
.co-blg .blg-kart-govde { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.co-blg .blg-kart-etiket { color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .15em; }
.co-blg .blg-kart h3 { margin: 14px 0 12px; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.18; font-weight: 400; letter-spacing: -.02em; }
.co-blg .blg-kart h3 font { color: inherit !important; }   /* eski kayıtlardaki <font> rengi kartta bozmasın */
.co-blg .blg-kart p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.co-blg .blg-kart-alt {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.co-blg .blg-kart-meta { color: #9A938B; font-size: 11.5px; letter-spacing: .02em; }
.co-blg .blg-kart-cta { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.co-blg .blg-kart:hover .blg-kart-cta { color: var(--red); }

/* Boş sonuç */
.co-blg .blg-bos {
    padding: 56px 32px;
    border: 1px dashed var(--line-2);
    background: var(--paper);
    text-align: center;
}
.co-blg .blg-bos h3 { margin: 0 0 10px; font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.co-blg .blg-bos p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.co-blg .blg-bos a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }

/* ============================== SAYFALAMA ================================ */
.co-blg .blg-sayfalama { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 40px; flex-wrap: wrap; }
.co-blg .blg-sayfalama a,
.co-blg .blg-sayfalama span {
    min-width: 42px;
    min-height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-2);
    font-size: 13px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.co-blg .blg-sayfalama a:hover { border-color: var(--ink); }
.co-blg .blg-sayfalama .aktif { background: var(--ink); border-color: var(--ink); color: #fff; }
.co-blg .blg-sayfalama .bosluk { border: 0; min-width: 20px; color: var(--muted); }

/* ============================== CTA BANDI ================================ */
.co-blg .blg-cta {
    margin-top: 62px;
    padding: 48px 52px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    background: var(--ink);
    color: #fff;
}
.co-blg .blg-cta span { color: #BFD3C4; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; }
.co-blg .blg-cta h2 { margin: 12px 0 0; font-size: clamp(26px, 2.8vw, 42px); font-weight: 400; letter-spacing: -.035em; }
.co-blg .blg-cta a {
    min-height: 52px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    transition: transform .2s ease;
}
.co-blg .blg-cta a:hover { transform: translateY(-2px); }

/* ============================== DETAY SAYFASI ============================ */
/* Detay sayfası ölçüsü: 1540 kolonunda metin 780'de kalınca yan sütunla arasında
   geniş bir boşluk kalıyordu. Kapsayıcı daraltıldı, metin kolonu kolonu doldurur. */
.co-blg .blg-crumbs {
    width: min(1360px, calc(100% - 64px));
    margin: 0 auto;
    padding: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11.5px;
    color: var(--muted);
}
.co-blg .blg-crumbs a:hover { color: var(--ink); }
.co-blg .blg-crumbs i { font-style: normal; opacity: .5; }
.co-blg .blg-crumbs span { color: var(--ink); }

/* Başlık bloğu kapak ve gövdeyle AYNI sol hizada durur; genişlik h1'e verilir
   (max-width bloğa verilirse auto kenar boşluğu onu ortalayıp kapaktan kaydırıyor) */
.co-blg .blg-yazi-bas { width: min(1360px, calc(100% - 64px)); margin: 26px auto 0; }
.co-blg .blg-yazi-bas h1 {
    margin: 16px 0 0;
    font-size: clamp(32px, 4vw, 62px);
    line-height: 1.03;
    font-weight: 400;
    letter-spacing: -.045em;
}
.co-blg .blg-yazi-bas h1 font { color: inherit !important; }
.co-blg .blg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 12.5px;
}
.co-blg .blg-meta i { font-style: normal; opacity: .45; }

.co-blg .blg-kapak {
    width: min(1360px, calc(100% - 64px));
    margin: 34px auto 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--surface);
}
.co-blg .blg-kapak img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Gövde: içerik panelden HTML olarak gelir, tipografi buradan verilir */
.co-blg .blg-govde {
    width: min(1360px, calc(100% - 64px));
    margin: 46px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 52px;
    align-items: start;
    padding-bottom: 76px;
}
/* Metin kolonu genişliğini doldurur (max-width YOK) — aksi halde yan sütunla
   arasında ~400px ölü boşluk kalıyordu. */
.co-blg .blg-metin { font-size: 17px; line-height: 1.8; color: #3B3731; }
/* Yazılar panele çoğunlukla Word/ChatGPT'den YAPIŞTIRILIYOR ve satır içinde
   font-family (Söhne, system-ui…), text-align:justify, white-space-collapse
   taşıyor. Bunlar sitenin tipografisini bozduğu için gövde içinde etkisizleştirilir;
   içeriğin kendisine dokunulmaz. Renk/kalınlık gibi bilinçli olabilecek biçimler
   korunur. */
.co-blg .blg-metin,
.co-blg .blg-metin * {
    font-family: var(--font) !important;
    white-space: normal !important;
}
.co-blg .blg-metin p,
.co-blg .blg-metin li,
.co-blg .blg-metin div { text-align: left !important; }
.co-blg .blg-metin > *:first-child { margin-top: 0; }
.co-blg .blg-metin p { margin: 0 0 22px; }
.co-blg .blg-metin h2 {
    margin: 44px 0 16px;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.035em;
    color: var(--ink);
}
.co-blg .blg-metin h3 {
    margin: 34px 0 12px;
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ink);
}
.co-blg .blg-metin h4 { margin: 26px 0 10px; font-size: 17px; font-weight: 600; color: var(--ink); }
.co-blg .blg-metin strong, .co-blg .blg-metin b { font-weight: 600; color: var(--ink); }
.co-blg .blg-metin a { color: var(--red); border-bottom: 1px solid rgba(215, 25, 32, .35); }
.co-blg .blg-metin a:hover { border-bottom-color: var(--red); }
.co-blg .blg-metin ul, .co-blg .blg-metin ol { margin: 0 0 22px; padding-left: 22px; }
.co-blg .blg-metin li { margin-bottom: 9px; }
.co-blg .blg-metin ul { list-style: none; padding-left: 0; }
.co-blg .blg-metin ul > li { position: relative; padding-left: 24px; }
.co-blg .blg-metin ul > li::before {
    content: "";
    position: absolute;
    left: 2px; top: .72em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
}
.co-blg .blg-metin img { height: auto; margin: 26px 0; border-radius: 14px; }
.co-blg .blg-metin blockquote {
    margin: 30px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--accent);
    background: var(--paper);
    color: var(--ink);
    font-size: 18px;
    line-height: 1.65;
}
.co-blg .blg-metin blockquote p:last-child { margin-bottom: 0; }
.co-blg .blg-metin table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.5px; }
.co-blg .blg-metin th, .co-blg .blg-metin td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; }
.co-blg .blg-metin th { background: var(--surface); font-weight: 600; }
.co-blg .blg-metin iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; margin: 26px 0; }
.co-blg .blg-tablo-sar { overflow-x: auto; }

/* Galeri */
.co-blg .blg-galeri { margin: 38px 0 8px; }
.co-blg .blg-galeri h2 { margin: 0 0 16px; font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.co-blg .blg-galeri-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-blg .blg-galeri-grid a { display: block; overflow: hidden; border-radius: 12px; background: var(--surface); }
.co-blg .blg-galeri-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.co-blg .blg-galeri-grid a:hover img { transform: scale(1.05); }

/* Paylaşım */
.co-blg .blg-paylas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 38px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.co-blg .blg-paylas > span { margin-right: 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.co-blg .blg-paylas a, .co-blg .blg-paylas button {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.co-blg .blg-paylas a:hover, .co-blg .blg-paylas button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.co-blg .blg-paylas svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.co-blg .blg-kopya-not { font-size: 11.5px; color: var(--accent); opacity: 0; transition: opacity .2s ease; }
.co-blg .blg-kopya-not.gorunur { opacity: 1; }

/* Önceki / sonraki */
.co-blg .blg-gezinme { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.co-blg .blg-gezinme a {
    padding: 22px 24px;
    border: 1px solid var(--line);
    background: var(--paper);
    transition: border-color .2s ease, transform .2s ease;
}
.co-blg .blg-gezinme a:hover { border-color: var(--ink); transform: translateY(-2px); }
.co-blg .blg-gezinme span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; }
.co-blg .blg-gezinme strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.co-blg .blg-gezinme strong font { color: inherit !important; }
.co-blg .blg-gezinme .blg-sonraki { text-align: right; }

/* Yan sütun */
.co-blg .blg-yan { position: sticky; top: 110px; display: grid; gap: 16px; }
.co-blg .blg-yan-kutu { padding: 24px 26px; border: 1px solid var(--line); background: var(--paper); }
.co-blg .blg-yan-kutu h2 { margin: 0 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.co-blg .blg-yan .blg-ara { margin-top: 0; max-width: none; }
.co-blg .blg-yan .blg-ara input { min-height: 46px; font-size: 13px; }
.co-blg .blg-yan .blg-ara button { min-height: 46px; padding: 0 18px; }
.co-blg .blg-yan-liste { display: grid; gap: 0; }
.co-blg .blg-yan-liste a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.45;
    transition: color .18s ease;
}
.co-blg .blg-yan-liste a:last-child { border-bottom: 0; padding-bottom: 0; }
.co-blg .blg-yan-liste a:hover { color: var(--red); }
.co-blg .blg-yan-liste a font { color: inherit !important; }
.co-blg .blg-yan-liste small { display: block; margin-top: 4px; color: #9A938B; font-size: 11px; }
.co-blg .blg-yan-etiketler { display: flex; flex-wrap: wrap; gap: 7px; }
.co-blg .blg-yan-etiketler a {
    display: inline-flex; align-items: center;
    min-height: 34px; padding: 0 13px;
    border: 1px solid var(--line-2); border-radius: 999px;
    font-size: 11.5px;
}
.co-blg .blg-yan-etiketler a:hover { border-color: var(--ink); }
.co-blg .blg-yan-etiketler a.aktif { background: var(--ink); border-color: var(--ink); color: #fff; }

/* İlgili yazılar — yazı gövdesiyle aynı ölçüde kalsın */
.co-blg .blg-ilgili { width: min(1360px, calc(100% - 64px)); padding: 66px 0 84px; border-top: 1px solid var(--line); }
.co-blg .blg-ilgili h2 { margin: 0 0 26px; font-size: clamp(24px, 2.6vw, 40px); font-weight: 400; letter-spacing: -.04em; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1200px) {
    .co-blg .blg-govde { grid-template-columns: 1fr; gap: 44px; }
    .co-blg .blg-yan { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .co-blg .blg-hero { grid-template-columns: 1fr; min-height: 0; }
    .co-blg .blg-hero-medya { min-height: 280px; order: -1; }
    .co-blg .blg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-blg .blg-bas { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
    .co-blg .blg-kapsayici,
    .co-blg .blg-crumbs,
    .co-blg .blg-yazi-bas,
    .co-blg .blg-kapak,
    .co-blg .blg-ilgili,
    .co-blg .blg-govde { width: calc(100% - 32px); }
    .co-blg .blg-hero { margin-bottom: 44px; }
    .co-blg .blg-hero-yazi { padding: 44px 24px; }
    .co-blg .blg-ara { flex-direction: column; max-width: none; }
    .co-blg .blg-ara button { width: 100%; }
    .co-blg .blg-grid { grid-template-columns: 1fr; }
    .co-blg .blg-cta { grid-template-columns: 1fr; padding: 32px 26px; }
    .co-blg .blg-cta a { width: 100%; justify-content: center; }
    .co-blg .blg-yan { grid-template-columns: 1fr; }
    .co-blg .blg-gezinme { grid-template-columns: 1fr; }
    .co-blg .blg-gezinme .blg-sonraki { text-align: left; }
    .co-blg .blg-galeri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-blg .blg-kapak img { aspect-ratio: 16 / 10; }
    .co-blg .blg-metin { font-size: 16px; }
}