/* ---------------------------------------------------------------------------
   Strateji Grup — tema üstü düzeltmeler ve yeni bileşenler.
   style.css / theme-responsive.css / skins/red dokunulmadan bırakılır;
   buradaki kurallar onların üzerine biner.

   KURAL: Legacy v3 (Jekas teması) görünümü esas alınır. Burada yalnızca
   (a) temada karşılığı olmayan yeni bileşenler ve (b) temanın kendi kuralı
   yeni içerikle çakıştığında gereken düzeltmeler bulunur. Slider'a ve temanın
   tipografi/boşluk düzenine karışılmaz.

   Marka rengi: #b11116 (logo) · antrasit: #2b2a29
   --------------------------------------------------------------------------- */

:root {
    --sg-red: #b11116;
    --sg-ink: #2b2a29;
    --sg-muted: #6f6c68;
    --sg-line: #e6e2dc;
}

/* --- Slider kapsayıcısı --------------------------------------------------- */

/* Tema `.tp-banner-container`a hiç kural yazmaz; slider'ı <header class="slide">
   içinde varsayar ve gereken iki özelliği oradan alır (style.css:751 —
   `header{position:relative; overflow:hidden}`). Legacy v3 slider'ı header'ın
   dışına taşıdığı için mutlak konumlu `li`ler `height:100%`i belge kökünden
   çözüyor (4080px) ve slayt görseli aşağıdaki bölümlerin üzerine biniyordu.
   Aynı iki özellik burada kapsayıcıya veriliyor — slider'ın kendi ayarlarına
   dokunulmaz. */
.tp-banner-container { position: relative; overflow: hidden; }
.tp-banner { position: relative; }

/* --- Logo: tema logosundan farklı en/boy oranı --------------------------- */

/* Logo %20 büyütüldü (52 → 62.4). Başlık şeridinin yüksekliğini logo sütunu
   belirlediği için, kazanılan yükseklik sütunun kendi boşluğundan alındı:
   14+52+10 = 76 idi, 9+62.4+4 = 75.4 oldu. Üst boşluk, logonun dikey merkezi
   menü bağlantılarının merkeziyle çakışacak şekilde seçildi. */
.nav_logo .logo { padding-top: 9px; padding-bottom: 4px; }
.nav_logo .logo_img { max-height: 62.4px; width: auto; }

@media (max-width: 767px) {
    .nav_logo .logo { padding-top: 10px; padding-bottom: 5px; }
    .nav_logo .logo_img { max-height: 50.4px; }
}

/* --- Butonlar ------------------------------------------------------------ */

/* Tema `.button i`yi 25px / #232323 ile büyük marka ikonu varsayıyor; bizim
   butonlarımızda ikon metnin yanındaki küçük ok. Slider butonunda ikon bir
   <span> içinde durduğu için (legacy kalıbı) doğrudan çocuk seçicisi onu
   kapsamaz — slider tema değerlerinde kalır. */
.button > i {
    font-size: inherit;
    color: inherit;
    padding-right: 6px;
}

/* --- Hizmet kutuları ------------------------------------------------------ */

/* Temada `.service-02 h3` bağlantı içermiyor; bizde başlık çözüm sayfasına gider. */
.service-02 h3 a { color: inherit; }
.service-02 h3 a:hover { color: var(--sg-red); }

/* --- Çalışma ilkeleri ----------------------------------------------------- */

.principle_item { margin-bottom: 26px; }

/* --- Hakkımızda: sayaç kartı --------------------------------------------- */

/* Tasarım stratejigrup.com.tr_v3_04 denemesindeki "funfact" kartından alındı;
   Bootstrap 3 / Font Awesome 4 ile yeniden kuruldu (K-0011). */
.funfact_wrapper { padding: 20px 0 50px; }

