/**
 * Axtea — siteye özel stiller
 * -----------------------------------------------------------------------------
 * main.css'e DOKUNULMUYOR: Tayfun main.css üzerinde satır numarasıyla çalışıyor,
 * oraya kural eklemek tüm numaraları kaydırır. Yeni/ek stiller BU dosyaya yazılır.
 * main.css'ten SONRA yüklenir, o yüzden aynı özgüllükte bu kazanır.
 */

/* --- Header: bayrak (arama ikonunun solunda, dikdörtgen) --------------------- */
.header-flag {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.header-flag img {
  display: block;
  width: 34px;
  height: 23px;          /* 1200x800 = 3:2 oranı korunuyor */
  border-radius: 2px;    /* dikdörtgen; köşeler yalnızca kırılmasın diye 2px */
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-flag img {
    width: 28px;
    height: 19px;
  }
}

/* --- Header: 7 ögeli Türkçe menü tema varsayılanından GENİŞ ----------------
 * Ölçüm (Chrome, gerçek getBoundingClientRect):
 *   logo 136px + menü 929px + sağ blok 350px = 1415px gerekiyor.
 *   Tema .header-wrapper'ı flex-wrap:wrap -> sığmayınca sağ blok ALT SATIRA düşüyor.
 *   Ölçülen kırılma noktası: ~1540px viewport.
 * Çözüm: 1300-1599 arası kademeli daralt, 1300 altında hamburger'a geç.
 *   (1300 altında 14px/12gap ile bile sığmıyor — ölçüldü: vw 1204'te -74px.)
 * -------------------------------------------------------------------------- */

/* 1400-1599: hafif daraltma.
 * ⚠️ .header-wrapper flex-wrap:wrap olduğu için taşma SESSİZCE ikinci satıra
 *    düşme olarak patlar — bandın alt ucunda pay bilerek geniş tutuldu. */
@media only screen and (min-width: 1400px) and (max-width: 1599.98px) {
  .header-area .mainmenu > ul {
    gap: 0 12px;
  }
  .header-area .header-right-item {
    gap: 16px;
  }
  .header-area .mainmenu > ul > li > a {
    font-size: 15px;
  }
  .header-area .mainmenu > ul > li.has-dropdown > a {
    -webkit-padding-end: 14px;
            padding-inline-end: 14px;
  }
}

/* 1300-1399: sıkı daraltma + CTA butonu küçülür — ölçüm vw1314'te +62px */
@media only screen and (min-width: 1300px) and (max-width: 1399.98px) {
  .header-area .mainmenu > ul {
    gap: 0 12px;
  }
  .header-area .mainmenu > ul > li > a {
    font-size: 14px;
  }
  .header-area .mainmenu > ul > li.has-dropdown > a {
    -webkit-padding-end: 12px;
            padding-inline-end: 12px;
  }
  .header-area .header-right-item {
    gap: 12px;
  }
  .header-area .header-right-item .tj-primary-btn {
    -webkit-padding-start: 16px;
            padding-inline-start: 16px;
  }
  .header-area .header-right-item .tj-primary-btn .btn-text {
    font-size: 14px;
  }
  .header-area .header-right-item .tj-primary-btn .btn-icon {
    width: 34px;
    height: 34px;
  }
}

/* 1300 altı: masaüstü menü yerine hamburger.
 * Tema bunu 992'de yapıyordu; menü uzadığı için eşik yukarı taşındı.
 * ⚠️ main.js'teki meanmenu `meanScreenWidth` değeri de 1299'a çekildi —
 *    yoksa 992-1299 arasında hamburger paneli BOŞ açılır. */
@media only screen and (max-width: 1299.98px) {
  /* Yalnız MENÜ gizlenir. Bayrak + arama + BİZE ULAŞIN görünür kalır —
   * hamburger panelinde bunların karşılığı yok, gizlemek işlev kaybı olurdu.
   * (.header-right-item'ın kendi `d-lg-*` sınıfı 992 altında zaten gizliyor.) */
  .header-area .menu-area {
    display: none !important;
  }
  /* Masaüstü offcanvas tetikleyicisi: hamburger ile aynı işi yapar, çift buton olmasın */
  .header-area .header-right-item .menu_bar.menu_offcanvas {
    display: none !important;
  }
  .header-area .menu_bar.mobile_menu_bar {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .hamburger-area {
    display: block !important;
  }
  /* Servis mega-menüsü hamburger panelinde masaüstü genişliğiyle açılıyordu (taşıyordu) */
  .mobile_menu .mean-nav ul li .mega-menu-service,
  .mobile_menu .mean-nav ul li .sub-menu.mega-menu-service {
    width: 100% !important;
    min-width: 0 !important;
    -webkit-margin-start: 0 !important;
            margin-inline-start: 0 !important;
    -webkit-padding-start: 0 !important;
            padding-inline-start: 0 !important;
  }
}

/* ===========================================================================
 * ANASAYFA BÖLÜM STİLLERİ (2. tur)
 * main.css'e satır EKLENMEZ — Tayfun orada satır numarasıyla çalışıyor.
 * ======================================================================== */

/* --- Servis bölümü zemini ------------------------------------------------- */
.tj-service-section.service-2 {
  background-color: #17282d;
}

/* --- Gizli pagination taşıyıcısı -----------------------------------------
 * Bu iki slider'da nokta göstergesi İSTENMİYOR, ama elemanı tamamen silmek
 * olmuyor: main.js her slider'a `el: ".swiper-pagination-area"` (GLOBAL seçici)
 * veriyor. Swiper 8, kendi kabının içinde eşleşme bulamazsa sayfadaki İLK
 * eşleşmeye düşüyor — ölçüldü: proje slider'ları BLOG'un noktalarını ele
 * geçiriyordu. Her slider kendi (gizli) elemanını taşıyınca izolasyon geri geldi.
 * -------------------------------------------------------------------------- */
.axtea-pagination-gizli {
  display: none !important;
}

/* --- Mevcut Ürünler (Project) bölümü: pagination yerine Learn More --------- */
.axtea-project-btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

/* --- index-4'ten gelen bölüm --------------------------------------------- */
.tj-project-section-4.axtea-project-4 {
  background-color: #b2baee;
}

/* başlık solda, oklar sağda */
.axtea-heading-row {
  row-gap: 24px;
  justify-content: center !important;
  align-items: center !important;
}

/* okların bulunduğu kolon */
.axtea-heading-row > .col-lg-4 {
  display: flex;
  align-items: center;
}

.axtea-heading-row .sec-heading.style-4.text-left {
  text-align: start;
}

.axtea-project-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
}

@media only screen and (max-width: 991px) {
  .axtea-project-nav {
    justify-content: flex-start;
  }
}

/* Görünüm main.css'teki .slider-prev/.slider-next ile birebir aynı.
 * O sınıflar KULLANILMIYOR: main.js `nextEl: ".slider-next"` ile GLOBAL
 * bağlanıyor, sayfadaki diğer slider'lar bu okları da kapardı. */
.axtea-prev,
.axtea-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 24px;
  background-color: #ffffff;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.axtea-prev .anim-icon,
.axtea-next .anim-icon {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}

.axtea-prev .anim-icon i,
.axtea-next .anim-icon i {
  position: relative;
  top: 0;
  color: var(--tj-color-common-black);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.axtea-prev .anim-icon i:last-child,
.axtea-next .anim-icon i:last-child {
  position: absolute;
  -webkit-transform: translateX(150%);
      -ms-transform: translateX(150%);
          transform: translateX(150%);
  color: var(--tj-color-common-white);
}

.axtea-prev:hover,
.axtea-next:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}

.axtea-prev:hover .anim-icon i:first-child,
.axtea-next:hover .anim-icon i:first-child {
  -webkit-transform: translateX(-150%);
      -ms-transform: translateX(-150%);
          transform: translateX(-150%);
}

.axtea-prev:hover .anim-icon i:last-child,
.axtea-next:hover .anim-icon i:last-child {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

@media only screen and (max-width: 767px) {
  .axtea-prev,
  .axtea-next {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* --- index-5'ten gelen ETKİNLİKLER (blog) bölümü ------------------------- */
/* Bu bölüme ÖZEL: ok dairesi koyu (tema varsayılanı --tj-color-theme-dark,
 * o da artık #dbdbdf olduğu için beyaz zeminde kayboluyordu). */
.axtea-blog .text-btn .btn-icon {
  background-color: #17282d;
}

/* --- Footer rozetleri (+75 COUNTRY / 2 BRANCHES) --------------------------
 * Hem anasayfa hem ürünler footer'ında kullanılıyor, o yüzden ortak dosyada. */
.axtea-footer-rozet {
  margin-top: 28px;
}

.axtea-footer-rozet img {
  width: 100%;
  height: 70px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* --- Servis listesi madde işareti: tema ikonu yerine Axtea markası --------
 * Ölçüm: tema `<i class="tji-list">` 12px font / 12px satır / 6px üst boşluk
 * ile 13x18'lik kutuda duruyordu; görsel aynı yere aynı boyutta oturuyor. */
.list-items li .axtea-liste-ikon {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  flex: 0 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* --- Hero'daki dönen rozet ------------------------------------------------
 * Tasarımda halka yazısı "Axtelligent Solutions", ortada ahşap Axtea markası,
 * zemin koyu yarı saydam. Yazı SATIR İÇİ SVG: tema bunu `background-image`
 * olarak kullanıyordu, öyle olsa Mona Sans yüklenemezdi (harici SVG sayfanın
 * fontuna erişemez). Halka dönüşü tema animasyonundan (textrotate) geliyor.
 * Zemin rengi PDF'ten örneklendi: rozet içi #151b3a, arkasındaki hero #1a1f47. */
.circle-text-wrap.axtea-rozet {
  background-color: rgba(6, 8, 26, 0.42);
}

.circle-text-wrap.axtea-rozet .circle-text svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.circle-text-wrap.axtea-rozet .circle-text text {
  font-family: var(--tj-ff-heading);
  font-size: 12.5px;
  font-weight: var(--tj-fw-medium);
  fill: var(--tj-color-common-white);
}

/* PNG'nin siyah zemini parlaklığa göre şeffaflaştırıldı (blend moduna gerek yok) */
.circle-text-wrap.axtea-rozet .circle-icon img {
  width: 62px;
  height: auto;
}

@media only screen and (max-width: 1199px) {
  .circle-text-wrap.axtea-rozet .circle-icon img {
    width: 48px;
  }
}

/* --- Axtea logosu --------------------------------------------------------
 * Yeni logo tema logosundan çok daha GENİŞ bir kilit (oran 5.78 : 1;
 * tema logosu 3.56 : 1 idi). Tema kutusu 136px olduğu için "INTEGRATED
 * WOODWORKING SOLUTIONS" satırları okunmaz hale geliyordu — kutu genişletildi.
 * ⚠️ SVG'ye width/height eklendi: intrinsic ölçüsü olmayan SVG <img> içinde
 *    0x0 render oluyordu (ölçüldü). */
.site_logo .logo {
  max-width: 190px;
}

.hamburger_logo .mobile_logo {
  display: inline-block;
  max-width: 190px;
}

.site_logo .logo img,
.hamburger_logo .mobile_logo img,
.footer-logo img {
  width: 100%;
  height: auto;
}

/* --- Footer ------------------------------------------------------------- */
.tj-footer-section {
  background-color: #17282d !important;
}

/* İkinci ofis başlığı ilk adresten sonra geliyor, nefes alsın.
 * Değerler ÖLÇÜMLE seçildi: tema varsayılanı (mt 30 + mb 33) kolonu
 * diğerlerinden tam 25px aşağı taşırıyordu; 12+13 kırpınca alt hiza tutuyor. */
.footer-widget.widget-contact .title.axtea-ofis-baslik {
  margin-top: 18px;
  margin-bottom: 20px;
}

/* ⚠️ HİZA DÜZELTMESİ — son kolon diğerlerinden 97px aşağı taşıyordu.
 * ÖLÇÜM: `.widget-contact`ın 76px sol iç boşluğu içerik alanını 230px'e
 * düşürüyor; adreslerin en uzun satırı ise 255px istiyor ("6047 Tyvola Glen
 * Circle, Charlotte,"). Bu yüzden 2 satırlık adresler 4 satıra sarıyordu.
 * (main.css:3258'deki max-width:230px suçlu DEĞİLDİ — ölçüldü, kaldırınca
 * hiçbir şey değişmedi; asıl kısıt iç boşluktu.)
 * Çözüm: iç boşluğu adres sığacak kadar azalt, kolon yapısına dokunma. */
.footer-widget.widget-contact .footer-contact-info {
  max-width: 100%;
}

@media only screen and (min-width: 1400px) {
  .footer-widget.widget-contact {
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .footer-widget.widget-contact {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}

/* Telefon numarası adresin altına insin */
.footer-widget.widget-contact .footer-contact-info .contact-item a {
  display: block;
}

/* Copyright: sol / orta / sağ.
 * .copyright-content-area zaten flex + space-between; ortanın GERÇEKTEN
 * ortada durması için yanlardaki iki blok eşit pay alıyor. */
.axtea-copyright {
  gap: 16px;
}

.axtea-copyright .axtea-copyright-sol,
.axtea-copyright .axtea-copyright-sag {
  flex: 1 1 0;
  min-width: 0;
}

.axtea-copyright .axtea-copyright-orta {
  flex: 0 1 auto;
  text-align: center;
}

.axtea-copyright .axtea-copyright-sag ul {
  justify-content: flex-end;
}

.axtea-copyright .axtea-copyright-sol a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.axtea-copyright .axtea-copyright-sol a i {
  font-size: 18px;
  line-height: 1;
  color: var(--tj-color-theme-primary);
}

@media only screen and (max-width: 991px) {
  .axtea-copyright .axtea-copyright-sol,
  .axtea-copyright .axtea-copyright-orta,
  .axtea-copyright .axtea-copyright-sag {
    flex: 1 1 100%;
    text-align: center;
  }
  .axtea-copyright .axtea-copyright-sag ul {
    justify-content: center;
  }
  .axtea-copyright .axtea-copyright-sol a {
    justify-content: center;
  }
}

/* ⚠️ Özgüllük notu: main.css:20512
 * `.h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .title`
 * (0,6,0) ile ilk karta 500 veriyor. Aşağıdaki seçici de (0,6,0) — eşitlikte
 * sonra yüklenen kazanır, o yüzden axtea.css'te bu uzunlukta yazılmak zorunda. */
.axtea-blog .h5-blog-wrapper .blog-item.h5-blog-item .blog-content .title,
.axtea-blog .h5-blog-wrapper .blog-item.h5-blog-item .blog-content .title a {
  font-weight: 600;
}