/* ---------------------------------------------------------------------------
   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; }

/* --- Üst şerit (konum · telefon · dil) ----------------------------------- */

/* Temada karşılığı yok; başlık şeridinin üstüne biner. Koyu başlığın üstünde açık
   bir bant durur, ikisi arasındaki sınır ince çizgiyle verilir (K-0030). */
/* Menü şeridi temada kalıcı olarak sabittir (style.css:858 —
   `.sticky-wrapper{position:fixed; top:0}`). Üst şerit de sabitlenip menü onun altına
   itiliyor; aksi hâlde sabit menü şeridin üstüne biniyor. Yükseklik JS ile ölçülüp
   `--topbar-h` değişkenine yazılır (kırılım noktalarında değişiyor). */
:root { --topbar-h: 41px; }

.topbar {
    background: #f7f5f2;
    border-bottom: 1px solid var(--sg-line);
    font-size: 13px;
    color: var(--sg-muted);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}
.sticky-wrapper { top: var(--topbar-h) !important; }
body { padding-top: var(--topbar-h); }
/* Kapsayıcı 1170'e sıkışmaz: sol grup sola, sağ grup sağa yaslanır. */
.topbar_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 26px;
    min-height: 36px;
}

.topbar_info { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 24px; }
.topbar_info li { line-height: 26px; }
.topbar_info i { color: var(--sg-red); margin-right: 7px; }
.topbar_info a { color: var(--sg-muted); }
.topbar_info a:hover { color: var(--sg-ink); text-decoration: none; }

.topbar_actions { display: flex; align-items: center; gap: 10px; }

/* WhatsApp: resmî logo kullanıldığı için zemin beyaz. Logonun kendi yeşil baloncuğu
   var; yeşil zemine konunca yeşil üstüne yeşil biniyor ve marka tanınmaz oluyor.
   Yeşil yalnız çerçevede ve hover'da (K-0030). */
.wa_button {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 11px 0 9px;
    border: 1px solid #bfe6c8;
    border-radius: 3px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sg-ink) !important;
    line-height: 1;
}
.wa_logo { height: 19px; width: auto; display: block; }
.wa_button:hover { border-color: #25d366; background: #f2fbf5; text-decoration: none; }

.topbar_lang { position: relative; display: flex; }
.lang_current {
    background: #fff;
    border: 1px solid var(--sg-line);
    border-radius: 3px;
    height: 26px;
    padding: 0 9px;
    font-size: 12.5px;
    color: var(--sg-ink);
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    cursor: pointer;
}
.lang_current:hover { border-color: #cfc9c1; }
.lang_current i { color: var(--sg-muted); font-size: 12px; }

.lang_menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 172px;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--sg-line);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(43, 42, 41, .10);
    display: none;
    z-index: 20;
}
.topbar_lang.is_open .lang_menu { display: block; }
.lang_menu li a,
.lang_menu li .lang_soon {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    font-size: 13px;
    color: var(--sg-ink);
}
.lang_menu li a:hover { background: #f7f5f2; text-decoration: none; }
.lang_menu li.is_active a,
.lang_menu li.is_active .lang_soon { font-weight: 600; }
.lang_menu .lang_soon { color: var(--sg-muted); cursor: default; }
.lang_menu .lang_soon em {
    font-style: normal;
    font-size: 11px;
    letter-spacing: .04em;
    color: #a09b95;
}
.topbar img { border: 1px solid rgba(43, 42, 41, .12); }

@media (max-width: 767px) {
    .topbar { font-size: 12px; }
    .topbar_inner { padding: 4px 14px; gap: 8px; }
    .topbar_info { gap: 14px; }
    .topbar_info li:first-child { display: none; }   /* dar ekranda telefon öncelikli */
    .wa_button span { display: none; }               /* yalnız logo kalır */
    .wa_button { padding: 0 7px; }
}

/* --- 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 content.tr.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; }
}

/* --- Referanslar sayfası -------------------------------------------------- */

/* Dört bölüm, üç kip (docs/memory/K-0032). Bölüm başlıkları temanın h2'sini
   kullanır; buradaki kurallar yalnız boşluk ve giriş cümlesi içindir. */
.block_title { margin-top: 0; }
.block_note {
    margin: -6px 0 34px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--sg-muted);
    max-width: 52em;
}