.funfact_card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    text-align: center;
    padding: 60px 30px 55px;
    border-radius: 7px;
    color: #fff;
    background-color: var(--sg-red);
    background-image: url("/img/funfact-line.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.funfact_icon { font-size: 40px; line-height: 1; margin-bottom: 18px; opacity: .9; }

.funfact_card h3 {
    margin: 0;
    padding: 0;
    font-size: 54px;
    line-height: 1;
    font-weight: 500;
    color: #fff;
}
.funfact_card h3 span { font-size: 30px; vertical-align: super; margin-left: 2px; font-weight: 400; }

.funfact_card p {
    margin: 12px auto 0;
    max-width: 22ch;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    opacity: .92;
}

@media (max-width: 991px) {
    .funfact_card { grid-template-columns: 1fr 1fr; gap: 40px; padding: 45px 20px; }
    .funfact_card h3 { font-size: 44px; }
}

@media (max-width: 560px) {
    .funfact_card { grid-template-columns: 1fr; gap: 34px; }
}

/* --- Hakkımızda: legacy giriş ızgarası ----------------------------------- */

/* Metne gömülü görseller — legacy'de sütun yüksekliğine göre üstte hizalıydı,
   metinle aynı optik hatta gelmesi için hafif boşluk. */
.about_intro > div { margin-bottom: 26px; }
.about_intro img { margin: 0 auto; }
.about_intro .lead_paragraph { font-size: 16px; line-height: 1.8; }
.about_intro .registry { line-height: 2; }

/* --- Ürün ve sistemler ---------------------------------------------------- */

.product_group h3 a { color: inherit; }
.product_group h3 a:hover { color: var(--sg-red); }
.product_group_count {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sg-muted);
}

.product_item {
    padding: 26px 0;
    border-bottom: 1px solid var(--sg-line);
}
.product_item:last-child { border-bottom: 0; padding-bottom: 0; }
.product_item h4 { margin: 0 0 10px; }
.product_name {
    display: inline-block;
    margin-right: 12px;
    padding: 3px 10px;
    background: var(--sg-red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: 3px;
    vertical-align: middle;
}
.product_title { font-weight: 500; vertical-align: middle; }
.product_item p { margin: 0; max-width: 82ch; }

/* Kanıt satırları — tescil veya kurulum. Süsleme değil, iddianın dayanağı. */
.product_evidence { list-style: none; padding: 0; margin: 12px 0 0; }
.product_evidence li {
    display: inline-block;
    margin: 0 10px 6px 0;
    padding: 4px 12px 4px 10px;
    border: 1px solid var(--sg-line);
    border-radius: 3px;
    font-size: 12.5px;
    color: var(--sg-muted);
    line-height: 1.6;
}
.product_evidence li i { color: var(--sg-red); margin-right: 7px; }

/* --- Kapsam listesi ------------------------------------------------------- */

.scope_list { padding-left: 0; list-style: none; }
.scope_list li {
    padding: 11px 0 11px 4px;
    border-bottom: 1px solid var(--sg-line);
    color: var(--sg-muted);
}
.scope_list li:last-child { border-bottom: 0; }
.scope_list li i { color: var(--sg-red); margin-right: 10px; }

/* --- Geliştirme süreci ---------------------------------------------------- */

.process_step {
    display: flex;
    gap: 22px;
    padding: 22px 15px;
    border-top: 1px solid var(--sg-line);
}
.process_step:last-child { border-bottom: 1px solid var(--sg-line); }
.process_no {
    flex: 0 0 auto;
    min-width: 46px;
    font-size: 20px;
    font-weight: 700;
    color: var(--sg-red);
    line-height: 1.4;
}
.process_body { flex: 1 1 auto; }
.process_body h4 { margin: 0 0 6px; font-weight: 600; }
.process_body p { margin: 0; color: var(--sg-muted); }

@media (max-width: 600px) {
    .process_step { display: block; }
    .process_no { display: block; margin-bottom: 4px; }
}

/* --- Mühendislik notları -------------------------------------------------- */

.engineering_list { padding-left: 0; list-style: none; margin: 0; }
.engineering_list li {
    position: relative;
    padding: 0 0 20px 22px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sg-line);
    color: var(--sg-muted);
}
.engineering_list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.engineering_list li:before {
    content: "";
    position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; background: var(--sg-red);
}

