/* =============================================================================
   cms-custom.css — CMS ↔ Manrox teması uyum katmanı
   -----------------------------------------------------------------------------
   Temanın kendi style.css'i DEĞİŞTİRİLMEZ (orada sadece :root marka renkleri
   güncellendi). Panelden gelen HTML'in ve CMS'e özel blokların temaya uyması
   için gereken her şey bu dosyadadır.

   İÇİNDEKİLER
     1. Başlık normalizasyonu (SEO için h3 -> h1/h2)
     2. Menü: display_menu() çıktısı + footer menüsü
     3. .cms-content — panelden gelen içerik tipografisi
     4. .cms-cat-*   — kategori şablonu (icerik9.php)
     5. .cms-search-*— arama sonuçları
     6. .cms-404
     7. Footer haritası
     8. İletişim formunun tema içindeki yerleşimi
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. BAŞLIK NORMALİZASYONU
   Tema her yerde h3/h4 kullanıyor; SEO için sayfada tek h1 ve doğru hiyerarşi
   gerekiyor. Tema kuralları sınıf bazlı (.hero-title, .site-title,
   .breadcrumb-title) olduğu için görünüm zaten korunuyor — burada sadece
   tarayıcının h1/h2 varsayılan margin/size'ını sıfırlıyoruz.
---------------------------------------------------------------------------- */
h1.hero-title,
h1.breadcrumb-title,
h2.site-title,
h2.cms-cat-title {
  font-size: inherit;
  margin-top: 0;
}
.hero-section .hero-single .hero-content h1.hero-title { margin: 20px 0; }
.site-breadcrumb h1.breadcrumb-title { margin-bottom: 10px; }
.site-heading h2.site-title { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   2. MENÜ
   display_menu() (config_site.php) temanın sınıflarını basıyor. Burada sadece
   iki şey var: (a) tek seviyeli menüde ok işareti çıkmasın, (b) footer'daki
   aynı menü listesi footer görünümünü alsın.
---------------------------------------------------------------------------- */

/* Alt menüsü olmayan üst seviye linkte bootstrap oku gösterme */
.navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after { display: none; }

/* --- Header'daki açık arama çubuğu (.cms-nav-search) ---
   Header'ın sağı boş duruyordu; büyüteç ikonu yerine görünür bir arama çubuğu.
   Hedef CMS'in kendi arama sayfası: /icerik/search.html?q=... */
.cms-nav-search {
  display: flex;
  align-items: center;
  width: 250px;
  max-width: 100%;
  border: 1px solid var(--border-info-color, rgba(0, 0, 0, .12));
  border-radius: 40px;
  background: var(--theme-bg-light, #f6f6f6);
  overflow: hidden;
  transition: var(--transition2, all .3s ease-in-out);
}
.cms-nav-search:focus-within {
  border-color: var(--theme-color);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 14%, transparent);
}
.cms-nav-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--color-dark);
  padding: 11px 4px 11px 18px;
}
.cms-nav-search input::placeholder { color: var(--body-text-color, #757f95); opacity: .9; }
.cms-nav-search button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--theme-color);
  color: #fff;
  width: 42px;
  height: 42px;
  margin: 3px;
  border-radius: 50%;
  font-size: 15px;
  transition: var(--transition2, all .3s ease-in-out);
}
.cms-nav-search button:hover { background: var(--theme-color2); }
@media all and (max-width: 1399px) { .cms-nav-search { width: 200px; } }
@media all and (max-width: 1199px) { .cms-nav-search { width: 170px; } }
/* Mobil drawer içinde tam genişlik ve menünün altında dursun */
@media all and (max-width: 991px) {
  .cms-nav-search { width: 100%; margin-bottom: 18px; }
}

/* --- MOBİL arama çubuğu: logo satırının ALTINDA, tam genişlik ---
   Masaüstünde gizli (orada .nav-right içindeki çubuk çalışıyor). */
