/* ==========================================================================
   Baycan - main.css uzerine sayfaya ozel duzeltmeler
   main.css derlenmis bir dosya (main.css.map var), o yuzden override buraya.
   ========================================================================== */

:root {
   /* Favicon olarak da kullanilan marka ikonu. Ikon degisirse tek yer burasi. */
   --baycan-icon-url: url("../images/baycan/baycan-icon.svg");

   /* Sayac animasyon suresi. Odometer varsayilani 2s. */
   --baycan-odometer-duration: 4s;
}

/* --------------------------------------------------------------------------
   "Yatirimci Iliskileri" butonu - menude biraz daha sola

   .header-wrapper "justify-content: space-between" (main.css:1736) ile
   dizildigi icin buton header'in en sag kenarina yapisiyor. Sag kenardan
   bosluk verip butonu sola cekiyoruz; menu ile arasindaki mesafeyi
   space-between yine kendisi dengeler.

   Space-between 3 ogeyi (logo / menu / buton) esit bosluklarla dagittigi icin
   butonu 40px sola almak menuyu de 20px sola alir; bu beklenen davranis.

   Not: ~1250px altinda buton, sablonun kendi davranisi olarak alt satira
   duser (.header-wrapper flex-wrap: wrap) ve o durumda satir basinda
   durdugu icin bu bosluk gorunmez; yani dar ekranlarda bir etkisi yok.
   -------------------------------------------------------------------------- */
.tj-header-area.header-2 .header_right_info {
   /* butonun sag kenardan uzakligi; tek ayar noktasi */
   --baycan-menu-btn-shift: 40px;

   -webkit-margin-end: var(--baycan-menu-btn-shift);
           margin-inline-end: var(--baycan-menu-btn-shift);
}

/* --------------------------------------------------------------------------
   "Yatirimci Iliskileri" linki - cerceve

   Link artik .menu_btn'in ICINDE degil, .header-wrapper'in dogrudan flex
   cocugu (header.blade.php). Iki sonucu var:
   1) main.js:101 tiklamayi $(".menu_btn") ile butona bagladigi icin yaziya
      basmak artik drawer'i acmiyor; sadece dort kare ikon aciyor.
   2) Yazi, .menu_btn'den miras aldigi 18px/700'u kaybetti (main.css:2036).
      O yuzden olculer burada yeniden yaziliyor.

   Tema bu linki hedefleyen hicbir kural tasimiyor (tek eleman kurali
   "a { text-decoration: none }", main.css:168), bu yuzden tek sinif ve
   !important'siz bir blok yetiyor. baycan.css main.css'ten SONRA yuklendigi
   icin esit ozgullukte zaten kazaniyor.
   -------------------------------------------------------------------------- */
.baycan-ir-link {
   /* cerceve ile yazi arasi - "cerceve yaziya cok yakin olmasin" ayari */
   --baycan-ir-pad-y: 10px;
   --baycan-ir-pad-x: 18px;

   /* 0 = duz dikdortgen (istek). Yumusatmak icin tek deger degistirmek yeter. */
   --baycan-ir-radius: 0;

   /* inline-flex: dikey padding bir <a>'da ancak boyle yer kaplar; satir ici
      kalirsa cerceve satir kutusunu tasar. line-height:1 - cerceve yazinin
      uzerine oturur, header'i uzatmaz. */
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   line-height: 1;

   /* Ana menu linkleriyle ayni: 18px / 700. */
   font-size: 18px;
   font-weight: var(--tj-fw-bold);

   /* Renk eskiden markup'ta satir ici duruyordu; satir ici stil her seciciyi
      ezdigi icin hover'da yazi rengi degistirilemiyordu. */
   color: var(--tj-color-theme-primary);

   padding: var(--baycan-ir-pad-y) var(--baycan-ir-pad-x);
   border: 1px solid var(--tj-color-common-white);
   border-radius: var(--baycan-ir-radius);

   -webkit-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
           transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Cerceveli bir link hover'da hicbir sey yapmazsa tiklanabilir gorunmuyor.
   En sade geri bildirim: cerceve marka mavisiyle doluyor, yazi beyaza donuyor.
   Istenmezse bu blok tek basina silinebilir, gerisi etkilenmez. */
.baycan-ir-link:hover,
.baycan-ir-link:focus-visible {
   background-color: var(--tj-color-theme-primary);
   border-color: var(--tj-color-theme-primary);
   color: var(--tj-color-common-white);
}

/* --------------------------------------------------------------------------
   Odometer sayma suresi

   Odometer, tarayici transition destekliyorsa animateSlide kullanir; bu modda
   sureyi JS DEGIL, tema CSS'i belirler (odometer-theme-default.css:59 ve :80,
   "transition: transform 2s"). Sadece transition-duration'i eziyoruz.

   Not: JS'teki options.duration (varsayilan 2000ms) sadece serit basina uretilen
   ara deger sayisini belirler (MAX_VALUES = duration / 33.3 / 2 = 30), toplam
   sureyi degil. Oldugu gibi biraktik: 30 ara deger 2s yerine 4s'ye yayildigi
   icin rakamlar yari hizda doner. Rakamlarin eskisi kadar hizli donup sadece
   daha uzun surmesini isterseniz odometerOptions'a duration: 4000 ekleyin.
   -------------------------------------------------------------------------- */
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
   -webkit-transition-duration: var(--baycan-odometer-duration);
      -moz-transition-duration: var(--baycan-odometer-duration);
        -o-transition-duration: var(--baycan-odometer-duration);
           transition-duration: var(--baycan-odometer-duration);
}

/* --------------------------------------------------------------------------
   Counter (h10-counter-section)

   Sorun: .counter-item-inner 190px ile sinirli (main.css:32106) ve
   .counter-item.style-2 her yandan 80px padding aliyor. 70px'lik yazida
   "60,000 m²" bu alana sigmadigi icin sayi alt alta kiriliyordu.
   ("1,000+" de ayni sebepten "1,0 / 00" olarak kiriliyordu.)

   Cozum: kutuyu icerige gore buyut, yaziyi ekran genisligine gore olcekle,
   sayinin kendi icinde kirilmasini kapat.
   -------------------------------------------------------------------------- */
.h10-counter-section .counter-item.style-2 {
   padding-inline: 40px;
}

@media (max-width: 1199px) {
   .h10-counter-section .counter-item.style-2 {
      padding-inline: 20px;
   }
}

.h10-counter-section .counter-item.style-2 .counter-item-inner {
   width: -webkit-max-content;
   width: max-content;
   max-width: 100%;
   margin-inline: auto;
}

.h10-counter-section .counter-item .number {
   /* main.css'teki 70/60/54/44/40px breakpoint zincirinin yerine gecer */
   font-size: clamp(26px, 3.4vw, 70px);
   white-space: nowrap;
}