/* Girişim kartları: YAYINDA OLAN VE OLMAYAN AYNI YAPIYI KULLANIR. İki ayrı düzen
   ziyaretçiye "biri gerçek, öteki yarım" diye okunur (K-0032 Karar 2). Fark yalnız
   durum satırında ve bağlantının bulunup bulunmamasında.
   Izgara yerine TEK SIRA ray: kalemler arttıkça satır satır kırılmıyor, hepsi aynı
   hatta diziliyor. */
.venture_rail_wrap { position: relative; margin-top: 6px; }

.venture_rail {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 22px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #d5d0c9 transparent;
}
.venture_rail::-webkit-scrollbar { height: 6px; }
.venture_rail::-webkit-scrollbar-thumb { background: #d5d0c9; }

/* Ok düğmeleri: tema kırmızısında daire, içinde beyaz ok. JavaScript açar —
   betik yoksa ray yine sürüklenir, ölü düğme görünmez. */
.rail_nav { display: none; }
.venture_rail_wrap.is-live .rail_nav,
.client_rail_wrap.is-live .rail_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 38%;
    z-index: 6;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sg-red);
    color: #fff;
    box-shadow: 0 3px 14px rgba(43, 42, 41, .28);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.venture_rail_wrap.is-live .rail_nav:hover,
.client_rail_wrap.is-live .rail_nav:hover { background: #8f0d12; transform: scale(1.06); }
.rail_nav i { font-size: 24px; line-height: 1; }
/* Oklar rayın dışına değil içine oturuyor: dışarı taşırınca dar ekranlarda
   kapsayıcı kenar boşluğunu aşıp sayfayı yatay kaydırıyor. */
.rail_prev { left: 6px; }
.rail_next { right: 6px; }
.venture_rail_wrap.is-live .rail_nav[disabled],
.client_rail_wrap.is-live .rail_nav[disabled] { opacity: 0; pointer-events: none; }

.venture_card {
    flex: 0 0 322px;
    scroll-snap-align: start;
    border: 1px solid var(--sg-line);
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.venture_card:hover { border-color: #cfc9c1; box-shadow: 0 6px 22px rgba(43, 42, 41, .09); }

/* Görsel her koşulda var: yayında olanda ekran görüntüsü, olmayanda logo/yer tutucu.
   İkisi de aynı orana (16:10) oturur ki ızgara satır satır kaymasın. */
.venture_shot {
    display: block;
    position: relative;
    padding-top: 62.5%;
    overflow: hidden;
    background: #f4f2ef;
    border-bottom: 1px solid var(--sg-line);
}
.venture_shot img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .35s ease;
}
a.venture_shot:hover img { transform: scale(1.03); }

/* Ekran görüntüsü kırpılır, logo kırpılmaz — geniş sözcük-markalar `cover` ile
   iki yanından kesiliyordu. */
.venture_shot.is_logo { background: #fff; }
.venture_shot.is_logo img {
    object-fit: contain;
    object-position: center;
    padding: 40px 34px;
}
a.venture_shot.is_logo:hover img { transform: scale(1.05); }

/* Az satırlı kart kısa kalıyordu; gövde en az bu kadar yer tutar ki ray boyunca
   kartların alt kenarı aynı hizada dursun. */
.venture_body { padding: 20px 22px 24px; flex: 1 1 auto; min-height: 172px; }
.venture_body h3 { font-size: 19px; margin: 0 0 4px; }
.venture_body h3 a { color: var(--sg-ink); }
.venture_body h3 a:hover { color: var(--sg-red); text-decoration: none; }
.venture_body p { font-size: 13.5px; line-height: 1.8; color: var(--sg-muted); margin: 0; }

/* Durum gizlenmez: "altı girişim yürüyor" algısı hangisinin yayında olduğunu
   saklayarak değil, altısının da gerçekten var olmasıyla kurulur. */
.venture_status {
    font-size: 11.5px !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sg-red) !important;
    margin: 0 0 10px !important;
}

/* --- AR-GE bölümü --------------------------------------------------------- */

.rnd_program { margin-bottom: 14px; }
.rnd_program + .rnd_program { margin-top: 46px; }
/* 46 → 55 px (%20). Logo sözcük-markayı taşıdığı için başlık gizleniyor; dönem
   satırı doğrudan logonun altına geliyor. */
.rnd_logo { display: block; height: 55px; width: auto; margin-bottom: 12px; }
.rnd_name { margin: 0 0 2px; }
.rnd_name.sr-only + .rnd_period { margin-top: 0; }
.rnd_period {
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sg-muted);
    margin-bottom: 18px;
}

.rnd_facts { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--sg-line); }
.rnd_facts li {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--sg-muted);
    padding: 11px 0 11px 20px;
    border-bottom: 1px solid var(--sg-line);
    position: relative;
}
.rnd_facts li::before {
    content: "";
    position: absolute;
    left: 0; top: 19px;
    width: 6px; height: 6px;
    background: var(--sg-red);
}