.cms-nav-search--mobil { display: none; }
@media all and (max-width: 991px) {
  .cms-nav-search--mobil {
    display: flex;
    order: 10;
    width: 100%;
    flex: 0 0 100%;
    margin: 14px 0 4px;
  }
  /* Drawer içindeki kopya mobilde gereksiz — tekrar olmasın */
  .offcanvas .nav-right .cms-nav-search { display: none; }
  .navbar .container { flex-wrap: wrap; }
}

/* --- MOBİL: hamburger menüsünün altında iletişim bilgileri --- */
.cms-drawer-iletisim { display: none; }
@media all and (max-width: 991px) {
  .cms-drawer-iletisim {
    display: block;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border-info-color, rgba(0, 0, 0, .1));
  }
  .cms-drawer-iletisim h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 14px;
  }
  .cms-drawer-iletisim ul { list-style: none; margin: 0; padding: 0; }
  .cms-drawer-iletisim li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body-text-color, #757f95);
  }
  .cms-drawer-iletisim li i { color: var(--theme-color); font-size: 15px; margin-top: 3px; flex: 0 0 auto; }
  .cms-drawer-iletisim li a { color: var(--body-text-color, #757f95); }
  .cms-drawer-iletisim li a:hover { color: var(--theme-color); }
  .cms-drawer-sosyal { display: flex; gap: 10px; margin-top: 16px; }
  .cms-drawer-sosyal a {
    width: 36px; height: 36px; line-height: 36px; text-align: center;
    border-radius: 50%; font-size: 14px;
    color: #fff; background: var(--theme-color2);
  }
  .cms-drawer-sosyal a:hover { background: var(--theme-color); }
}

/* --- Hero'daki telefon kutusu: TAMAMI tıklanabilir tel: linki ---
   Slider katmanları (hero-bg-img, ::before overlay) tıklamayı yiyordu. */
.hero-item-box .cms-call-link {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 5;
  cursor: pointer;
}
.hero-item-box .cms-call-link .call-info strong {
  display: block;
  font-weight: 700;
  color: var(--color-white, #fff);
}
.hero-item-box .cms-call-link:hover .call-info strong { color: var(--theme-color); }

/* --- MOBİL: slider okları iletişim kutusuyla üst üste biniyordu -> gizle ---
   Slider zaten otomatik dönüyor (autoplay) ve dokunmatikte kaydırma çalışıyor. */
@media all and (max-width: 991px) {
  .hero-slider .owl-nav { display: none !important; }
}

/* Panelde başlık amaçlı '#' linkleri tıklanınca sayfa başa zıplamasın */
.navbar-nav .nav-link[href="#"],
.navbar-nav .dropdown-item[href="#"] { cursor: default; }

/* --- Footer menüsü: aynı display_menu() çıktısı, footer görünümü ---
   DİKKAT: display_menu() temanın navbar sınıflarını (.nav-item/.nav-link)
   basıyor; footer'da bu sınıflara ait navbar kuralları da devreye giriyordu.
   Tarayıcıdan ölçüldü: link "margin-left: -20px" alıyor ve mobilde sol: -8px
   oluyordu -> menü yazılarının ilk harfleri ekran dışında kalıp kırpılıyordu.
   Bu yüzden ul/li/a için yerleşim değerleri ".footer-area" önekiyle (daha
   yüksek özgüllük) AÇIKÇA sıfırlanıyor. */
.footer-area .cms-footer-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-area .cms-footer-menu .nav-item,
.footer-area .cms-footer-menu > li {
  display: block;
  position: static;
  width: 100%;
  margin: 0;
  padding: 0;
}
.footer-area .cms-footer-menu .nav-link,
.footer-area .cms-footer-menu li > a {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--footer-text-color, #f5faff);
  opacity: .85;
  font-size: 15px;
  line-height: 1.6;
  white-space: normal;
  transition: var(--transition2, all .3s ease-in-out);
}
.footer-area .cms-footer-menu .nav-link:hover,
.footer-area .cms-footer-menu li > a:hover { color: var(--theme-color); opacity: 1; padding-left: 6px; }

/* Footer'da alt menüler açılmasın / dropdown davranışı olmasın (duplike liste) */
.cms-footer-menu ul { display: none !important; }
.cms-footer-menu .dropdown-toggle::after { display: none; }

/* ----------------------------------------------------------------------------
   3. .cms-content — PANELDEN GELEN İÇERİK
   Panel editöründen h2/h3/p/ul/ol/table/img gelir. Tema bu etiketleri kendi
   başına stillemediği için okunur bir tipografi burada tanımlanır.
---------------------------------------------------------------------------- */
.cms-content { color: var(--body-text-color, #757f95); font-size: 16px; line-height: 1.8; }

.cms-content h2,
.cms-content h3,
.cms-content h4 {
  color: var(--color-dark);
  font-family: var(--heading-font);
  font-weight: 600;
  line-height: 1.3;
  margin: 32px 0 14px;
}
.cms-content h2 { font-size: 30px; }
.cms-content h3 { font-size: 24px; }
.cms-content h4 { font-size: 20px; }
.cms-content > :first-child { margin-top: 0; }

.cms-content p { margin: 0 0 16px; }

/* SADECE panel editöründen gelen ÇIPLAK linkler renklenir.
   ":not([class])" şart: aksi hâlde bu kural .theme-btn / .cms-cat-title gibi
   sınıflı bağlantıları da eziyor -> kırmızı zeminde kırmızı yazı (görünmez buton)
   ve başlıkların altı çizili çıkıyor. (Canlı öncesi ekran görüntüsünde yakalandı.) */
.cms-content a:not([class]) { color: var(--theme-color); text-decoration: underline; text-underline-offset: 3px; }
.cms-content a:not([class]):hover { color: var(--theme-color2); }
/* CMS bileşenlerinin içindeki sınıfsız bağlantılar bu stilden muaf */
.cms-content .cms-cat-list a,
.cms-content .cms-search a { text-decoration: none; }

.cms-content ul,
.cms-content ol { margin: 0 0 18px; padding-left: 20px; }
.cms-content li { margin-bottom: 8px; }
.cms-content ul li { list-style: none; position: relative; padding-left: 24px; }
.cms-content ul li::before {
  content: "\f00c";                 /* fontawesome check */
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 13px;
  color: var(--theme-color);
}
.cms-content ol li { list-style: decimal; }

.cms-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 10px 0 20px;
}

.cms-content blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--theme-color);
  background: var(--theme-bg-light, #f6f6f6);
  border-radius: 0 10px 10px 0;
  font-size: 17px;
}

.cms-content strong { color: var(--color-dark); }

/* Tablo yalnızca KENDİ kutusunda yatay kaysın — içerik alanının tamamına
   overflow verilirse sayfanın altında yatay kaydırma çubuğu çıkıyor. */
.cms-content .table-wrap,
.cms-content table { display: block; max-width: 100%; overflow-x: auto; }
.cms-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 22px;
  font-size: 15px;
  white-space: nowrap;
}
.cms-content table th,
.cms-content table td { border: 1px solid var(--border-info-color, rgba(0,0,0,.08)); padding: 10px 14px; text-align: left; }
.cms-content table th { background: var(--theme-bg-light, #f6f6f6); color: var(--color-dark); font-weight: 600; }

/* Panelin eski şablonundan gelen sarmalayıcılar boş satır bırakmasın */
.cms-content .blogCard__content,
.cms-content .blogCard__link { margin: 0 !important; }
.cms-content .blogCard__text:empty { display: none; }

/* Sayfa güncelleme tarihi */
.cms-content .page-content__update {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border-info-color, rgba(0,0,0,.08));
  font-size: 14px;
  color: var(--body-text-color);
}

/* ----------------------------------------------------------------------------
   3b. SAYFA GALERİSİ — SATIR SATIR (icerik/resim4.php)
   Her görsel kendi satırında: bir yanda görsel, diğer yanda başlığı + yazısı;
   satır değiştikçe görsel karşı tarafa geçer. Kategori şablonuyla (icerik9.php)
   AYNI satır düzenini paylaşır — ortak yerleşim kuralları Bölüm 4'te
   (.cms-cat-row ile .cms-gal-row birlikte tanımlı). Burada sadece galeriye özel
   farklar var.
   ".cms-content" öneki ZORUNLU: petasoft/icerik_css/resim4.css body içinde
   yüklendiği için bu dosyadan SONRA geliyor; özgüllüğü artırmadan
   .galleryk-item kuralları (beyaz kutu + gölge + padding) geri geliyor.
---------------------------------------------------------------------------- */
.cms-content .cms-gal-list { margin: 38px 0 10px; }

/* resim4.css'in kart görünümünü sıfırla */
.cms-content .cms-gal-list .galleryk-item {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: none;
}
.cms-content .cms-gal-list .galleryk-item:hover { transform: none; }

.cms-content .cms-gal-row .ani-img {
  border-radius: 20px;
  overflow: hidden;
  background: var(--theme-bg-light, #f6f6f6);
}
.cms-content .cms-gal-row .ani-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;          /* ürün fotoğrafı kırpılmasın */
  border-radius: 20px;
  object-fit: cover;
  transition: transform .6s ease;
}
.cms-content .cms-gal-row:hover .ani-img img { transform: scale(1.04); }

.cms-content .cms-gal-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--color-dark);
}
.cms-content .cms-gal-text {
  color: var(--body-text-color, #757f95);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* Başlığı ve yazısı olmayan görsel: satır tam genişlik olsun */
.cms-content .cms-gal-row.is-plain .cms-gal-media { flex: 0 0 100%; max-width: 100%; }

@media all and (max-width: 991px) {
  .cms-content .cms-gal-title { font-size: 22px; }
}

/* ----------------------------------------------------------------------------
   3c. İÇ SAYFA SSS (icerik/sss.php)
   Blok "faq-area" ile sarmalandığı için temanın akordiyon stilleri (renk,
   ikon, açılma animasyonu) olduğu gibi geliyor. Burada sadece iç sayfa
   yerleşimi ayarlanıyor: üstten ayır, tam genişlik, başlık ölçüsünü küçült
   (ana sayfadaki 50px başlık iç sayfada fazla iri kalıyor).
---------------------------------------------------------------------------- */
.cms-content .cms-sss {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--border-info-color, rgba(0, 0, 0, .08));
}
.cms-content .cms-sss .site-heading h2.site-title { font-size: 32px; }
@media all and (max-width: 767px) {
  .cms-content .cms-sss .site-heading h2.site-title { font-size: 26px; }
}
.cms-content .cms-sss .site-title-tagline { margin-bottom: 10px; }
/* Akordiyon başlığı h3 — tarayıcının varsayılan margin'i düzeni bozmasın */
.cms-content .cms-sss .accordion-header { margin: 0; }
.cms-content .cms-sss .accordion-body { color: var(--body-text-color, #757f95); line-height: 1.8; }
/* Soru metni uzunsa buton içinde düzgün sarsın */
.cms-content .cms-sss .accordion-button { text-align: left; align-items: flex-start; }

/* ----------------------------------------------------------------------------
   4. KATEGORİ ŞABLONU (icerik/icerik9.php)
   Bir yanda görsel, diğer yanda o görsele ait yazı; satır değiştikçe taraf değişir.
---------------------------------------------------------------------------- */
.cms-cat-intro { margin-bottom: 50px; }

/* ORTAK SATIR YERLEŞİMİ — kategori sayfası (.cms-cat-row) ve sayfa galerisi
   (.cms-gal-row) aynı düzeni kullanır; görünüm tek yerden yönetilir. */
.cms-cat-row,
.cms-content .cms-gal-row {
  display: flex;
  align-items: center;
  gap: 46px;
  padding: 42px 0;
  border-bottom: 1px solid var(--border-info-color, rgba(0, 0, 0, .08));
}
.cms-cat-row:first-child,
.cms-content .cms-gal-row:first-child { padding-top: 0; }
.cms-cat-row:last-child,
.cms-content .cms-gal-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cms-cat-row.is-reverse,
.cms-content .cms-gal-row.is-reverse { flex-direction: row-reverse; }

.cms-cat-media,
.cms-content .cms-gal-media { flex: 0 0 44%; max-width: 44%; }
.cms-content .cms-gal-body { flex: 1 1 auto; min-width: 0; }
.cms-cat-media .ani-img {
  overflow: hidden;
  border-radius: 14px;
  background: var(--theme-bg-light, #f6f6f6);
}
.cms-cat-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;             /* panelden gelen farklı oranlar satırı bozmasın */
  object-fit: cover;
  transition: transform .6s ease;
}
.cms-cat-row:hover .cms-cat-media img { transform: scale(1.06); }

.cms-cat-body { flex: 1 1 auto; min-width: 0; }
.cms-cat-body.is-full { flex-basis: 100%; max-width: 100%; }

.cms-cat-title { font-size: 30px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; }
/* ".cms-content" öneki ZORUNLU: yukarıdaki .cms-content a:not([class]) kuralı
   sınıfsız <a>'yı yakalıyor ve özgüllüğü daha yüksek -> başlık kırmızı + altı
   çizili çıkıyordu. Bu satırlar onu geri alır. */
.cms-content .cms-cat-title a { color: var(--color-dark); text-decoration: none; transition: var(--transition2, all .3s ease-in-out); }
.cms-content .cms-cat-title a:hover { color: var(--theme-color); }

.cms-cat-text {
  color: var(--body-text-color, #757f95);
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 22px;
}

@media all and (max-width: 991px) {
  .cms-cat-row,
  .cms-cat-row.is-reverse,
  .cms-content .cms-gal-row,
  .cms-content .cms-gal-row.is-reverse { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cms-cat-media,
  .cms-content .cms-gal-media { flex-basis: auto; max-width: 100%; width: 100%; }
  .cms-cat-title { font-size: 24px; }
}

/* ----------------------------------------------------------------------------
   5. ARAMA SONUÇLARI (icerik/search.php)
---------------------------------------------------------------------------- */
.cms-search-form { display: flex; gap: 10px; margin-bottom: 26px; max-width: 560px; }
.cms-search-form input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid var(--border-info-color, rgba(0,0,0,.12));
  border-radius: 10px;
  outline: none;
}
.cms-search-form input:focus { border-color: var(--theme-color); }
.cms-search-form button {
  border: 0;
  border-radius: 10px;
  padding: 13px 24px;
  font-weight: 600;
  color: #fff;
  background: var(--theme-color);
  cursor: pointer;
}
.cms-search-msg { margin-bottom: 26px; color: var(--body-text-color); }

.cms-search-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-info-color, rgba(0,0,0,.08));
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: var(--transition2, all .3s ease-in-out);
}
.cms-search-card:hover { box-shadow: var(--box-shadow, 0 0 40px 5px rgba(0,0,0,.05)); transform: translateY(-4px); }
.cms-search-thumb { display: block; overflow: hidden; }
.cms-search-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cms-search-body { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.cms-search-cat {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--theme-color);
  background: color-mix(in srgb, var(--theme-color) 12%, transparent);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.cms-search-body h3 { font-size: 19px; line-height: 1.4; margin: 0 0 10px; }
/* ".cms-content" öneki: sınıfsız <a> kuralını ez (bkz. .cms-cat-title notu) */
.cms-content .cms-search-body h3 a { color: var(--color-dark); text-decoration: none; }
.cms-content .cms-search-body h3 a:hover { color: var(--theme-color); }
.cms-content .cms-search-thumb { text-decoration: none; }
.cms-search-body p { font-size: 15px; line-height: 1.7; color: var(--body-text-color); margin: 0 0 12px; }
.cms-search-price { font-weight: 700; color: var(--color-dark) !important; }
.cms-search-link { margin-top: auto; font-weight: 600; color: var(--theme-color); }
.cms-search-link i { margin-left: 6px; font-size: 12px; }

/* ----------------------------------------------------------------------------
   6. 404
---------------------------------------------------------------------------- */
.cms-404 { padding: 40px 0 20px; }
.cms-404 h2 { font-size: 34px; color: var(--color-dark); margin-bottom: 14px; }
.cms-404 p { color: var(--body-text-color); margin-bottom: 26px; }
.cms-404 .theme-btn,
.cms-404 .theme-btn2 { margin: 0 6px; }

/* ----------------------------------------------------------------------------
   7. FOOTER HARİTASI
---------------------------------------------------------------------------- */
.footer-map {
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-white-color2, rgba(255,255,255,.15));
}
.footer-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.25); }