.h10-counter-section .counter-item .sub-title {
   white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Counter ayraclari - noktali daire yerine Baycan ikonu

   Template, ayrac cizgilerinin ortasina "ortasi noktali daire" koyuyordu:
     .counter-item::before        -> 12px daire (main.css:11149 + 32115)
     .counter-item::after         -> 20px disk, cizgiyi maskeliyor (main.css:11164)
     .bottom-line::before/::after -> ayni isin mobil (yatay cizgi) karsiligi
                                     (main.css:11033 / 11092)

   Burada ::before'u favicon ikonuna ceviriyoruz, ::after'i da ikonun arkasindaki
   koyu disk yapiyoruz. ::after'in z-index:-1 olmasi onu .counter-item'in kendi
   border'inin USTUNE boyatir; ayrac cizgisi ikonun altinda boylece kesilir.
   -------------------------------------------------------------------------- */
.h10-counter-section {
   --baycan-marker: 32px;      /* ikon boyutu */
   --baycan-marker-bg: 46px;   /* arkadaki maskeleme diski */
}

@media only screen and (max-width: 991px) {
   .h10-counter-section {
      --baycan-marker: 26px;
      --baycan-marker-bg: 38px;
   }
}

@media (max-width: 575px) {
   .h10-counter-section {
      --baycan-marker: 22px;
      --baycan-marker-bg: 32px;
   }
}

/* Dikey ayrac (masaustu + mobilde 1. ve 2. sutun arasi) */
.h10-counter-section .counter-item.style-2::before,
.h10-counter-section .counter-item:not(:nth-last-child(-n+2)) .bottom-line::before {
   width: var(--baycan-marker);
   height: var(--baycan-marker);
   border: none;
   border-radius: 0;
   background-color: transparent;
   background-image: var(--baycan-icon-url);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

.h10-counter-section .counter-item.style-2::after,
.h10-counter-section .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::after {
   width: var(--baycan-marker-bg);
   height: var(--baycan-marker-bg);
   background-color: var(--tj-color-theme-dark);
}

.h10-counter-section .counter-item.style-2::before {
   inset-inline-end: calc(var(--baycan-marker) / -2);
}

.h10-counter-section .counter-item.style-2::after {
   inset-inline-end: calc(var(--baycan-marker-bg) / -2);
}

/* Yatay ayrac (mobilde 1./2. satir arasi) */
@media (max-width: 767px) {
   .h10-counter-section .counter-item:not(:nth-last-child(-n+2)) .bottom-line::before {
      bottom: calc(var(--baycan-marker) / -2);
   }

   .h10-counter-section .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::after {
      bottom: calc(var(--baycan-marker-bg) / -2);
   }
}

/* --------------------------------------------------------------------------
   Musteri logolari (.h9-brands) - logolari %15 kucult

   Logolarin hepsi 620x161 ve main.css:30990'da sadece "max-width: 100%" var;
   yani logo, grid hucresinin tam genisligini kapliyor ve kenarliklara degiyor.

   img'e max-width vermek yerine sarmalayici div'i olcekliyoruz: hover'daki
   ikinci logo (img:first-child) inset:0 ile mutlak konumlu, ona ayri bir
   max-width verilirse iki katman birbirinden kayar. Parent'a uygulanan scale
   iki katmani da ayni oranda kucultur, hover gecisi de aynen calisir.
   Transform layout'u etkilemedigi icin hucre yuksekligi/gridi degismez.
   -------------------------------------------------------------------------- */
.h9-brands {
   /* 1 = orijinal boyut; kucultmek/buyutmek icin tek yer burasi */
   --baycan-brand-scale: 0.85;
}

.h9-brands .brand_item div {
   -webkit-transform: scale(var(--baycan-brand-scale));
       -ms-transform: scale(var(--baycan-brand-scale));
           transform: scale(var(--baycan-brand-scale));
}

/* --------------------------------------------------------------------------
   Musteri logolari - kayan serit (swiper)

   main.css:30963 bolumu 7 sutunlu bir grid; slider'a cevirmek icin gridi
   kapatiyoruz. Hucre gorunumu (192px yukseklik, beyaz zemin, kenarliklar)
   .brand_item'dan aynen gelmeye devam ediyor; .brand_item artik ayni zamanda
   .swiper-slide oldugu icin genisligi Swiper veriyor (bkz. baycan.js).

   Sutun sayisi = slidesPerView (baycan.js'teki breakpoints), o yuzden buradaki
   grid-template-columns media query'leri de otomatik olarak devre disi kalir.
   -------------------------------------------------------------------------- */
.h9-brands.baycan-brands {
   display: block;
}

/* --------------------------------------------------------------------------
   Service ikonlari (.service-icon) - ikon fontu yerine Baycan ikonu

   HTML'de <i class="tji-optimization"> gibi ikon fontu glifleri var. Glifi
   ureten :before'u kapatip <i>'nin kendisine SVG'yi background olarak veriyoruz.
   <i> yerinde kaldigi icin main.css:11858'deki hover animasyonu (wobble) calisir.

   Boyut em cinsinden: .service-icon'un font-size'i main.css'te 70/60/50px olarak
   breakpoint'lere gore degisiyor, ikon da onunla birlikte olceklenir.
   -------------------------------------------------------------------------- */
.service-icon {
   /* daire yazi boyunun kaci kadar; ikonu buyutmek/kucultmek icin bunu degistirin */
   --baycan-service-icon: 0.85em;
}

.service-icon i::before {
   content: none;
}

.service-icon i {
   display: block;
   width: var(--baycan-service-icon);
   height: var(--baycan-service-icon);
   background-image: var(--baycan-icon-url);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

/* --------------------------------------------------------------------------
   Sektorler slider'i (index.html:398) - gorsel uzerindeki karartma

   Karartma .project-item::before'dan geliyor (main.css:10334): asagi dogru
   seffaftan --tj-color-theme-dark'a giden bir gradient. Gradient'in kendi
   renk duraklarini degistirmek yerine katmanin tamamina opacity veriyoruz;
   boylece ustten asagi yumusak gecis aynen korunur, sadece yogunlugu yariya
   iner (en koyu nokta artik %100 degil %50).

   Baslik/ok yazisi ::before'un ustunde (z-index: 5 > 3) oldugu icin
   okunurlugu bu degisiklikten etkilenmez.
   -------------------------------------------------------------------------- */
.tj-project-section .project-item::before {
   /* karartmanin gorunurlugu: 1 = orijinal, 0 = karartma yok */
   --baycan-project-overlay: 0.5;

   opacity: var(--baycan-project-overlay);
}

/* --------------------------------------------------------------------------
   Kenar menusu (sidebar) - kaydirmayla birlikte hareket etsin

   Kural bilesenin kendisine bagli, sayfaya degil: bugun iki sidebar var
   (partials/page-sidebar.blade.php ve news/show.blade.php) ama yarin eklenecek
   olan da bunu kendiliginden alsin. Bu yuzden isaretleyici bir sinif yerine
   dogrudan .tj-post-sidebar seciliyor - eklemesi unutulan sinif sessiz bir
   hataya donusur.

   Olculer uydurma degil: temanin kendi yardimci sinifi .tj-sticky-top
   (main.css:19430) 120px, 992-1199 arasinda 100px kullaniyor ve 992 altinda
   yapiskanligi kapatiyor. Ayni degerler, ayni kirilma noktasi.

   .tj-post-sidebar'in temada hicbir kurali yok; bu blok o secicinin tek
   sahibi. Bootstrap .row zaten flex oldugu icin .col-lg-4 satir boyunca
   uzuyor, yani aside'in kayacak yeri var - ek bir yukseklik ayari gerekmez.

   DIKKAT: .tj-sidebar-widget SECILMEZ. download_section.blade.php ayni widget
   primitifini kullaniyor ama o bir sayfa bileseni, icerik sutununun icinde
   duruyor ve yapiskan olmamali.

   Ikinci kisim (max-height + overflow) uzun sidebar icin: position: sticky
   ekrandan uzun bir kutuyu kaydiramaz, alt kismi hicbir zaman gorunur alana
   giremez. Kalabalik bir alt menude son maddeler erisilemez kalirdi. Kutu
   max-height'a degmedigi surece overflow: auto kaydirma cubugu uretmez, yani
   kisa sidebar'larda bu kural hicbir sey yapmaz.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
   .tj-post-sidebar {
      /* Ust bosluk - temanin .tj-sticky-top degeri; sabit header (~90px) bunun altinda kalir */
      --baycan-sidebar-top: 120px;

      /* Uzun sidebar ekranin altinda birakacagi nefes payi */
      --baycan-sidebar-gap: 30px;

      position: sticky;
      top: var(--baycan-sidebar-top);
      z-index: 1;

      max-height: calc(100vh - var(--baycan-sidebar-top) - var(--baycan-sidebar-gap));
      overflow-y: auto;

      /* overflow-y: auto, overflow-x'i de auto'ya cevirir; uzun bir menu basligi
         yatay cubuk dogurmasin diye acikca kapatiyoruz. */
      overflow-x: hidden;

      /* Ic kaydirma cubugu: gerektiginde gorunur, ama sessiz. */
      scrollbar-width: thin;
      scrollbar-color: var(--tj-color-border-2) transparent;
   }

   .tj-post-sidebar::-webkit-scrollbar {
      width: 4px;
   }

   .tj-post-sidebar::-webkit-scrollbar-thumb {
      background-color: var(--tj-color-border-2);
      border-radius: 4px;
   }
}

/* Temanin kendi ara kirilmasi (main.css:19435): bu aralikta ust bosluk 100px.
   Yalnizca degiskeni yeniden isaretliyoruz - top ve max-height onu takip eder. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .tj-post-sidebar {
      --baycan-sidebar-top: 100px;
   }
}

/* --------------------------------------------------------------------------
   Birincil buton (.tj-primary-btn) - ok yerine Baycan ikonu

   Butonun mavi dairesinin icinde tji-arrow-right ikon fontu glifi duruyordu.
   Glifi ureten :before kapatiliyor ve <i>'nin kendisine SVG maske olarak
   veriliyor. Her iki <i> de yerinde kaliyor: main.css:760-768 hover'da birini
   saga, digerini soldan iceri kaydiriyor - ikisi de silinmemeli.

   Neden background-image degil de mask-image:
   baycan-icon.svg rengini kendi icinde sabitliyor (.cls-1 { fill: #149bd7 }).
   O camgobegi, dairenin mavisi (--tj-color-theme-primary: #0075ff) uzerinde
   neredeyse gorunmez kalirdi. Maske SVG'nin yalnizca alfa kanalini alir, rengi
   currentColor verir; boylece ikon .btn_icon'un beyazini (main.css:686) miras
   alir ve hover'da daire tum butonu doldurdugunda da, .white-btn varyantinda
   da dogru renkte kalir. Tek kural, butun durumlar.

   Bu, dosyanin yukarisindaki .service-icon blogu ile CELISKI DEGIL: orada ikon
   acik zeminde duruyor ve marka camgobegi isteniyor. Ikisini birlestirmeyin.

   Boyut em cinsinden: .btn_icon'un font-size'i masaustunde 1.6em, 575px altinda
   ve .header_btn varyantinda 1.4em (main.css:750, 788). em kullanmak bu
   olceklemeyi bedavaya alir; px kullanmak dar ekranlarda sessizce bozardi.
   -------------------------------------------------------------------------- */
.tj-primary-btn .btn_inner .btn_icon {
   /* ikonun daire yazi boyuna orani; buyutmek/kucultmek icin tek ayar noktasi */
   --baycan-btn-icon: 0.8em;
}

.tj-primary-btn .btn_inner .btn_icon i::before {
   content: none;
}

.tj-primary-btn .btn_inner .btn_icon i {
   display: block;
   width: var(--baycan-btn-icon);
   height: var(--baycan-btn-icon);

   /* Rengi maske veriyor: .btn_icon'un color'i (beyaz) buraya currentColor
      olarak geliyor. Sabit bir renk YAZMAYIN - hover ve .white-btn bozulur. */
   background-color: currentColor;

   -webkit-mask-image: var(--baycan-icon-url);
           mask-image: var(--baycan-icon-url);
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
   -webkit-mask-position: center;
           mask-position: center;

   /* contain: gorsel 38.6x35.57, yani kareden biraz genis. cover kirpardi. */
   -webkit-mask-size: contain;
           mask-size: contain;
}

/* Sayfa başlığı bandındaki koyu örtüyü kaldırır.
   main.css:6473-6482 .tj-page-header::before'a rgba(5,18,41,.8) — %80 opak lacivert — basıyor.
   Banner görselleri bandın arkasına geldiği andan itibaren bu örtü fotoğrafı neredeyse düz bir
   renge indiriyordu; müşteri kararı: örtü kalksın.

   display:none DEĞİL, background-color:transparent: pseudo-element yerinde kalıyor (absolute,
   z-index:-1, hiçbir şeyi itmiyor) ve değişiklik tek bir bildirimin tek bir bildirimle geri
   alınması oluyor. İleride hafif bir okunabilirlik örtüsü istenirse burada tek değer değişir.

   !important yok: seçici main.css'inkiyle birebir aynı (0,1,1) ve baycan.css layout'ta main.css'ten
   SONRA yükleniyor (frontend/layouts/app.blade.php:38-39), kaynak sırası meseleyi çözüyor.

   Görselsiz durum bundan etkilenmiyor: .tj-page-header'ın kendi background-color'ı
   var(--tj-color-theme-dark) = #004C99 ve bant tek başına onunla düzgün render oluyor. */
.tj-page-header::before {
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   Kart grubu stil 2 — tam genişlik proje şeridi (.baycan-cardgroup-2)
   Şablonda bu blok bir slider'dı; burada statik ızgara. Slider'da yüksekliği
   slayt veriyordu, ızgarada vermiyor: oran + object-fit elle verilmezse
   satırlar tırtıklı çıkar.
   -------------------------------------------------------------------------- */

.tj-project-section.baycan-cardgroup-2 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.baycan-cardgroup-2 .project-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* Ne kartın görseli ne de grubun default_image'ı varsa: aynı oranı taşıyan düz
   renk blok. .project-content mutlak konumlu olduğu için kutu çökerse başlık
   kaybolurdu — bu blok onu ayakta tutuyor. */
.baycan-cardgroup-2 .project-image-blank {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--tj-color-theme-dark);
}

/* --------------------------------------------------------------------------
   Menü grubu açılış sayfası kartları (.baycan-menu-cards)
   Aynı tema bloğu (.project-item) kart grubu stil 2'de de kullanılıyor, ama CSS
   BİLEREK ayrı tutuluyor: .baycan-cardgroup-2 kuralları hâlâ elden geçiyor ve
   ortak bir seçici orada yapılan her değişikliği sessizce buraya taşırdı.
   Şablonda bu blok bir slider'dı, burada statik ızgara: slider'da yüksekliği
   slayt veriyordu, ızgarada vermiyor — oran + object-fit elle verilmezse
   satırlar tırtıklı çıkar.
   -------------------------------------------------------------------------- */

.tj-project-section.baycan-menu-cards {
    padding-top: 60px;
    padding-bottom: 60px;
}

.baycan-menu-cards .project-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* Çocuk sayfanın "Kapak Görseli" yoksa: aynı oranı taşıyan düz renk blok.
   .project-content mutlak konumlu olduğu için kutu çökerse başlık kaybolurdu. */
.baycan-menu-cards .project-image-blank {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--tj-color-theme-dark);
}