/* --- Künye tablosu -------------------------------------------------------- */

.identity_table { margin-top: 6px; }
.identity_table th {
    width: 220px;
    font-weight: 500;
    color: var(--sg-muted);
    white-space: nowrap;
}
.identity_table td { color: var(--sg-ink); }

@media (max-width: 600px) {
    .identity_table th, .identity_table td { display: block; width: auto; white-space: normal; }
    .identity_table th { padding-bottom: 0; border-bottom: 0; }
}

/* --- Belgeler ------------------------------------------------------------- */

.doc_filter { margin-bottom: 26px; }
.doc_filter a {
    display: inline-block;
    margin: 0 6px 8px 0;
    padding: 7px 16px;
    border: 1px solid var(--sg-line);
    color: var(--sg-muted);
    font-size: 13px;
}
.doc_filter a:hover { border-color: var(--sg-ink); color: var(--sg-ink) !important; }
/* red.css `.portfolioFilter a.current` yazıyı da kırmızı yapıyor; kırmızı zeminde
   görünmez oluyordu. */
.doc_filter a.current {
    background: var(--sg-red);
    border-color: var(--sg-red);
    color: #fff !important;
}

.item-work .info { padding: 12px 0 4px; }
.item-work .info a { font-weight: 600; color: var(--sg-ink); }
.doc_kind { display: block; font-size: 12px; color: var(--sg-muted); margin-top: 2px; }
.doc_ref { color: var(--sg-line); }
.doc_ref::before { content: "·"; padding: 0 6px; }

/* Izgara genişliği Isotope için 1 px kısaltılıyor: 25% = 292.5 px, Isotope bunu 293'e
   yuvarlayıp 4×293 > 1170 dediği için satıra üç kutu koyuyordu (K-0027). */
.portfolioContainer > [class*="col-"] { width: calc(50% - 1px); }
@media (min-width: 768px) {
    .portfolioContainer > [class*="col-"] { width: calc(33.3333% - 1px); }
}
@media (min-width: 992px) {
    .portfolioContainer > [class*="col-"] { width: calc(25% - 1px); }
}

/* Belge kutucukları: görseller gri tonlu durur, üzerine gelince rengine kavuşur.
   Temanın kırmızı yıkaması (red.css `.overlay` → rgba(230,75,60,.6)) kalktı; yerine
   ince bir antrasit perde geldi (K-0027). */
.item-work .hover img {
    filter: grayscale(1) contrast(1.02);
    transition: filter .35s ease, transform .5s ease;
}
.item-work:hover .hover img { filter: none; transform: scale(1.02); }
.item-work .overlay {
    background-color: rgba(43, 42, 41, .32);
    background-blend-mode: normal;
}
.item-work .overlay_file { background-color: rgba(43, 42, 41, .42); }

.doc_badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: var(--sg-red);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 3px 7px;
    border-radius: 2px;
    pointer-events: none;
}

.doc_note { color: var(--sg-muted); font-size: 13.5px; margin-top: 24px; }
.doc_note i { color: var(--sg-red); margin-right: 6px; }

/* --- Editöryal düzen ------------------------------------------------------ */

/* İçerik sayfalarında ilk paragraf giriş olarak ayrışır, gövde ölçülü bir satır
   uzunluğunda kalır. Uzun satır okumayı yoruyor; 62–72 karakter aralığı hedef. */

.editorial_body { max-width: 46em; }

.editorial_lead {
    font-size: 18.5px;
    line-height: 1.75;
    color: var(--sg-ink);
    margin-bottom: 22px;
}

.editorial_body p { margin-bottom: 18px; }

/* Gövdeden çekilen pasaj. Tırnak işareti çizilmez — pasaj sayfanın kendi cümlesidir,
   dışarıdan bir alıntı değildir (K-0020). */