/* Kardeş projeler künyenin altında TEK kutuda: ayrı ayrı durduklarında ikisi de
   yarım görünür. Sağ sütuna sığması için künyeden daha sıkı yazılıyor. */
.rnd_branches {
    margin-top: 22px;
    border: 1px solid var(--sg-line);
    border-top: 3px solid var(--sg-red);
    background: #fbfaf8;
    padding: 16px 18px 4px;
}
.rnd_branches_title {
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sg-muted);
}
.rnd_branch + .rnd_branch { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sg-line); }
.rnd_branch h5 { font-size: 15px; margin: 0 0 5px; color: var(--sg-red); font-weight: 700; }
.rnd_branch > p { font-size: 12.5px; line-height: 1.65; color: var(--sg-muted); margin: 0; }

/* Künye satırları: etiket solda dar sütunda, değer yanında. */
.rnd_branch_points {
    display: grid;
    grid-template-columns: 68px 1fr;
    column-gap: 10px;
    row-gap: 3px;
    margin: 10px 0 0;
}
.rnd_branch_points dt {
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9a948c;
    font-weight: 700;
    line-height: 1.6;
    padding-top: 1px;
}
.rnd_branch_points dd {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--sg-ink);
    margin: 0;
}

/* Gövde metninde marka adı: tema kırmızısı, kalın. `**ad**` ile işaretlenir. */
.brand_mark { color: var(--sg-red); font-weight: 700; }

/* --- Kurum logoları şeridi ------------------------------------------------ */

/* Logolar KARE tuvale normalleştirildi (240×240, kenar boşlukları kırpılıp yeniden
   ortalandı). Kendiliğinden kayan owl bandı yerine girişim rayıyla AYNI bileşen
   kullanılıyor: sürüklenebilir ray + iki ok. Kayan bant "devamı var" duygusunu
   vermiyordu; ok ve kaydırma çubuğu doğrudan söylüyor. */
.client_section .paddings { padding-bottom: 46px; }
.client_rail_wrap { position: relative; margin-top: 4px; }