/* --------------------------------------------------------------------------
   Menu grubu acilis sayfasi — NUMARALI kart (.baycan-menu-cards-numbered)

   Tema blogu .service-style-2 (main.css:11766+), ana sayfadaki "Sirket
   Politikalarimiz" bolumunden geliyor. Orada bir Swiper slayti icinde yasiyor;
   burada statik izgarada. Iki fark buradan dogar:
   - Slayt yuksekligi slider veriyordu, izgarada vermiyor -> height:100% sart,
     yoksa ayni satirdaki kartlar farkli boyda cikar (summary uzunluguna gore).
   - .service-style-2'nin kendi zemini yok; izgarada arkasinda .tj-service-
     section-two'nun beyazi var, o yuzden zemin acikca veriliyor.

   Numara boyutu em: .service-icon'un font-size'i main.css'te 70/60/50px olarak
   breakpoint'lere gore degisiyor, numara da onunla birlikte olceklenir.
   -------------------------------------------------------------------------- */

.baycan-menu-cards-numbered {
   padding-top: 60px;
   padding-bottom: 60px;
}

.baycan-menu-cards-numbered .service-style-2 {
   height: 100%;
   background-color: var(--tj-color-common-white-2);
}

.baycan-menu-cards-numbered .service-icon {
   /* numaranin daire yazi boyuna orani; buyutmek/kucultmek icin tek ayar noktasi */
   --baycan-card-number: 0.5em;
}