.pull_quote {
    margin: 0;
    padding: 4px 0 4px 26px;
    border: 0;
    border-left: 3px solid var(--sg-red);
    font-size: 21px;
    line-height: 1.62;
    font-weight: 300;
    color: var(--sg-ink);
}

.pull_quote:before, .pull_quote:after { content: none; }

@media (max-width: 767px) {
    .editorial_lead { font-size: 17px; }
    .pull_quote { font-size: 18px; padding-left: 18px; }
}

/* --- "Ne zaman doğru cevap" bölümü ---------------------------------------- */

.fit_block { padding: 60px 0 50px; }

.fit_intro { max-width: 46em; margin-bottom: 30px; }

.fit_col h4 {
    font-size: 15px;
    letter-spacing: .02em;
    margin-bottom: 14px;
}

.fit_col ul { list-style: none; margin: 0; padding: 0; }

.fit_col li {
    position: relative;
    padding: 0 0 12px 26px;
    line-height: 1.7;
}

.fit_col li i {
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 13px;
}

.fit_yes li i { color: #4a8a3f; }
.fit_no li i { color: var(--sg-muted); }
.fit_no li { color: var(--sg-muted); }

@media (max-width: 991px) {
    .fit_col + .fit_col { margin-top: 26px; }
}

/* Bootstrap 3 float ızgarasında satır kırma. `clearfix` KULLANILAMAZ — tema onu
   1px'lik ara eleman diye tanımlıyor (K-0012 uygulama notu). */
.row_break { clear: both; }

/* --- Logo / sözcük-marka ızgarası (kurumsal sayfalar) --------------------- */

/* Netloji vitrinindeki mekanizmanın açık zemin sürümü: logo dosyası varsa görsel,
   yoksa ad yazıyla çizilir; kutu ikisinde de aynı olduğu için logo sonradan
   geldiğinde ızgara yeniden düzenlenmez (K-0021). */

.stack_item { margin-bottom: 30px; }

/* Logo dosyaları 230x115 tuvalde geliyor ve markanın kendisi tuvalin yarısı kadar
   (ölçüldü: ~217x58). Kutu bu yüzden yazı kaleminden yüksek tutuluyor; yoksa marka
   15 px'e düşüp okunmaz oluyor. */
.stack_mark {
    display: flex;
    align-items: center;
    height: 96px;
    margin-bottom: 8px;
    color: var(--sg-ink);
    transition: .25s all ease;
}

.stack_mark_img { display: block; max-height: 92px; max-width: 100%; width: auto; }

.stack_mark_text {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
}

a.stack_mark:hover { color: var(--sg-red); text-decoration: none; }
a.stack_mark:focus-visible { outline: 2px solid var(--sg-red); outline-offset: 4px; }

.stack_item p {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--sg-muted);
    margin: 0;
}

.stack_note {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--sg-muted);
    max-width: 46em;
}

/* --- Markalar bandı (Hakkımızda) ------------------------------------------ */

/* Tema owl'u `margin: 0` ile başlatıyor (main.js:276) ve logolar birbirine yapışıyor.
   Aralık kalemin içine veriliyor; owl'un genişlik hesabı bozulmasın diye dış boşluk
   kullanılmıyor. Sıralamada da benzer markalar yan yana gelmez — dizilim site.json'da
   bilerek dönüşümlü (K-0023). */
.carousel-sponsors .owl-item li,
.carousel-sponsors .owl-item > a,
.carousel-sponsors .owl-item > span { display: block; padding: 0 22px; }

.carousel-sponsors .owl-item img { margin: 0 auto; }

@media (max-width: 767px) {
    .carousel-sponsors .owl-item li,
    .carousel-sponsors .owl-item > a,
    .carousel-sponsors .owl-item > span { padding: 0 12px; }
}

/* --- Kayan logo şeridi ---------------------------------------------------- */