/* ----------------------------------------------------------------------------
   8. İLETİŞİM FORMU — tema kutusu içindeki yerleşim
   Formun kendi görünümü include/custom-contact-style.css'te (siteden bağımsız).
   Burada sadece temanın .quote-form kutusuna oturması ayarlanır.
---------------------------------------------------------------------------- */
.quote-form .custom-contact-us { padding: 0; }
.quote-form .custom-contact-us > div:first-of-type h4 { display: none; }  /* kutuda zaten başlık var */
.quote-form #custom-contact-form { --ccf-radius: 8px; }

/* İçerik sayfasındaki iletişim şablonunda (iletisim1.php) formu biraz ayır */
.cms-content .custom-contact-us { margin-top: 30px; }
.cms-content .custom-contact-us h4 {
  font-size: 24px;
  color: var(--color-dark);
  margin: 0 0 18px;
}

/* ----------------------------------------------------------------------------
   9. KÜÇÜK DÜZELTMELER
---------------------------------------------------------------------------- */
/* Preloader logosu invert filtresi renkli logoyu maviye çeviriyorsa kapat */
.preloader .logo img { filter: none !important; }

/* Breadcrumb başlığı görselin üstünde her zaman okunur olsun */
.site-breadcrumb .breadcrumb-title,
.site-breadcrumb .breadcrumb-menu li { color: #fff; }

/* ----------------------------------------------------------------------------
   LOGO ÖLÇÜSÜ
   Marka logosu 685x450 (dikeye yakın); tema ise geniş-alçak bir logo varsayıyor.
   Sınırlamazsak header satırı şişiyor. Yükseklikten kilitliyoruz, en-boy korunur.
   Footer sürümü beyaz çipli PNG (koyu zeminde mavi yazı okunmuyordu) -> köşeleri
   yumuşat.
---------------------------------------------------------------------------- */
/* ÖNEMLİ — tema logoya SABİT GENİŞLİK veriyor:
     .navbar .navbar-brand img { width: 180px }        (özgüllük 0,3,1)
   Logomuz 685x450 (1.52:1) olduğu için 180px'e zorlanıp yükseklik sınırıyla
   birleşince 180x46 (3.91:1) çıkıyor ve YATAYDA EZİLİYOR (tarayıcıdan ölçüldü).
   Düzeltme: aynı özgüllükle genişliği serbest bırak — bu dosya style.css'ten
   SONRA yüklendiği için eşitlikte biz kazanırız. object-fit de güvence. */
.navbar .navbar-brand img,
.offcanvas .offcanvas-brand img,
.navbar-brand img,
.offcanvas-brand img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 61px;          /* 46 -> 61 (istek üzerine 15px büyütüldü) */
  object-fit: contain;
}
/* Logo biraz sağdan başlasın */
.navbar .navbar-brand { margin-left: 26px; }
@media all and (max-width: 991px) {
  .navbar .navbar-brand img,
  .navbar-brand img { max-height: 48px; }   /* mobilde de orantılı büyüdü */
  .navbar .navbar-brand { margin-left: 0; }
}
/* 66 -> 81 (aynı şekilde 15px) */
.footer-logo img { width: auto; height: auto; max-height: 81px; object-fit: contain; border-radius: 10px; }