.baycan-menu-cards-numbered .service-icon .card-number {
   font-size: var(--baycan-card-number);
   font-weight: var(--tj-fw-bold);
   color: var(--tj-color-theme-primary);
   line-height: 1;
}

/* Sayfanin "Kapak Gorseli" yoksa: .thumb'i dolduran duz koyu blok.
   :hover basligi ve aciklamayi beyaza cevirdigi icin arkada koyu bir yuzey sart. */
.baycan-menu-cards-numbered .thumb-blank {
   display: block;
   width: 100%;
   height: 100%;
   background-color: var(--tj-color-theme-dark);
}

/* --------------------------------------------------------------------------
   Sayfa basligi bandinda banner videosu (.tj-page-header .page-header-video)
   .tj-page-header: position:relative + overflow:hidden + z-index:2 => kendi stacking
   context'i, ::before overlay'i z-index:-1'de (main.css:6438-6482). Video -2'ye
   konuyor ki data-bg-image ile basilan arka plan gorselinin TAM yerinde dursun ve
   overlay videonun USTUNDE kalsin. Ayni desen ana sayfa hero'sunda kullaniliyor.
   pointer-events:none: bandin uzerindeki breadcrumb linkleri tiklanabilir kalsin.
   Bandin yuksekligi DEGISMIYOR; video padding'in belirledigi kutuyu object-fit:cover
   ile dolduruyor.
   -------------------------------------------------------------------------- */

.tj-page-header .page-header-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2;
   pointer-events: none;
}

/* --------------------------------------------------------------------------
   Referans logosu izgarasi (.h9-brands.baycan-references) — 'logo_grid'
   bileseninin yerlesimi (partials/logo_grid.blade.php). Eskiden /referanslar
   sayfasinin blade'i kullaniyordu; o sayfa 2026-09-02'de panele tasindi.

   Kart gorunumu ana sayfadaki logo seridiyle AYNI: .brand_item'in beyaz zemini,
   192px yuksekligi, iki katmanli hover gecisi ve %85 olcek
   (--baycan-brand-scale) .h9-brands zincirinden aynen geliyor. Burada yalnizca
   YERLESIM degisiyor.

   FLEX, grid DEGIL. Istenen davranis: eksik son satir ORTALANSIN (bugun 7 logo
   var, son satirda 3 kaliyor). CSS Grid bunu yapamaz — justify-content gridde
   butun track setini kaydirir, kisa son satiri ortalamaz. flex-wrap + center
   bunu dogal olarak yapar.

   Sutun sayisi ve bosluk tek degiskende. Kart genisligi
   (100% - (sutun-1) * bosluk) / sutun oldugu icin ikisi hep tutarli kalir;
   tek bir `gap` degeri de satir arasi ile sutun arasi boslugu esitler.
   box-sizing:border-box (bootstrap) sayesinde 1px kenarliklar hesabi bozmaz.

   KENARLIKLAR: main.css:30962 .h9-brands'e border-top + border-inline-start,
   .brand_item'a yalnizca border-inline-end + border-bottom veriyor. Bu yarim
   kenarliklar BITISIK bir tablo kurmak icindir — logolarin birbirine yapisik
   gorunmesinin sebebi de budur. Kartlar ayrildigi anda yarim kenarlik yanlis
   duser: konteyner kenarliklarini kaldirip her karta dort tarafi tam kenarlik
   veriyoruz.

   Ana sayfa ETKILENMEZ: oradaki serit .baycan-brands (display:block) +
   .baycan-brand-slider (baycan.js'te Swiper) ile calisiyor, bu blok yalnizca
   .baycan-references'a bakiyor.
   -------------------------------------------------------------------------- */
.h9-brands.baycan-references {
   /* Tek ayar noktasi: satir basina kart ve kartlar arasi bosluk */
   --baycan-ref-cols: 4;
   --baycan-ref-gap: 30px;

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   gap: var(--baycan-ref-gap);

   /* Bitisik tablonun konteyner kenarliklari burada istenmiyor */
   border-top: 0;
   -webkit-border-start: 0;
           border-inline-start: 0;
}

.h9-brands.baycan-references .brand_item {
   /* flex shorthand'i calc ile kullanmiyoruz (IE11 flex-basis+calc hatasi);
      genislik ayri veriliyor, kutu esnemiyor. */
   -webkit-box-flex: 0;
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
   width: calc((100% - (var(--baycan-ref-cols) - 1) * var(--baycan-ref-gap)) / var(--baycan-ref-cols));
   min-width: 0;
   border: 1px solid var(--tj-color-border-2);
}

@media (max-width: 991px) {
   .h9-brands.baycan-references {
      --baycan-ref-cols: 3;
   }
}

@media (max-width: 767px) {
   .h9-brands.baycan-references {
      --baycan-ref-cols: 2;
      --baycan-ref-gap: 20px;
   }
}

/* --------------------------------------------------------------------------
   YÜKSEK SAYFA BAŞLIĞI BANDI  (.tj-page-header.baycan-page-header-tall)
   Sınıfı partials/page-header.blade.php basıyor; kararı App\Support\TallBanner +
   config('site.tall_banner_menus') veriyor (bugün: yalnızca Sektörler DETAY sayfaları —
   TallBanner::MIN_DEPTH = 2, sektörün kendi sayfası normal bant alır).

   İKİ DÜĞME, BİLEREK AYRI:
     --baycan-ph-top    = bandın yüksekliği. Büyüdükçe bant uzar, başlık aşağı iner.
     --baycan-ph-bottom = başlığın ALTINDA kalan boşluk. Bandın dibiyle başlık arasındaki
                          mesafe budur; büyütmek başlığı YUKARI iter.
   Eski tek düğme (--baycan-ph-scale, "temanın iki katı") 2026-09-02'de kaldırıldı: tek çarpan
   iki padding'i birlikte ölçekliyordu, yani bandı yükseltmek alt boşluğu da açıyordu. Kullanıcı
   "bant daha yüksek olsun AMA başlık dibe insin" dedi — bu iki isteğin tek çarpanla karşılığı yok.

   Bandın içinde YALNIZCA h1.tj-page-title var (48px × 1.2 satır yüksekliği ≈ 58px): breadcrumb izi
   bu sayfalarda basılmıyor (App\Support\Breadcrumb). Bant yüksekliği = üst + ~58 + alt.
   Masaüstünde 680 + 58 + 40 ≈ 780px, başlığın altında 40px boşluk (kullanıcı kararı 2026-09-02,
   referans görselden ölçüldü).

   NEDEN HER KIRILIM AYRI YAZILDI: media query SPESİFİKLİK EKLEMEZ. Buradaki
   .tj-page-header.baycan-page-header-tall (0,2,0) main.css'teki .tj-page-header (0,1,0)
   kurallarının HEPSİNİ, media query içinde olsalar bile yener. Tek bir kural yazılsaydı
   masaüstü değeri telefonda da geçerli olur, 680px üst boşluk ekranı boğardı. Kırılım sınırları
   main.css:6448-6472 ile aynı; SAYILAR ARTIK ORANTILI DEĞİL, her kırılım elle seçildi —
   dar ekranlarda bant zaten yüksekti, orada yalnızca başlık aşağı indi.

   Media query blokları yalnızca DEĞİŞKENLERİ ezer; padding bildirimleri tek yerde, temel kuralda.
   -------------------------------------------------------------------------- */