/* Hakkımızda'daki Markalarımız bandıyla aynı bileşen; farkı gri tonlama. Marka
   adları metinde geçmediği için (K-0021) tanınırlığı bu şerit taşıyor: durağan
   hâlde geri planda, imleç üzerine geldiğinde kendi renginde. */

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

.logo_strip li { text-align: center; }

.logo_strip_mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0 14px;
    transition: .35s all ease;
    filter: grayscale(1);
    opacity: .5;
}

.logo_strip_mark:hover { filter: none; opacity: 1; }

/* Sözcük-marka ile logo aynı kutuyu paylaşıyor; logo dosyaları boşluklu tuvalle
   geldiğinde küçük kalmasın diye üst sınır kutunun büyük kısmını kullanıyor. */
.logo_strip_mark img { max-height: 48px; max-width: 100%; width: auto; }

/* Yazıyla çizilen kalemde gri tonlama iş görmüyor; karşılığı renk sönümü. */
.logo_strip_text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--sg-ink);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .logo_strip_mark { height: 54px; }
    .logo_strip_text { font-size: 14px; }
}

/* Hareket azaltma tercihi açıkken şerit kaymaz; owl'un kendi otomatik oynatması
   JS tarafında duramadığı için geçişleri de kısaltıyoruz. */
@media (prefers-reduced-motion: reduce) {
    .logo_strip .owl-stage { transition-duration: 0s !important; }
}

/* --- Ürün grubu ızgarası -------------------------------------------------- */

/* Bootstrap 3 ızgarası float ile kurulu: kartların yüksekliği farklı olduğunda
   üçüncü kart yukarıdaki uzun karta takılıyor. `clearfix` KULLANILAMAZ — tema onu
   1px'lik ara eleman diye tanımlıyor (K-0012 uygulama notu). Satır başına gelen
   kart kendi kenarını temizliyor. */
@media (min-width: 992px) {
    .product_group_grid > .col-md-6:nth-child(2n+1) { clear: left; }
    .product_group_grid > .col-md-4:nth-child(3n+1) { clear: left; }
}

/* --- Netloji / CTA blokları ----------------------------------------------- */

.callout_action { padding-top: 12px; }

@media (max-width: 991px) {
    .callout_action { text-align: left !important; padding-top: 4px; }
}

/* --- Netloji bandı -------------------------------------------------------- */

/* Bant bilerek sitenin geri kalanına benzemez: ziyaretçi burada başka bir markaya
   geçtiğini görmelidir (K-0015). Renkler Netloji'nin kendi paletinden alındı —
   lacivert zemin, turuncu aksiyon. Strateji'nin kırmızısı bandın içine girmez;
   turuncu da bandın dışına çıkmaz. */