/* HERO TAŞMASI — header'ın altına giren içerik (ölçülerek bulundu)
   Tema hero'ya `height: 100vh` + `min-height: 760px` veriyor ve içeriği
   `align-items: flex-end` ile ALTA yaslıyor. 992px altında sağdaki telefon
   kutusu metnin altına indiği için içerik ~718px'e çıkıyor; kutu yüksekliği
   ise sabit olduğundan taşan kısım YUKARI, header'ın altına kaçıyordu
   (768x500'de tagline header'ın içinde kalıyordu).
   Çözüm: yüksekliği içeriğe bırak — min-height zaten tabanı koruyor, yani
   masaüstünde hiçbir şey değişmez, dar/kısa ekranda kutu uzayıp taşma biter. */
.hero-section .hero-single { height: auto; }
@media all and (min-width: 768px) {
  .hero-section .hero-single { padding-top: 150px; }   /* header için ek pay */
}

/* Slider okları: tema masaüstünde sol oku "left:40px" ile yerleştiriyor ve ok,
   sola hizalı hero metninin (tagline rozetinin) ÜSTÜNE biniyordu — gear ikonu
   yarım görünüp "3" gibi okunuyordu. Temanın kendi ≤1199px davranışını
   masaüstüne de taşıyoruz: iki ok da sağda, metinden uzakta. */