.tj-page-header.baycan-page-header-tall {
   --baycan-ph-top: 715px;
   --baycan-ph-bottom: 5px;
   padding-top: var(--baycan-ph-top);
   padding-bottom: var(--baycan-ph-bottom);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
   .tj-page-header.baycan-page-header-tall {
      --baycan-ph-top: 660px;
      --baycan-ph-bottom: 40px;
   }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .tj-page-header.baycan-page-header-tall {
      --baycan-ph-top: 600px;
      --baycan-ph-bottom: 40px;
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
   .tj-page-header.baycan-page-header-tall {
      --baycan-ph-top: 540px;
      --baycan-ph-bottom: 36px;
   }
}

@media only screen and (max-width: 767px) {
   .tj-page-header.baycan-page-header-tall {
      --baycan-ph-top: 400px;
      --baycan-ph-bottom: 32px;
   }
}

/* --------------------------------------------------------------------------
   KART LİSTELEME IZGARASI — EKSİK SON SATIR SOLA DAYALI (.baycan-menu-cards)

   Burada BİLEREK kural yok. Eskiden `.baycan-menu-cards .row { justify-content: center; }`
   vardı; kullanıcı 2026-09-02'de kaldırılmasını istedi: Havacılık & Savunma'nın 5. kartı
   (ızgara 4 sütunlu, row-cols-lg-4) tek başına ortada duruyordu, sola dayalı olmalı.
   Bootstrap'ın .row varsayılanı zaten flex-start — kuralı silmek yeterli, yerine
   `justify-content: flex-start` YAZILMASIN: gereksiz bildirim bir sonraki turda "eksik"
   sanılıp ortalamanın geri gelmesine davetiye çıkarır.

   KAPSAM SİTE GENELİ, kullanıcı kararı: Yatırımcı İlişkileri'nin 3 kartı da sola dayanır.
   Sektörler'e özel bir varyant İSTENMEDİ (modifier sınıf + ağaç kontrolü maliyeti kabul
   edilmedi).

   /referanslar KARIŞMAZ: oradaki ortalama .h9-brands.baycan-references'ın kendi
   justify-content'inden geliyor (bu dosyada, yukarıda) ve kullanıcı onu ortalı istiyor.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   SEKTÖRLER DETAY SAYFASI — SOL GALERİ (.baycan-gallery-showcase)

   Kenar menüsünün yerini alan blok: üstte büyük görsel, altında satırda 4'lü, sarmalanan
   thumbnail ızgarası. Sağdaki içerik sütunu (col-lg-7) tema stillerini olduğu gibi koruyor;
   burada yalnızca sol sütun tarif ediliyor.

   YÜKSEKLİK aspect-ratio ile SABİTLENİYOR: CMS'te editör her en-boy oranında görsel
   yükleyebiliyor. Slaytlar üst üste (absolute) durduğu için akıştan yükseklik almıyorlar;
   sabit bir oran olmasa kutu sıfır yükseklikte çökerdi. 4/3 seçildi — kablo donanımı
   fotoğrafları yatay geliyor ve sağdaki metinle hizası tutuyor.

   position: sticky İÇ ELEMANDA, .col-lg-5'te DEĞİL: Bootstrap .row flex ve sütunlar satır
   boyunca uzuyor, yani sütunun kendisinin kayacak yeri yok. .tj-post-sidebar bloğu (bu
   dosyada, yukarıda) tam olarak aynı sebeple aynı şeyi yapıyor; 120px üst boşluk ve 992px
   kırılma noktası oradan, o da temanın kendi .tj-sticky-top yardımcısından alınmıştır.
   -------------------------------------------------------------------------- */
.baycan-gallery-showcase {
   --baycan-gs-gap: 10px;
}

.baycan-gs-stage {
   position: relative;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background-color: var(--tj-color-border-2);
}

.baycan-gs-slide {
   position: absolute;
   inset: 0;
   display: block;
   opacity: 0;
   /* Gizli slayt tıklanamamalı: üstteki görselin tıklamasını yutardı. */
   pointer-events: none;
   transition: opacity 0.5s ease-in-out;
}

.baycan-gs-slide.is-active {
   opacity: 1;
   pointer-events: auto;
}

.baycan-gs-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* Satırda 4 adet, sarmalanan ızgara. Görsel sayısı arttıkça kutu aşağı doğru uzuyor —
   kaydırmalı şerit yerine bu bilerek seçildi. */
.baycan-gs-thumbs {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--baycan-gs-gap);
   margin-top: var(--baycan-gs-gap);
}

.baycan-gs-thumb {
   /* <button> varsayılanları: tema bunları sıfırlamıyor. */
   padding: 0;
   border: 2px solid transparent;
   background: none;
   display: block;
   overflow: hidden;
   cursor: pointer;
   opacity: 0.55;
   transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.baycan-gs-thumb img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
}

.baycan-gs-thumb:hover,
.baycan-gs-thumb.is-active {
   opacity: 1;
   border-color: var(--tj-color-theme-primary);
}

@media only screen and (min-width: 992px) {
   .baycan-gallery-showcase {
      position: sticky;
      /* .tj-post-sidebar ile aynı değer: sabit header (~90px) bunun altında kalır. */
      top: 120px;
      z-index: 1;
   }
}

/* --------------------------------------------------------------------------
   Sayfa altı sektör şeridi (.baycan-sector-cards)

   Ana sayfadaki aynı tema bloğunun (.project-item) küçültülmüş, slider'sız
   varyantı. CSS .baycan-menu-cards'tan AYRI tutuluyor: ikisi farklı bağlamda
   (listeleme sayfası / detay sayfası eki) ve farklı oranda yaşıyor, ortak bir
   seçici birinde yapılan her ayarı sessizce diğerine taşırdı.
   Oran + object-fit elle veriliyor: şablonda yüksekliği slayt veriyordu,
   ızgarada vermiyor — verilmezse satırlar tırtıklı çıkar.
   -------------------------------------------------------------------------- */

.tj-project-section.baycan-sector-cards {
   padding-top: 50px;
   padding-bottom: 50px;
}

/* 3/4, ana sayfadaki karttan basık: bu şerit sayfanın eki, ana içeriği değil. */
.baycan-sector-cards .project-image img {
   width: 100%;
   aspect-ratio: 3 / 4;
   object-fit: cover;
   display: block;
}

/* Ne kapak görseli ne config yedeği varsa: aynı oranı taşıyan düz renk blok.
   .project-content mutlak konumlu olduğu için kutu çökerse başlık kaybolurdu. */
.baycan-sector-cards .project-image-blank {
   display: block;
   width: 100%;
   aspect-ratio: 3 / 4;
   background-color: var(--tj-color-theme-dark);
}

/* --------------------------------------------------------------------------
   Kart görseline tıklama (.baycan-sector-cards / .baycan-menu-cards)

   main.css:10335 .project-item::before kartın TAMAMINI kaplayan bir gradyan ve
   z-index:3 ile görselin <a>'sının üstünde duruyor — tıklamayı o yutuyordu, o
   yüzden yalnızca z-index:5'teki başlık linki çalışıyordu. Gradyan tamamen
   dekoratif, tıklama almasına gerek yok.
   .project-content da mutlak konumlu ve alt bandı kaplıyor; o da geçirgen
   yapılıp yalnızca kendi linkine tıklama geri veriliyor. Sonuç: kartın her yeri
   tıklanabilir ve görselin üstünde de imleç el oluyor.

   İki sınıf BURADA bilerek ortak: sayfa altı şeridi ile listeleme ızgarasının
   CSS'i oran/boşluk kararları için ayrı tutuluyor, bu ise bir davranış hatası
   ve ikisinde de aynı — ayrı yazmak aynı düzeltmenin iki kopyasını üretirdi.
   Ana sayfadaki şerit (home/sectors.blade.php) KAPSAM DIŞI: orası swiper,
   sürükleme davranışına dokunmuyoruz.
   -------------------------------------------------------------------------- */