.netloji_band {
    --nl-navy: #071437;
    --nl-orange: #f49915;
    color: rgba(255, 255, 255, .78);
    background: linear-gradient(115deg, #061131 0%, #0b1f4d 58%, #143164 100%);
    border-top: 3px solid var(--nl-orange);
}

.netloji_band .paddings { padding: 58px 0 54px; }

/* Kaynak dosya 122x50; 40px yükseklikte büyütme olmadan çiziliyor. */
.netloji_logo {
    display: block;
    height: 40px;
    width: auto;
    margin-bottom: 20px;
}

.netloji_band h3 {
    color: #fff;
    margin: 0 0 12px;
    padding: 0;
}

.netloji_band p {
    margin: 0;
    line-height: 1.75;
    max-width: 44em;
}

/* Buton, metin bloğunun ortasına hizalanır. Bootstrap 3 satırı float ile kurulu;
   flex'e alındığında float'lar yok sayılır, sütun genişlikleri yüzde olduğu için
   yerleşim değişmez. Yalnız bu bantta ve yalnız geniş ekranda geçerli. */
@media (min-width: 992px) {
    .netloji_band .netloji_lead_row { display: flex; align-items: center; }
    .netloji_band .callout_action { padding-top: 0; }
}

/* Tema butonu red.css'te `background: #b11116 !important` ile geliyor; ezmek için
   !important şart. Metin gölgesi açık zemin varsayıyor, turuncuda kaldırılıyor. */
.netloji_band .button,
.netloji_band .button:hover {
    background: var(--nl-orange) !important;
    background-color: var(--nl-orange) !important;
    color: var(--nl-navy) !important;
    text-shadow: none;
    font-weight: 600;
}

.netloji_band .button:hover { background: #ffad33 !important; background-color: #ffad33 !important; }

.netloji_band .button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Netloji teknoloji vitrini (bandın alt bölümü) ------------------------ */

/* Üç sütun: logo + bir paragraf (K-0018). Logosu olmayan kalem adıyla çizilir;
   iki durumda da marka alanı aynı yükseklikte olduğu için sütunların üst hizası
   logo dosyası gelse de gelmese de bozulmaz. */

.netloji_showcase {
    margin-top: 38px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.netloji_showcase_caption {
    margin: 0 0 26px;
    padding: 0;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: .01em;
    color: #fff;
}

.netloji_col { margin-bottom: 26px; }

/* Marka alanı sabit yükseklikte; logolar farklı en/boy oranında geliyor. */
.netloji_mark {
    display: flex;
    align-items: center;
    height: 30px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, .92);
    transition: .25s all ease;
}

.netloji_mark_img { display: block; height: 26px; width: auto; }

.netloji_mark_text { font-size: 17px; letter-spacing: .02em; }

a.netloji_mark:hover { color: #fff; text-decoration: none; opacity: .82; }
a.netloji_mark:focus-visible { outline: 2px solid var(--nl-orange); outline-offset: 4px; }

.netloji_col p {
    font-size: 13.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .7);
}

/* Sütunlar arasına ince ayraç — yalnız yan yana dizildiklerinde. */
@media (min-width: 992px) {
    .netloji_col + .netloji_col {
        border-left: 1px solid rgba(255, 255, 255, .1);
    }
    .netloji_col + .netloji_col .netloji_mark,
    .netloji_col + .netloji_col p { padding-left: 12px; }
}

.netloji_showcase_note {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .5);
    max-width: 52em;
}

@media (max-width: 991px) {
    .netloji_band .callout_action { padding-top: 10px; }
}

/* --- Çözüm sayfaları arası gezinme ---------------------------------------- */

.solution_pager {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--sg-line);
    font-weight: 500;
}
.solution_pager a { color: var(--sg-ink); }
.solution_pager a:hover { color: var(--sg-red); }

/* --- Altbilgi ------------------------------------------------------------- */

/* Temanın altbilgisi şablon işi duruyordu: tepede beyaz üçgen çentik, her
   bağlantının önünde kırmızı onay ikonu, altta beyaz kalın künye şeridi.
   Üçü de kaldırıldı; altbilgi tek koyu blok hâline getirildi (K-0025). */
.footer_top:before { display: none; }

footer.footer_top {
    background-color: #1b1a19;
    padding: 62px 0 56px;
    font-weight: 400;
}

/* Künye bloğu: logo + adres + telefon/e-posta. Logo başlıktakinden %10 büyük
   (62.4 → 68); altına metin yazılmaz, iletişim bilgisi oraya alınır (K-0025).
   Ölçü sınıfın kendisine yazılır; kapsayıcıya bağlanırsa görsel doğal boyuna
   (286×120) düşer. */
.footer_logo { height: 68px; width: auto; display: block; }

footer.footer_top h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    margin: 6px 0 20px;
    padding: 0;
    border: 0;
}

/* Madde imi: onay işareti değil açı işareti, marka kırmızısında. İlk denemede
   soluk gri verilmişti — koyu zeminde görünmüyordu, "im koydum" demekten ibaret
   kalıyordu. Satır hover'da 3 px kayıyor, im beyaza dönüyor (K-0025). */