@media all and (min-width: 1200px) {
  .hero-slider .owl-nav .owl-prev { left: unset; right: 120px; }
}
/* Oklar hero'nun alt-sağına insin; sağdaki iletişim kutusuyla da çakışmasın */
.hero-slider .owl-nav { position: absolute; right: 0; bottom: 40px; top: auto; }
@media all and (max-width: 991px) { .hero-slider .owl-nav { bottom: 20px; } }

/* Hero'daki telefon kutusu: uzun numara iki satıra bölünmesin */
.hero-item-box .call-info a { white-space: nowrap; font-size: 20px; }
@media all and (max-width: 1399px) { .hero-item-box .call-info a { font-size: 18px; } }

/* ----------------------------------------------------------------------------
   MOBİL: "Hangi Araçlar İçin Şase Üretiyoruz" (portfolyo) — KUTU KUTU
   Tema bu bölümü masaüstünde 4 dikey sütun + tek ortak arka plan olarak kuruyor
   (col-lg-3 + .hbc-wrap background swap). Mobilde sütunlar üst üste binip
   kart içerikleri arka planın üstüne taşıyordu. Mobilde her öğe KENDİ KUTUSU:
   kendi arka planı yok, koyu zeminli ayrı kart olarak alt alta dizilir.
---------------------------------------------------------------------------- */
/* Masaüstünde kartların inline arka planı İPTAL — tema tek ortak arka planı
   .portfolio-wrap üzerinde JS ile değiştiriyor, düzen aynen korunsun. */