.client_rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 20px;
    /* Bu rayda `scroll-snap` YOK: sürekli kayma ile çakışıyor. Snap açıkken tarayıcı
       her karede en yakın kaleme geri çekiyor ve şerit hiç ilerlemiyordu (ölçüldü:
       scrollLeft 50 verildi, 1.8'e döndü). */
    scrollbar-width: thin;
    scrollbar-color: #d5d0c9 transparent;
    cursor: grab;
}
.client_rail::-webkit-scrollbar { height: 6px; }
.client_rail::-webkit-scrollbar-thumb { background: #d5d0c9; }

.client_item {
    flex: 0 0 132px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sg-line);
    background: #fff;
    /* Tam gri + %50 saydamlık fazla silikti; logo tanınmıyordu. Gri tonlama
       kalıyor ama sönümleme hafif, imleçte tamamen rengine dönüyor. */
    filter: grayscale(1);
    opacity: .82;
    transition: .3s all ease;
}
.client_item img { max-height: 104px; max-width: 104px; width: auto; }
.client_item:hover {
    filter: none;
    opacity: 1;
    border-color: #cfc9c1;
    box-shadow: 0 4px 16px rgba(43, 42, 41, .1);
}

/* Kumanda satırı: oklar solda, uzaya iniş bağlantısı sağda. İkisi de rayın
   DIŞINDA duruyor — ok rayın içindeyken ilk ve son logonun üstünü kapatıyordu. */
/* Oklar solda, düğme sağda. Saat artık sınırın altına indiği için ikisi çakışmıyor. */
.client_tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
}
.client_tools_nav { display: flex; gap: 8px; }
.client_rail_wrap.is-live .client_tools_nav .rail_nav { position: static; }