.baycan-sector-cards .project-item::before,
.baycan-menu-cards .project-item::before {
   pointer-events: none;
}

.baycan-sector-cards .project-item .project-content,
.baycan-menu-cards .project-item .project-content {
   pointer-events: none;
}

.baycan-sector-cards .project-item .project-content a,
.baycan-menu-cards .project-item .project-content a {
   pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Yönetim kartları (/yonetim — frontend/management.blade.php)

   Çerçeve, iç boşluk ve sağdaki yuvarlak ikon düğmeleri temanın
   .tj-post__navigation bloğundan (main.css:9701) geliyor; burada yalnızca
   ızgaraya uyum, yükseklik ve sol kimlik bloğu tanımlanıyor.

   Kart yüksekliği tek ayar noktası: --baycan-yonetim-card-h. Değer içerikten
   bağımsız (kartta yalnızca ad + pozisyon var), o yüzden min-height ile
   veriliyor ve içerik dikeyde ortalanıyor. Mobil için ayrı bir değer daha
   var (masaüstü 130px, mobil 195px): dar ekranda ad/pozisyon iki satıra
   sardığı için ayrı tutuluyor — masaüstü değeri tek başına düşürülebilsin.
   2026-09-02: kullanıcı isteğiyle her iki yükseklik %35 kısaldı (200→130,
   300→195) ve marka ikonu %50 küçüldü (72→36, mobil 56→28). Ölçüler yalnızca
   bu iki değişkenden geliyor; tema iç boşluğu (.tj-post__navigation 20/30px)
   ve punto bilerek ELLENMEDİ. min-height kalıyor: uzun ad/pozisyon sararsa
   kartın uzamasına izin verilir.
   -------------------------------------------------------------------------- */
.baycan-yonetim-card {
   --baycan-yonetim-card-h: 130px;
   --baycan-yonetim-icon: 36px;

   /* .tj-post__navigation'ın 50px alt boşluğu ızgarada çift boşluk yapardı;
      aralığı row'un g-4'ü veriyor. */
   margin-bottom: 0;
   min-height: var(--baycan-yonetim-card-h);

   /* Aynı satırdaki iki kart, biri iki satırlık pozisyon yazsa bile eşit kalsın. */
   height: 100%;
}

.baycan-yonetim-card .baycan-yonetim-card__identity {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   gap: 20px;

   /* Uzun ad/pozisyon sağdaki ikonları ezmesin. */
   min-width: 0;
}

/* Marka ikonu maske olarak veriliyor: baycan-icon.svg rengini kendi içinde
   sabitliyor (.cls-1 { fill: #149bd7 }); maske yalnızca alfa kanalını alır,
   rengi background-color belirler. Dosyanın yukarısındaki .tj-primary-btn
   bloğuyla aynı teknik. */
.baycan-yonetim-card .baycan-yonetim-card__icon {
   display: block;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   width: var(--baycan-yonetim-icon);
   height: var(--baycan-yonetim-icon);
   background-color: var(--tj-color-theme-primary);
   -webkit-mask-image: var(--baycan-icon-url);
           mask-image: var(--baycan-icon-url);
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
   -webkit-mask-position: center;
           mask-position: center;
   /* contain: görsel 38.6x35.57, yani kareden biraz geniş. cover kırpardı. */
   -webkit-mask-size: contain;
           mask-size: contain;
}

.baycan-yonetim-card .baycan-yonetim-card__name {
   margin: 0;
   font-size: 24px;
   line-height: 1.3;
   color: var(--tj-color-heading-primary);
}

.baycan-yonetim-card .baycan-yonetim-card__position {
   display: block;
   margin-top: 6px;
   font-size: 16px;
   line-height: 1.5;
   color: var(--tj-color-text-body);
}

/* Boş alanda iki ikon arası açılmasın; .tj-nav-post__nav'ın kendi kuralı yok. */
.baycan-yonetim-card .baycan-yonetim-card__links {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   gap: 12px;
}

@media only screen and (max-width: 767px) {
   .baycan-yonetim-card {
      /* Mobil yükseklik — masaüstünden ayrı ayarlanır. */
      --baycan-yonetim-card-h: 195px;
      --baycan-yonetim-icon: 28px;
   }

   .baycan-yonetim-card .baycan-yonetim-card__name {
      font-size: 20px;
   }
}

/* Bilesen olarak basildiginda alt bosluk: diger bilesenler de kendi alt boslugunu
   tasiyor (ornek .component-image, page-component.blade.php). Satir duzeni icindeki
   son bileseni component-list.blade.php zaten sifirliyor. */
.component-logo-grid {
   margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   AR-GE sayfasi (.baycan-arge) - 'showcase' kart stili

   Tema bloklari: .h9-case-study (main.css:31266-31520) + ortak taban
   .h5-case-study-item (main.css:20225-20320). Ac/kapa bagi temanin kendi
   JS'inde: main.js:1146, mouseover -> .active.

   BU SAYFADA BANNER YOK. .tj-page-header hic basilmiyor (menu-cards.blade.php
   showcase dali), oysa o bant normalde absolute header'i temizleyen ust boslugu
   da tasiyor. Bosluk burada bolumun kendi padding'ine devrediliyor. Zemin zaten
   koyu (--tj-color-theme-dark), beyaz header ustunde okunur kaliyor.
   -------------------------------------------------------------------------- */
.h9-case-study.baycan-arge {
   /* Bolumun kendi zemini: tema .h9-case-study'ye --tj-color-theme-dark veriyor
      (main.css:31266), ama bu projede o degisken musterinin mavisi (#004C99).
      AR-GE bandi lacivert olmali; bu yuzden yalnizca bu sayfada geciliyor. */
   background-color: var(--tj-color-arge-dark);

   padding-top: 200px;
   padding-bottom: 120px;
}


.baycan-arge .sec-heading {
   /* Tema .h9-case-study .sec-heading'e max-width:507px + margin:0 veriyor
      (main.css:31270): sola dayali, iki sutunlu baslik blogu icin. Burada blok
      tek ve ortali. */
   max-width: none;
   margin: 0 auto 60px;
   text-align: center;
}

.baycan-arge .sec-title {
   /* Basligin buyuklugu icin TEK ayar noktasi. */
   font-size: var(--baycan-arge-title, 64px);
   /* Beyaz rengi tema yalnizca .sec-heading-wrap ALTINDA veriyor (main.css:31297);
      o sarmalayici bu sayfada yok, renk burada acikca yazilmali. */
   color: var(--tj-color-common-white);
}

.baycan-arge .h9-case-study-inner {
   /* Tema genislikleri 5 panel icin olculu (4x240 + 780 + 4x30 ~ 1860px). 4 panelde
      serit sola yaslanip sagda bosluk birakiyordu. Genislikleri DEGISTIRMEK yerine
      serit ortalaniyor: 3 ya da 5 panelde de dogru durur. */
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.baycan-arge .h9-case-study-item-inner {
   /* Panelin tamami <a> oldu; <a> satir ici bir eleman, blok yapilmazsa tema
      yuksekligi tutmaz. */
   display: block;
}

.baycan-arge .case-study-text .title {
   /* Tema beyaz rengi ve nowrap'i .title ICINDEKI <a>'ya veriyor (main.css:31441);
      burada ic <a> yok (link distaki panel). Uzun Turkce basliklar da sarabilmeli -
      sablon <br> ile elle kiriyordu, panel basliklari ise panelden geliyor. */
   color: var(--tj-color-common-white);
   white-space: normal;
   margin-bottom: 0;
}

/* Marka ikonu maske olarak veriliyor: baycan-icon.svg rengini kendi icinde
   sabitliyor (.cls-1 { fill: #149bd7 }); maske yalnizca alfa kanalini alir, rengi
   background-color belirler. Dosyanin yukarisindaki .tj-primary-btn ve
   .baycan-yonetim-card bloklari ile ayni teknik.

   Temanin hover kaydirmasi BURADA IPTAL: .icon-btn i ikonu -45 derece dondurup
   hover'da 40px saga kaydiriyor ve bosalan yeri text-shadow ile uretilen hayalet
   kopya dolduruyor (main.css:856-869). Maske text-shadow'u TASIMAZ - hayalet kopya
   yok olur ve kaydirma ikonu bosluga gotururdu. Ayrica -45 derecelik donus ok glifi
   icin tasarlanmis, marka isareti icin anlamsiz. */
.baycan-arge .icon-btn i::before {
   content: none;
}

.baycan-arge .icon-btn i {
   display: block;
   width: 22px;
   height: 22px;
   /* Rengi maske veriyor: .icon-btn'in color'i (beyaz) buraya currentColor olarak
      geliyor. Sabit renk YAZMAYIN. */
   background-color: currentColor;
   -webkit-transform: none;
       -ms-transform: none;
           transform: none;
   text-shadow: none;
   -webkit-mask-image: var(--baycan-icon-url);
           mask-image: var(--baycan-icon-url);
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
   -webkit-mask-position: center;
           mask-position: center;
   /* contain: gorsel 38.6x35.57, yani kareden biraz genis. cover kirpardi. */
   -webkit-mask-size: contain;
           mask-size: contain;
}

.baycan-arge .icon-btn:hover i {
   -webkit-transform: none;
       -ms-transform: none;
           transform: none;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .h9-case-study.baycan-arge {
      padding-top: 170px;
      padding-bottom: 100px;
   }

   .baycan-arge .sec-title {
      --baycan-arge-title: 52px;
   }
}

@media only screen and (max-width: 991px) {
   .h9-case-study.baycan-arge {
      padding-top: 140px;
      padding-bottom: 80px;
   }

   .baycan-arge .sec-heading {
      margin-bottom: 40px;
   }

   .baycan-arge .sec-title {
      --baycan-arge-title: 36px;
   }
}

/* --------------------------------------------------------------------------
   Kişi kartı — satır düzeni (`person` bileşeni)

   Solda sabit genişlikte fotoğraf, sağda ad + ünvan + özgeçmiş. Yönetim Kurulu
   gibi uzun biyografi taşıyan sayfalar için. Bileşenin eski hâli temanın
   .team-item bloğunu kullanıyordu (main.css:13714): 468px min-height ve
   yazıyı fotoğrafın üstüne bindiren mutlak konumlu koyu blok — birkaç satırlık
   bir özgeçmiş orada okunmuyordu. Panel formu aynı kaldı, yalnızca çıktı değişti.

   Bootstrap sütunu DEĞİL, flex: bu bileşen hem col-lg-8 (Yönetim Kurulu sayfası
   sidebar'lı: pages.sidebar_active = 1) hem col-lg-12 hem de "Satır Düzeni"
   bileşeninin bir kolonu içinde basılabiliyor. flex-wrap sayesinde dar bir kapta
   fotoğraf üste, metin alta düşüyor.

   Kişiler arası ayırıcı bitişik-kardeş seçiciyle veriliyor: ilk kişinin üstünde
   çizgi olmuyor, sonuncunun altında sarkan çizgi kalmıyor. Bileşenler <article>
   içinde doğrudan kardeş basıldığı için bu seçici çalışıyor
   (partials/component-list.blade.php — sarmalayıcı yok).

   Ayar noktaları: --baycan-person-photo-w (fotoğraf genişliği),
   --baycan-person-gap (foto/metin arası), --baycan-person-space (kişiler arası
   dikey boşluk). Mobilde üçü de ayrıca eziliyor.
   -------------------------------------------------------------------------- */
.baycan-person-row {
   --baycan-person-photo-w: 220px;
   --baycan-person-gap: 30px;
   --baycan-person-space: 35px;

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
   gap: var(--baycan-person-gap);
   margin-bottom: var(--baycan-person-space);
}

/* Ardışık iki kişi arasındaki ince ayırıcı. Araya başka bir bileşen girerse
   (ör. metin bloğu) çizgi bilerek çizilmez — ayırıcı "aynı listenin devamı"
   anlamına geliyor. */
.baycan-person-row + .baycan-person-row {
   padding-top: var(--baycan-person-space);
   border-top: 1px solid var(--tj-color-border-3);
}

.baycan-person-row__media {
   -webkit-box-flex: 0;
       -ms-flex: 0 0 var(--baycan-person-photo-w);
           flex: 0 0 var(--baycan-person-photo-w);
   width: var(--baycan-person-photo-w);
   max-width: 100%;
}

/* 3/4 dikey oran: portre fotoğraflar aynı boyda dursun. aspect-ratio'yu
   desteklemeyen eski tarayıcıda görsel kendi doğal oranında kalır — düzen
   bozulmaz, yalnızca yükseklikler eşitlenmez. */
.baycan-person-row__media img {
   display: block;
   width: 100%;
   aspect-ratio: 3 / 4;
   -o-object-fit: cover;
      object-fit: cover;
}

/* min-width:0 — flex çocuğunun varsayılan min-width:auto'su uzun kelimelerde
   kutuyu taşırıyor. */
.baycan-person-row__body {
   -webkit-box-flex: 1;
       -ms-flex: 1 1 260px;
           flex: 1 1 260px;
   min-width: 0;
}

.baycan-person-row__name {
   margin: 0;
   font-size: 22px;
   line-height: 1.3;
   color: var(--tj-color-theme-primary);
}

.baycan-person-row__position {
   display: block;
   margin-top: 6px;
   font-size: 16px;
   font-weight: var(--tj-fw-bold);
   line-height: 1.5;
   color: var(--tj-color-heading-primary);
}

/* Özgeçmiş editörden HTML geliyor; son paragrafın alt boşluğu kartın ölçüsünü
   bozmasın. */
.baycan-person-row__bio {
   margin-top: 16px;
   color: var(--tj-color-text-body);
}

.baycan-person-row__bio p:last-child {
   margin-bottom: 0;
}

/* Fotoğrafsız kayıtta metin tüm genişliği alır; boş kutu çizilmez. */
.baycan-person-row.no-media {
   gap: 0;
}

@media only screen and (max-width: 767px) {
   .baycan-person-row {
      /* Mobilde fotoğraf üstte, metin altta — flex-wrap zaten sardırıyor,
         burada yalnızca ölçüler küçülüyor. */
      --baycan-person-photo-w: 180px;
      --baycan-person-gap: 20px;
      --baycan-person-space: 28px;
   }

   .baycan-person-row__name {
      font-size: 20px;
   }
}

/* --------------------------------------------------------------------------
   Editör (WYSIWYG) içeriğindeki linkler
   main.css'te temel bir "a { color: … }" kuralı yok; sadece
   "a { text-decoration:none }" ve "a:focus, a:hover { color: inherit }" var.
   Bu yüzden editörden gelen linkler gövde metniyle aynı renkte, stilsiz kalıyordu.
   .baycan-rte blade tarafında YALNIZCA editör çıktısını saran elemana konur;
   kart başlığı / buton gibi temanın kendi linkleri kapsam dışında kalsın diye.
   -------------------------------------------------------------------------- */
.baycan-rte a {
   color: var(--tj-color-theme-dark);
   text-decoration: none;
}

/* main.css'teki "a:focus, a:hover { color: inherit }" ile aynı özgüllükte
   (0,1,1); yalnızca kaynak sırası kazandırıyor. Açıkça yazılmazsa hover'da
   renk gövde metnine düşer. Alt çizgi ve hover renk değişimi bilinçli olarak yok. */
.baycan-rte a:hover,
.baycan-rte a:focus,
.baycan-rte a:active,
.baycan-rte a:visited {
   color: var(--tj-color-theme-dark);
   text-decoration: none;
}

/* --------------------------------------------------------------------------
   Editör (WYSIWYG) içeriğinde "fi" ligatürü kapalı
   Lato'nun (ve başlıklardaki Libre Franklin'in) standart ligatürü f+i'yi tek
   glife birleştiriyor; o glifte i'nin noktası yok, Türkçe metinde yanlış.
   Sayfa lang="en" olduğu için fontun Türkçe (locl) kuralı da devreye girmiyor.
   font-variant-ligatures kalıtsal: .baycan-rte içindeki p, li, a, h2–h6 hepsi
   kapsanır. Font değişmedi; yalnızca birleştirme kapalı. Kapsam bilinçli olarak
   yalnızca editör çıktısı — sitenin geri kalanına dokunulmuyor.
   -------------------------------------------------------------------------- */
.baycan-rte {
   font-variant-ligatures: no-common-ligatures;
}

/* --------------------------------------------------------------------------
   Tiklanabilir kart (.baycan-card-clickable) - kartin TAMAMI link
   Ilk kullanim: ana sayfa "Sirket Politikalarimiz" (home/services.blade.php).

   Kart ici katmanlar (main.css:11767+): .thumb z1, .service-icon z2,
   .service-content z2; kart kendi stacking context'i (relative + z2).
   - Ortu linki ILK cocuk + z2: ikon/icerigin ALTINDA, gorselin (z1, hover'da
     gorunur) USTUNDE. Bos alana tiklama ona dusuyor.
   - Ikon/icerik pointer-events:none -> tiklama ortuye gecer; icerikteki
     linkler auto -> baslik ve "Detaylar" kendi hedefleri olarak kalir.
     :hover atalara yine ulasir, temanin hover efektleri bozulmaz.
   REDDEDILENLER: .stretched-link (::after .service-content'e gore konumlanir,
   ikon alani olu kalir); en ustte z3 ortu (ic linkler .service-content'in
   stacking context'inden cikamaz, baslik :hover'i kaybolur).
   -------------------------------------------------------------------------- */

.baycan-card-clickable .baycan-card-cover {
   position: absolute;
   inset: 0;
   z-index: 2;
}

.baycan-card-clickable .service-icon,
.baycan-card-clickable .service-content {
   pointer-events: none;
}

.baycan-card-clickable .service-content a {
   pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Dil değiştirici "TR | EN" (.baycan-lang)
   Markup: partials/lang-switcher.blade.php. İki varyant:
     --header : iki header kopyasında, yalnızca >= lg (sarmalayıcı d-none d-lg-block)
     --drawer : hamburger çekmecesinde, logo satırı ile menü listesi arasında

   Geçerli dil bir <span> (.is-active), link DEĞİL; diğer dil <a>.

   HEADER RENKLERİ: tema ana menü linkine header durumuna göre ayrı renk
   vermiyor - hem hero üstündeki .header-absolute hem .header-sticky.sticky
   kopyasında tek kural geçerli (main.css:1769, --tj-color-common-white-2),
   ikisinin de zemini koyu. O yüzden burada da durum başına ayrı blok yok;
   aktif/hover rengi menünün current-menu-item rengiyle aynı (main.css:1794).

   ÇEKMECE RENKLERİ: zemin --tj-color-theme-dark. Marka mavisi o zeminde
   okunmuyor (kontrast ~2.7:1), bu yüzden aktif dil menü linklerinin beyazı
   (main.css:3172), diğer dil aynı beyazın soluğu (~4.7:1); hover'da tam beyaz.
   -------------------------------------------------------------------------- */
.baycan-lang {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   gap: 8px;
   white-space: nowrap;
   line-height: 1;
}

.baycan-lang__item {
   -webkit-transition: color 0.3s ease, opacity 0.3s ease;
           transition: color 0.3s ease, opacity 0.3s ease;
}

/* Ana menü linkleriyle aynı: 18px / 700 (.baycan-ir-link ile aynı ölçü). */
.baycan-lang--header {
   font-size: 18px;
   font-weight: var(--tj-fw-bold);
}

.baycan-lang--header .baycan-lang__item {
   color: var(--tj-color-common-white-2);
}

.baycan-lang--header .baycan-lang__sep {
   color: var(--tj-color-common-white-2);
   opacity: 0.4;
}

.baycan-lang--header .baycan-lang__item.is-active,
.baycan-lang--header a.baycan-lang__item:hover,
.baycan-lang--header a.baycan-lang__item:focus-visible {
   color: var(--tj-color-theme-primary);
}

/* Çekmece: .hamburger_wrapper'ın kendi iç boşluğuyla sola hizalı (display:flex -
   satırın tamamını kaplar, yanına bir şey gelmez). .hamburger_top zaten 40px alt
   boşluk bırakıyor; negatif üst boşluk onu 24px'e indirir, alt boşluk menüden ayırır.
   Yazı ölçüsü çekmecedeki menü linkleriyle aynı: 16px / 700. */
.baycan-lang--drawer {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 0;
   margin: -16px 0 14px;
   font-size: 16px;
   font-weight: var(--tj-fw-bold);
}

/* Dokunma hedefi: 40px yükseklik, yatayda yazının iki yanında 12px. İlk öğenin sol
   boşluğu yok ki yazı çekmecenin sol kenarıyla (logo ile) aynı hizada başlasın;
   ayırıcı çizgi böylece iki etiketin tam ortasında kalıyor. */
.baycan-lang--drawer .baycan-lang__item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   min-height: 40px;
   padding: 0 12px;
   color: var(--tj-color-common-white);
}

.baycan-lang--drawer .baycan-lang__item:first-child {
   -webkit-padding-start: 0;
           padding-inline-start: 0;
}

.baycan-lang--drawer a.baycan-lang__item {
   opacity: 0.7;
}

.baycan-lang--drawer a.baycan-lang__item:hover,
.baycan-lang--drawer a.baycan-lang__item:focus-visible {
   color: var(--tj-color-common-white);
   opacity: 1;
}

.baycan-lang--drawer .baycan-lang__sep {
   color: var(--tj-color-common-white);
   opacity: 0.3;
}

/* Değiştirici header'a ~83px ekliyor (68px + .header-wrapper'ın 15px aralığı). Ölçüm
   (2026-10-02, Chrome): header değiştiricisiz 1302px'ten (sticky kopya 1284px) itibaren tek
   satıra sığıyordu, değiştiriciyle 1384px (sticky 1366px) gerekiyor - yani aradaki bantta
   eskiden tek satır olan header ikinci satıra düşerdi. Bu bantta aynı genişlik geri alınıyor:
   ana menü aralığı 30px -> 22px (6 aralık = 48px; tema 1200px altında zaten 18px kullanıyor)
   ve ızgara düğmesinin sağ kaydırması 40px -> 0. Toplam 88px.
   Üst sınır 1419px: medya sorgusu kaydırma çubuğunu da sayar, yerleşim genişliği saymaz.
   BU BANDIN ALTINDA (992-1283px) header ZATEN iki satır - değiştiriciden bağımsız, bu blok
   onu düzeltmiyor ve kötüleştirmiyor: değiştirici ikinci satırda duruyor, satır sayısı aynı. */
@media (min-width: 1284px) and (max-width: 1419px) {
   .tj-header-area.header-2 .mainmenu > ul {
      gap: 22px;
   }

   .tj-header-area.header-2 .header_right_info {
      --baycan-menu-btn-shift: 0px;
   }
}