@media all and (min-width: 992px) {
  .portfolio-area .portfolio-wrap .item { background-image: none !important; }
}
@media all and (max-width: 991px) {
  .portfolio-area .portfolio-wrap {
    background: none !important;
    padding: 0;
  }
  .portfolio-area .portfolio-wrap > .row { row-gap: 16px; }
  /* Kartın KENDİ görseli (index.php'deki inline background-image) + üstüne
     okunabilirlik için koyu gradyan. */
  .portfolio-area .portfolio-wrap .item {
    background-color: var(--theme-color2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    min-height: 240px;
  }
  .portfolio-area .portfolio-wrap .item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,19,52,.35) 0%, rgba(16,19,52,.88) 70%);
  }
  .portfolio-area .portfolio-wrap .item .portfolio-item {
    position: relative;
    z-index: 2;                 /* gradyanın üstünde kalsın */
    height: auto;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    padding: 24px 22px;
  }
  .portfolio-area .portfolio-wrap .item .portfolio-content {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
  }
  .portfolio-area .portfolio-wrap .item .portfolio-content .title { font-size: 20px; margin-bottom: 6px; }
  .portfolio-area .portfolio-wrap .item .portfolio-bottom { margin-top: 14px; }
  /* Aktif/hover durumuna bağlı gizleme kuralları mobilde geçersiz olsun */
  .portfolio-area .portfolio-wrap .item:not(.active) .portfolio-content { opacity: 1; visibility: visible; }
}

/* Portfolio kartındaki cc aralığı yazısı */
.portfolio-item .title small { font-size: .62em; font-weight: 400; opacity: .85; display: block; margin-top: 4px; }

/* İç sayfa içerik bloğu üstten/alttan nefes alsın */
.page-area { padding-top: 90px; padding-bottom: 90px; }
@media all and (max-width: 767px) { .page-area { padding-top: 60px; padding-bottom: 60px; } }