footer.footer_top ul { margin: 0; list-style: none; }
footer.footer_top ul li {
    font-size: 14px;
    line-height: 1.5;
    padding: 0 0 13px;
    transition: transform .18s ease;
}
footer.footer_top ul li > i.fa {
    color: var(--sg-red) !important;   /* red.css aynı seçiciyi !important ile boyuyor */
    font-size: 13px;
    width: 10px;
    margin-right: 10px;
    transition: color .18s;
}
footer.footer_top ul li:hover { transform: translateX(3px); }
footer.footer_top ul li:hover > i.fa { color: #fff !important; }

/* Koyu altbilgide kırmızı link okunmuyordu — açık griye çekildi, vurgu hover'da
   kalıyor. red.css `footer a{color:#b11116 !important}` dediği için !important
   şart. */
footer.footer_top a { color: #b9b6b1 !important; }
footer.footer_top a:hover { color: #fff !important; text-decoration: none; }

.footer_brand address {
    margin: 22px 0 6px;
    max-width: 30em;
    font-size: 14px;
    line-height: 1.7;
    font-style: normal;
    font-weight: 400;
    color: #9a9793;
}
.footer_contact_line { font-size: 14px; line-height: 1.8; font-weight: 400; margin: 0; }
.footer_sep { color: #57534f; padding: 0 8px; }

/* Sosyal hesap ikonları: künye bloğunun altında, kare çerçeveli. Hesap yoksa
   liste hiç çizilmez — ölü ikon konmaz (K-0025). */
.footer_social { margin: 24px 0 0 !important; padding: 0; list-style: none; }
.footer_social li { display: inline-block; padding: 0 !important; margin-right: 8px; }
.footer_social li a {
    display: flex;                 /* line-height ile ortalama font metriğine göre kayıyordu */
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 3px;
    transition: background-color .2s, border-color .2s;
}
.footer_social li a:hover { background-color: var(--sg-red); border-color: var(--sg-red); }

/* Tema `footer li i`ye 10 px sağ boşluk, red.css aynı seçiciye kırmızı veriyor:
   ikonlar hem kutunun solunda hem kırmızı çiziliyordu. İkisi de eziliyor. */
.footer_social li a i.fa {
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 16px;
    line-height: 1;
}

/* Girişim sütununun başlığı sayfaya gider; başlık rengi bağlantı rengine düşmez. */
footer.footer_top h3 a { color: #fff !important; }
footer.footer_top h3 a:hover { color: var(--sg-red) !important; }

/* Künye şeridi temanın açık renk hattıdır; yalnız punto düşürülür. */
.coopring p { font-size: 12.5px; }

/* Tema 980px altında altbilgiyi ortalıyor; blok öğeler de ortalanır. */
@media (max-width: 991px) {
    footer.footer_top .row > div { margin-bottom: 36px; }
    footer.footer_top .row > div:last-child { margin-bottom: 0; }
}
@media (max-width: 980px) {
    .footer_logo { height: 58px; margin: 0 auto; }
    .footer_brand address { margin-left: auto; margin-right: auto; }
}

/* --- Başlık şeridi arka planı -------------------------------------------- */

/* Şerit düz marka kırmızısıydı. Görsel verildiğinde altına doku olarak giriyor,
   üstünde kırmızı perde kalıyor: kimlik değişmiyor, sayfa yalnız derinlik
   kazanıyor. Perde yoğunluğu tek yerden ayarlanır (K-0027). */
.section_title.has_bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.section_title.has_bg::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(177, 17, 22, .80);
}
.section_title.has_bg > .container { position: relative; z-index: 1; }

/* Gövde görseli: Hakkımızda'daki gömülü görsel düzeniyle aynı ailede (K-0011),
   yalnız köşe yumuşatma ve dar ekranda üstten boşluk eklendi. */
.content_figure img { border-radius: 3px; }
@media (max-width: 991px) {
    .content_figure { margin-bottom: 22px; }
}

/* Şema tam genişlikte ama sayfa kadar büyütülmez: kendi ölçüsünde ortalanır. */
.content_figure_wide { margin-top: 30px; text-align: center; }
.content_figure_wide img,
.content_figure_wide svg { display: inline-block; max-width: 900px; width: 100%; height: auto; }
.content_figure_wide svg { overflow: visible; }

/* Telefonda şema 345 px'e düşünce yazıları 6 px kalıyordu (ölçüldü). Şema kendi
   içinde yatay kayıyor; sayfa kaymıyor. */
@media (max-width: 767px) {
    .content_figure_wide {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        text-align: left;
    }
    .content_figure_wide svg { min-width: 680px; }
}

/* --- Çözüm sayfası: yapılmış işler --------------------------------------- */

/* İlke maddesinin yanına kanıt: kurum adı ve yıl başlığın hemen altında durur
   (K-0027). Kanıtı olmayan sayfada bu bölüm hiç çizilmez. */
.work_note { color: var(--sg-muted); max-width: 46em; margin-bottom: 26px; }
.work_item { margin-bottom: 26px; }
.work_item h4 { margin: 0 0 6px; font-size: 17px; }
.work_meta {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sg-muted);
}
.work_meta .work_client { color: var(--sg-red); font-weight: 600; }
.work_meta .work_year::before { content: "·"; padding: 0 7px; color: var(--sg-line); }

/* --- İletişim sayfası ----------------------------------------------------- */

/* Sol künye bloğu ve harita aynı hizada başlar; harita sütun yüksekliğini
   belirlemesin diye sabit yükseklikte (K-0026). */
.contact_office h3 { margin-top: 0; }
.contact_office address {
    line-height: 1.7;
    margin-bottom: 22px;
    max-width: 24em;
    font-style: normal;
}
.contact_list { margin: 0 0 26px; }
.contact_list dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-muted);
}
.contact_list dd { margin: 0 0 14px; font-size: 16px; }
.contact_map iframe { height: 340px; border-radius: 3px; }

/* Form: temanın `#form input{width:85%}` kuralı iki sütunlu ızgarayı bozuyordu. */
.contact_form .field_row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.contact_form .field_row .field { flex: 1 1 240px; }
.contact_form .field { margin-bottom: 18px; }
.contact_form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--sg-ink);
}
.contact_form label .optional { font-weight: 400; color: var(--sg-muted); }
.contact_form input,
.contact_form textarea {
    width: 100% !important;
    border: 1px solid var(--sg-line);
    background: #fff;
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 2px;
}
.contact_form input { height: 42px; margin-bottom: 0 !important; }
.contact_form textarea { height: auto; min-height: 150px; line-height: 1.6; }
.contact_form input:focus,
.contact_form textarea:focus { border-color: var(--sg-red); outline: none; }
.contact_form .button { margin-top: 4px; }

.field_error, .form_errors { display: block; color: var(--sg-red); font-size: 13px; margin-top: 5px; }
.form_errors:empty { display: none; }

/* Bot tuzağı: görünmez ama `display:none` değil — bazı botlar gizli alanı atlar. */
.hp_field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form_success {
    border-left: 3px solid var(--sg-red);
    background: #fff;
    padding: 18px 22px;
    font-size: 16px;
    line-height: 1.7;
}
.form_success i { color: var(--sg-red); margin-right: 8px; }

.identity_note { color: var(--sg-muted); margin: -8px 0 22px; }
.form_note { font-size: 15px; line-height: 1.75; color: var(--sg-ink); }
.form_note_alt { font-size: 14px; line-height: 1.75; color: var(--sg-muted); margin-top: 16px; }

@media (max-width: 991px) {
    .contact_map { margin-top: 26px; }
    .contact_map iframe { height: 280px; }
}

/* --- Erişilebilirlik ------------------------------------------------------ */

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--sg-red);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wow, .animated { animation: none !important; visibility: visible !important; }
}