/* Uzaya iniş düğmesi: marka kırmızısı, belirgin. */
.client_more_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--sg-red);
    border: 0;
}
.client_more_link:hover,
.client_more_link:focus { color: #fff; background: #8f0d12; text-decoration: none; }
.client_more_link i { font-size: 15px; }

/* İki bölümü bağlayan sonsuz saat spirali. Yarısı açık bölümde, yarısı koyuda;
   ağır ağır dönüyor, hafifçe inip kalkıyor. `difference` karışımı sayesinde zemin
   ne olursa olsun görünür kalıyor — saydam bir görselin koyu zeminde kaybolma
   sorunu bu yüzden hiç doğmuyor, tek dosya iki zemine birden yetiyor. */
/* Görselin kendi dönüşü var; CSS yalnız yumuşak bir inip kalkma ekliyor.
   `difference` karışımı KALDIRILDI: görsel renkli (gri kadran, mavi çentik) ve
   ters çevrilince kimliğini kaybediyor. Saydam zeminiyle koyu bölümde okunuyor. */
.section_clock {
    position: relative;
    height: 0;
    z-index: 4;
    pointer-events: none;
    animation: clock_bob 5.4s ease-in-out infinite;
}
.section_clock img {
    position: absolute;
    right: 7%;
    /* Tamamen sınırın ALTINDA: yukarı taşmıyor. Salınımın en üst noktası
       (-6px) bile çizgiyi geçmesin diye 10 px pay bırakıldı. */
    top: 10px;
    width: 200px;
    height: 200px;
}

@keyframes clock_bob {
    0%, 100% { transform: translateY(-6px); }
    50% { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
    .section_clock { animation: none; }
}


/* Uzayın giriş şeridi. Degrade denendi ve iki bölümü daha da kopardı; şerit artık
   uzayın kendi koyu zemininde duruyor, geçişi sarkaç kuruyor. */
/* Özet şeridi gri tonda: uzayın koyu zemini ile açık bölüm arasında bir ara ton
   olarak duruyor, sayılar öne çıkıyor. */
.space_bridge {
    background: linear-gradient(180deg, #363b45 0%, #23272f 100%);
    padding: 44px 0 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.space_figures {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 56px;
}
.space_figures li { display: flex; flex-direction: column; }
.space_figures strong {
    font-size: 27px;
    line-height: 1.15;
    color: #f4f2ef;
    font-weight: 700;
    letter-spacing: .01em;
}
.space_figures span {
    font-size: 11.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #a8a49e;
    margin-top: 3px;
}

@media (max-width: 767px) {
    .client_item { flex-basis: 108px; height: 98px; }
    .client_item img { max-height: 84px; max-width: 84px; }
    .client_tools { flex-direction: column; align-items: stretch; gap: 12px; }
    .client_tools_nav { justify-content: center; }
    .client_more_link { justify-content: center; }
    /* Telefonda kumanda satırı tam genişliğe yayılıyor; saat sınırın üstüne
       taşarsa düğmenin üstüne biniyor. Orada tamamen koyu bölümün içinde durur. */
    .section_clock img { right: 4%; top: 10px; width: 132px; height: 132px; }
    .space_bridge { padding: 34px 0 18px; }
    .space_figures { gap: 14px 28px; }
    .space_figures strong { font-size: 21px; }
    .space_figures span { font-size: 10.5px; }
}

/* --- Referans uzayı ------------------------------------------------------- */

/* Sayfanın tek koyu bölümü. Kimlik değişmiyor: marka kırmızısı burada yalnız
   "özel yazılım" gemilerinin rengi olarak var. Yerleşim SUNUCUDA hesaplanır ve
   satır içi stil olarak gelir; betik yüklenmese bile kapsayıcı yatay kaydırılır
   (docs/memory/K-0029 emniyet ağı). */
.ref_space_section {
    background: linear-gradient(180deg, #14161b 0%, #1b1e25 55%, #14161b 100%);
    color: #d8d5d0;
    overflow: hidden;
}
.ref_space_section .space_title { color: #fff; }
.ref_space_section .space_note { color: #9a968f; }
.ref_space_section .paddings { padding-bottom: 10px; }

.ref_legend { list-style: none; margin: 0 0 4px; padding: 0; }
.ref_legend li {
    display: inline-block;
    margin: 0 22px 8px 0;
    font-size: 12px;
    letter-spacing: .04em;
    color: #8e8a84;
}
.ref_legend_dot {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

/* Gemi renkleri — ürün ve iş türünü temsil eder. Çözüm alanı eşlemesi kasten
   yapılmadı: bir web sitesi işini "endüstriyel IoT" rengine boyamak ölçek
   şişirmedir (docs/memory/K-0007 §4). */
.kind-arge    { color: #e0ad3f; }
.kind-girisim { color: #5ec2a8; }
.kind-yazilim { color: #d8474d; }
.kind-web     { color: #4b8fc9; }
.kind-donanim { color: #4f9d6c; }
.kind-kurulum { color: #d98b45; }
.kind-bakim   { color: #8d8880; }
.kind-tasarim { color: #9a7bc0; }

/* Uzayda metin seçilmez: sürükleyerek gezerken imleç metni işaretliyor ve gemiler
   mavi seçim zemininde kalıyordu. */
.ref_space { position: relative; user-select: none; -webkit-user-select: none; }

.ref_space_viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4a transparent;
}
.ref_space_viewport.is-dragging { cursor: grabbing; }
.ref_space_viewport::-webkit-scrollbar { height: 6px; }
.ref_space_viewport::-webkit-scrollbar-thumb { background: #3a3f4a; }

.ref_stage { position: relative; height: 620px; }

/* Yıldız tozu: iki katman, kaydırmada farklı hızda kayar (parallax). Görsel
   dosyası yok — degradelerle çiziliyor, ağ isteği eklemiyor. */
.ref_stars {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    will-change: background-position;
}
.ref_stars_far {
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.34) 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,.26) 50%, transparent 50%),
        radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,.22) 50%, transparent 50%);
    background-size: 260px 220px, 340px 300px, 190px 260px;
}
.ref_stars_near {
    background-image:
        radial-gradient(1.6px 1.6px at 15% 60%, rgba(255,255,255,.5) 50%, transparent 50%),
        radial-gradient(1.6px 1.6px at 80% 25%, rgba(255,255,255,.4) 50%, transparent 50%);
    background-size: 420px 380px, 520px 460px;
}

/* Omurga cetvel değil, soluk bir hat. */
.ref_spine {
    position: absolute;
    left: 0; right: 0;
    top: 296px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 6%, rgba(255,255,255,.16) 94%, transparent);
}

/* Süren dönem kuşağı: gemi değil, aralığı kaplayan çubuk. Gemilerle aynı şeritleri
   kullanır (şerit sınıfı `top`u verir), 86 px'lik yuvanın ortasına oturur. */
.ref_band {
    position: absolute;
    height: 36px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: 3px solid currentColor;
    transition: background-color .18s ease, border-color .18s ease;
}
/* Bir şeride iki kuşak sığar (86 px yuva, 36 px kuşak). */
.ref_band.slot-0 { margin-top: 5px; }
.ref_band.slot-1 { margin-top: 45px; }

/* AR-GE kuşakları öne çıkar: sayfanın anlattığı şey bu hat. Girişimler kendi
   renginde ama daha sakin durur. */
.ref_band.kind-arge {
    background: linear-gradient(90deg, rgba(224, 173, 63, .3), rgba(224, 173, 63, .08));
    border-color: rgba(224, 173, 63, .45);
    border-left-width: 4px;
}
.ref_band.kind-arge .ref_band_label { color: #f3d894; font-weight: 700; letter-spacing: .02em; }
.ref_band.kind-arge .ref_band_label em { color: rgba(243, 216, 148, .62); }
.ref_ship.kind-arge {
    background: rgba(224, 173, 63, .13);
    border-color: rgba(224, 173, 63, .3);
}
.ref_ship.kind-arge .ref_ship_title { color: #f3d894; }

.ref_band.kind-girisim {
    background: linear-gradient(90deg, rgba(94, 194, 168, .2), rgba(94, 194, 168, .05));
    border-color: rgba(94, 194, 168, .32);
}
.ref_band:hover {
    background: #232730;
    border-color: rgba(255, 255, 255, .34);
    border-left-color: currentColor;
    z-index: 5;
}

/* Kuşak ekrandan uzun: etiket sola yapışıp kayarken görünür kalıyor. */
.ref_band_label {
    position: sticky;
    left: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 14px;
    white-space: nowrap;
    font-size: 12px;
    color: #e6e3df;
}
.ref_band_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    align-self: center;
}
.ref_band_label em { font-style: normal; font-size: 11px; color: #86817a; }
.ref_band:hover .ref_band_label em { color: #cdc9c3; }

/* Marka kulakçığı: sol kenardaki renk şeridi, içinde 90° döndürülmüş sözcük-marka.
   Logo dosyası bu ölçüde (20 px) okunmuyor; sözcük-marka okunuyor ve her marka için
   ayrıca dosya gerektirmiyor. */
.has_brand { padding-left: 26px; }
.ref_brand_tab {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    color: currentColor;
    background: rgba(255, 255, 255, .07);
    border-right: 1px solid rgba(255, 255, 255, .12);
}
.ref_band.has_brand .ref_band_label { padding-left: 8px; }

.ref_year { position: absolute; top: 0; height: 100%; }
.ref_year_num {
    position: absolute;
    top: 324px;
    left: 0;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .07);
    line-height: 1;
    user-select: none;
}
.ref_year_tick {
    position: absolute;
    top: 286px;
    left: 0;
    width: 1px; height: 20px;
    background: rgba(255, 255, 255, .22);
}

/* Gemiler. Durağan hâlde okunaklılık kasten düşük: amaç okumak değil, çokluğu
   görmek. Üzerine gelince öne çıkar ve kurum adı netleşir. */
/* YÜKSEKLİK SABİT: metin uzunluğuna bırakılınca gemiler 73–119 px arasında
   değişiyor ve 96 px'lik şerit aralığını taşırıp alt şeride biniyordu (ölçüldü:
   66 çakışma). Metin kırpılıyor, tamamı imleçle açılıyor. */
.ref_ship {
    position: absolute;
    width: 164px;
    height: 86px;
    padding: 9px 12px 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 2px solid currentColor;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.ref_ship:hover, .ref_ship:focus-within {
    background: #232730;
    border-color: rgba(255, 255, 255, .3);
    border-left-color: currentColor;
    transform: translateY(-3px);
    height: auto;
    min-height: 86px;
    z-index: 5;
}

/* Üç şerit omurganın üstünde, üç şerit altında. Gemi yüksekliği ~86 px olduğu için
   şerit aralığı 96 px; omurga 296'da duruyor. lane-5 önce 200 px'e yazılmıştı ve
   lane-2 ile üst üste biniyordu. */
.lane-0 { top: 14px; }
.lane-1 { top: 110px; }
.lane-2 { top: 206px; }
.lane-3 { top: 326px; }
.lane-4 { top: 422px; }
.lane-5 { top: 518px; }

.ref_ship_dot {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-bottom: 7px;
}
.ref_ship_title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.35;
    color: #e6e3df;
    margin-bottom: 4px;
}
.ref_ship_client {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #86817a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .18s ease;
}
.ref_ship:hover .ref_ship_title { -webkit-line-clamp: unset; overflow: visible; }
.ref_ship:hover .ref_ship_client { color: #cdc9c3; white-space: normal; overflow: visible; }
.ref_ship_client em { font-style: normal; opacity: .6; margin-left: 6px; }

/* Dönem yoğunluğu işareti: uzayın en alt hattı. Kurum adı taşımaz, yalnız sayı.
   Hepsi aynı şeritte olduğu için okuyucu tek tek "+6" değil, dipte uzayan bir
   sayı hattı görüyor. */
.ref_marker {
    position: absolute;
    width: 128px;
    height: 66px;
    margin-top: 12px;
    padding: 8px 10px;
    text-align: center;
    color: #9a948c;
    background: rgba(255, 255, 255, .04);
    border: 1px dashed rgba(255, 255, 255, .17);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ref_marker:hover {
    background: #232730;
    border-color: rgba(255, 255, 255, .34);
    color: #cdc9c3;
    z-index: 5;
}
.ref_marker_count {
    display: block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: #cdc9c3;
}
.ref_marker_unit {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6f6a64;
}
.ref_marker_period { display: block; margin-top: 4px; font-size: 10.5px; color: #6f6a64; }

.ref_cluster { width: 116px; height: 86px; text-align: center; }
.ref_cluster .ref_ship_dot { margin: 0 auto 7px; }
.ref_cluster .ref_ship_title { font-size: 14px; font-weight: 700; color: currentColor; }

/* Mini harita: asıl "ne kadar çok" etkisini üreten yer — 21 yılın tamamı tek
   şeritte, yoğunluk histogramı olarak. */
.ref_minimap { padding: 16px 0 4px; }
.ref_minimap_track {
    position: relative;
    height: 34px;
    margin: 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    cursor: pointer;
}
.ref_tick {
    position: absolute;
    bottom: 0;
    width: 2px; height: 13px;
    background: currentColor;
    opacity: .55;
}
/* Dönem kuşağının haritadaki karşılığı: nokta değil, aralık. */
.ref_span {
    position: absolute;
    bottom: 15px;
    height: 4px;
    min-width: 3px;
    background: currentColor;
    opacity: .4;
}
.ref_minimap_year {
    position: absolute;
    top: 0;
    font-size: 10.5px;
    letter-spacing: .06em;
    color: #6f6a64;
    transform: translateX(-50%);
}
.ref_minimap_window {
    position: absolute;
    bottom: 0;
    height: 13px;
    background: rgba(255, 255, 255, .16);
    border-left: 1px solid rgba(255, 255, 255, .45);
    border-right: 1px solid rgba(255, 255, 255, .45);
    pointer-events: none;
    display: none;
}
.ref_space.is-live .ref_minimap_window { display: block; }

.ref_space_hint {
    margin: 6px 40px 0;
    font-size: 12px;
    color: #6f6a64;
    padding-bottom: 34px;
}

@media (max-width: 991px) {
    .venture_card { flex-basis: 280px; }
}

@media (max-width: 767px) {
    .venture_card { flex-basis: 258px; }
    .venture_body { min-height: 0; }
    .venture_rail { gap: 16px; }
    .venture_rail_wrap.is-live .rail_nav,
.client_rail_wrap.is-live .rail_nav { width: 38px; height: 38px; }

    .ref_stage { height: 560px; }
    .ref_spine { top: 268px; }
    .ref_ship { width: 148px; padding: 7px 10px 8px; }
    .ref_ship_title { font-size: 11.5px; }
    .ref_band { height: 32px; }
    .ref_band.slot-0 { margin-top: 5px; }
    .ref_band.slot-1 { margin-top: 43px; }
    .ref_band_label { font-size: 11px; padding: 0 10px; gap: 6px; }
    .ref_band_label em { display: none; }
    .lane-0 { top: 10px; }
    .lane-1 { top: 96px; }
    .lane-2 { top: 182px; }
    .lane-3 { top: 296px; }
    .lane-4 { top: 382px; }
    .lane-5 { top: 468px; }
    .ref_year_num { font-size: 28px; top: 294px; }
    .ref_year_tick { top: 258px; }
    .ref_minimap_track, .ref_space_hint { margin-left: 18px; margin-right: 18px; }
}

/* Hareket azaltma açıkken parallax ve yükselme kapanır; uzay düz bir şerit olur. */
@media (prefers-reduced-motion: reduce) {
    .ref_stars { background-position-x: 0 !important; }
    .ref_ship { transition: none; }
    .ref_ship:hover { transform: none; }
}

/* --- 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; }
}

/* --- Çok dillilik (docs/memory/K-0034) ------------------------------------- */

/* Menü ve altbilgi sütun başlıkları BÜYÜTÜLMEZ burada — denendi ve Türkçe için
   yanlış çıktı verdi: CSS `text-transform: uppercase`, `lang="tr"` set olsa bile
   "i" harfini noktalı "İ"ye çevirmiyor ("Teknoloji" → "TEKNOLOJI", noktasız).
   Büyütme _Layout.cshtml'de `Up()` yardımcısıyla `CultureInfo.CurrentUICulture`
   üzerinden sunucuda yapılıyor; aynı alan başka yerde normal harfle de
   kullanıldığı için veride değil yalnız görüntüleme noktasında büyütülüyor. */

/* Open Sans'ın Arapça karakteri yok; yalnız `ar` sayfalarında Noto Sans Arabic
   yükleniyor (bkz. _Layout.cshtml <link>, yalnız o dilde istekte bulunuluyor)
   ve burada devreye alınıyor. */
:lang(ar) {
    font-family: 'Noto Sans Arabic', 'Open Sans', sans-serif;
}

/* Kısmi RTL: gövde metni sağdan sola akar, menü/ızgara/slider gibi yapısal
   bileşenler bu turda aynalanmaz — tema (Bootstrap 3 + Revolution Slider +
   Superfish) hiçbir yerde RTL için tasarlanmamış, tam ayna ayrı ve büyük bir iş
   (K-0034). `dir="rtl"` zaten `<html>`'den miras aldığı için hizasız çoğu metin
   kendiliğinden sağa yaslanıyor; burada yalnız temanın kalıp olarak sol/ortalı
   bıraktığı gövde bileşenleri ve pasaj alıntısının vurgu çizgisi düzeltiliyor.
   Seçiciler kasıtlı olarak `.content_info`, sayfa başlığı ve künye alanlarıyla
   sınırlı — üst şerit, menü ve altbilgi (fiziksel float tabanlı ızgara) kapsam
   dışında bırakıldı. */
[dir="rtl"] .content_info p,
[dir="rtl"] .content_info li,
[dir="rtl"] .content_info address,
[dir="rtl"] section.section_title p,
[dir="rtl"] .info_vertical p,
[dir="rtl"] .registry {
    text-align: right;
}

[dir="rtl"] .pull_quote {
    border-left: 0;
    border-right: 3px solid var(--sg-red);
    padding: 4px 26px 4px 0;
    text-align: right;
}

@media (max-width: 767px) {
    [dir="rtl"] .pull_quote { padding-right: 18px; }
}