/* Smart Electronics — özəl stillər (style.scss-dən) */
/* Temanın assets/css/main.css-indən SONRA yüklənir. */

/* ==========================================================
   Brend palitrası ("Forest") — mənbə: assets/logo/README.txt
   Temanın firuzəyi rəngləri brend yaşılına köçürülüb.
   ========================================================== */
:root {
  --tj-color-heading-primary: #131c15;   /* mürəkkəb */
  --tj-color-text-body: #3d4b41;
  --tj-color-text-body-2: #adb4af;
  --tj-color-text-body-3: #6c756e;
  --tj-color-text-body-4: #1d2720;

  --tj-color-theme-primary: #3f7d4f;     /* brend yaşılı */
  --tj-color-theme-bg: #dbe2dd;
  --tj-color-theme-bg-2: #d2dcd5;
  --tj-color-theme-bg-3: #1e4026;        /* ən tünd yaşıl */

  --tj-color-theme-dark: #131c15;
  --tj-color-theme-dark-2: #1d2720;
  --tj-color-theme-dark-3: #3d4b41;
  --tj-color-theme-dark-4: #6c756e;
  --tj-color-theme-dark-5: #6c756e;

  --tj-color-grey-1: #f1f5f1;            /* açıq fon */
  --tj-color-grey-2: #adb4af;

  --tj-color-border-1: #cbcfcc;
  --tj-color-border-2: #343a36;
  --tj-color-border-5: rgba(63, 125, 79, 0.149);
}

/* ==========================================================
   Loqo ölçüsü
   Yeni loqonun nisbəti 678×300 (2.26:1), köhnəsi 544×153 (3.56:1) idi.
   Tema eninə görə ölçürdü (max-width:136px) — yeni loqo həddən artıq
   hündür olurdu. Hündürlüyə görə sabitləyirik, en özü uyğunlaşır.
   ========================================================== */
.site_logo .logo,
.hamburger_logo .mobile_logo,
.footer-logo {
  max-width: none;
  width: auto;
}

.site_logo .logo img {
  height: 52px;
  width: auto;
}

.hamburger_logo .mobile_logo img {
  height: 44px;
  width: auto;
}

.footer-logo img {
  height: 64px;
  width: auto;
}

/* Hero slider: slaydların hündürlüyü mətnin uzunluğundan asılı
   olmasın. Swiper `.swiper-slide { height: 100% }` verdiyi üçün
   flex `stretch` işləmir və qısa slaydın altından arxadakı
   slaydın şəkli görünür. */
.hero-slider .swiper-wrapper {
  align-items: stretch;
}

.hero-slider .swiper-slide.tj-slider-item {
  height: auto; /* `stretch` yalnız `auto`-da işə düşür */
}

/* Hero şəkillərinin sol kənarı (~13%) uzadılmış piksellərdir.
   Tünd gradient həmin zolağı örtür və mətni oxunaqlı edir. */
.hero-slider .slider-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(19, 28, 21) 0%,
    rgb(19, 28, 21) 16%,
    rgba(19, 28, 21, 0.75) 35%,
    rgba(19, 28, 21, 0.25) 60%,
    rgba(19, 28, 21, 0) 80%
  );
}

/* "Bizim Həllərimiz" kartları: başlıqlar 1 və ya 2 sətir olduğu üçün
   ikonlar müxtəlif hündürlükdə dayanırdı. Başlıq sahəsini 2 sətrə
   sabitləyirik ki, bütün kartlarda ikon və mətn eyni xətdə olsun. */
.service-item.style-6 .title {
  min-height: 64px; /* 2 × line-height (fallback) */
  min-height: calc(2 * 1lh);
}

/* ==========================================================
   Header — dil seçimi (AZ / EN / RU)
   ========================================================== */
.header-lang {
  position: relative;
}

.header-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tj-color-common-white);
  font-size: 15px;
  font-weight: var(--tj-fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
}

.header-lang-toggle:hover {
  color: var(--tj-color-theme-primary);
}

.header-lang-toggle i {
  font-size: 16px;
}

.header-lang-caret {
  font-size: 10px !important;
  transition: transform 0.3s ease;
}

.header-lang-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 18px);
  min-width: 165px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  border-radius: 10px;
  background-color: var(--tj-color-common-white);
  box-shadow: 0 18px 40px rgba(12, 30, 33, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* visibility gecikmə ilə dəyişir ki, bağlanma animasiyası görünsün */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  z-index: 9;
}

.header-lang-list a {
  display: block;
  padding: 8px 20px;
  color: var(--tj-color-heading-primary);
  font-size: 15px;
  white-space: nowrap;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.header-lang-list a:hover,
.header-lang-list a.active {
  color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-grey-1);
}

.header-lang.is-open .header-lang-caret {
  transform: rotate(180deg);
}

.header-lang.is-open .header-lang-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* "Əlaqə saxla" düyməsindəki telefon ikonu.
   Tema `.btn-icon i`-ni -45° fırladır (ox yuxarı-sağa baxsın deyə),
   hover-də isə 0-a qaytarır. Telefon ikonuna bu fırlanma yaramır. */
.tj-primary-btn .btn-icon i.tji-phone {
  font-size: 17px;
  transform: none;
}

.tj-primary-btn:hover .btn-icon i.tji-phone {
  transform: scale(1.08);
}

/* Xidmətlər səhifəsindəki kartlar: başlıq 1 və ya 2 sətir olduğuna görə
   kartların hündürlüyü fərqlənir və sətrin altında boşluq qalırdı. */
.service-item.style-4 {
  height: 100%;
}

.service-item.style-4 .title {
  min-height: 64px; /* 2 × line-height (fallback) */
  min-height: calc(2 * 1lh);
}

/* Haqqımızda → "Məhsullarımız" kartları: temada ikonun altında 95px boşluq var
   və başlıq 2 sətirlik yer tutur — qısa məhsul adları üçün kart çox iri görünürdü. */
.service-item.style-4.product-item {
  padding: 30px 30px 35px;
}

.service-item.style-4.product-item .service-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 30px;
}

.service-item.style-4.product-item .title {
  min-height: 0;
  margin-bottom: 12px;
}

/* Daxili səhifələrdə banner header-in altına girirdi.
   Temanın `.space-for-header` boşluğu (105px / 95px) `header-1` üçün
   hesablanıb; bizim `header-2 header-absolute` daha aşağıda bitir (110px),
   ona görə boşluğu artırırıq. */
.space-for-header {
  padding-top: 130px;
}

@media only screen and (max-width: 991px) {
  .space-for-header {
    padding-top: 125px;
  }
}

/* Daxili səhifələrdə (Haqqımızda, Xidmətlər, Əlaqə) menyu zolağı ağdır —
   temanın `header-1` variantındakı kimi. Ana səhifədə header tünd hero-nun
   üstündə dayandığı üçün orada şüşəvari qalır.
   Fon ağ olduğuna görə üzərindəki hər şeyi tündləşdirmək lazımdır. */
.header-area.header-2.header-absolute.header-solid .header-wrapper {
  background-color: var(--tj-color-common-white);
  backdrop-filter: none;
}

.header-area.header-2.header-absolute.header-solid .mainmenu > ul > li > a {
  color: var(--tj-color-heading-primary);
}

.header-area.header-2.header-absolute.header-solid .mainmenu > ul > li > a:hover,
.header-area.header-2.header-absolute.header-solid .mainmenu > ul > li:hover > a,
.header-area.header-2.header-absolute.header-solid .mainmenu > ul > li.current-menu-item > a,
.header-area.header-2.header-absolute.header-solid .mainmenu > ul > li.current-menu-ancestor > a {
  color: var(--tj-color-theme-primary);
}

/* Fonu ağ olan hər iki halda (daxili səhifələrin zolağı və aşağı sürüşəndə
   düşən sticky zolaq) dil düyməsi tünd olmalıdır — ağ fonda ağ yazı görünmürdü. */
.header-area.header-2.header-absolute.header-solid .header-lang-toggle,
.header-area.header-2.header-duplicate .header-lang-toggle {
  color: var(--tj-color-heading-primary);
}

.header-area.header-2.header-absolute.header-solid .header-lang-toggle:hover,
.header-area.header-2.header-duplicate .header-lang-toggle:hover {
  color: var(--tj-color-theme-primary);
}

.header-area.header-2.header-absolute.header-solid .menu_bar span {
  background-color: var(--tj-color-heading-primary);
}

/* ==========================================================
   Layihələr səhifəsi — müştərilər üzrə siyahı + kateqoriya filtri
   Quruluş Bexon-un service-details səhifəsindəndir (FAQ accordion +
   "More services" sidebar). Kartlar açılıb-bağlanmır: həmişə açıqdır
   və ağ fondadır.
   Başlıq `.faq-title` deyil, çünki temanın main.js-i ona klikdə
   `.active` əlavə edib kartı yaşıla boyayır.
   ========================================================== */
.project-list .accordion-item {
  background-color: var(--tj-color-common-white);
}

.project-list .project-group-title {
  padding: 25px 0 20px;
  border-bottom: 1px dashed var(--tj-color-border-1);
}

.project-list .project-group-category {
  display: block;
  margin-bottom: 6px;
  color: var(--tj-color-theme-primary);
  font-size: 14px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.3;
}

.project-list .project-group-client {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

.project-list .accordion-body {
  margin-top: 18px;
}

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

.project-list .project-group-list li {
  position: relative;
  padding-inline-start: 20px;
  line-height: 1.55;
}

.project-list .project-group-list li + li {
  margin-top: 10px;
}

.project-list .project-group-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
}

/* Filtr gizlədəndə boşluq qalmasın (`.accordion-item:last-child` qaydası
   gizli kartlarla işləmir, ona görə ara məsafəni gap ilə veririk). */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-list .accordion-item {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .project-list .project-group-title {
    padding: 20px 0 16px;
  }

  .project-list .project-group-client {
    font-size: 18px;
  }
}

/* ==========================================================
   Mobil (hamburger) menyuda dil seçimi.
   Dizaynda dil seçimi yalnız desktop header-də idi (`d-none d-lg-inline-flex`),
   ona görə mobil ekranda dil dəyişmək mümkün olmurdu.
   ========================================================== */
.hamburger-langs {
  margin-top: 30px;
}

.hamburger-langs .hamburger-title {
  margin-bottom: 12px;
}

.hamburger-lang-list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hamburger-lang-list a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--tj-color-border-2);
  border-radius: 6px;
  color: var(--tj-color-common-white);
  font-size: 14px;
  line-height: 1;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.hamburger-lang-list a:hover,
.hamburger-lang-list a.active {
  border-color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}

/* ana səhifə slayderinin kiçik şəkilləri — geniş banner şəklini kvadrata kəsib sığdırır.
   Banner şəkillərində əsas obyekt sağdadır (solu gradient örtür), ona görə kəsim sağa sürüşdürülüb. */
.hero-thumb .thumb-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

/* Xidmətlər səhifəsi: CMS-dəki "Mətn" xanası alt başlığın altında */
.service-item .service-body {
  margin-top: 12px;
}

.service-item .service-body p:last-child,
.service-item .service-body ul:last-child {
  margin-bottom: 0;
}

/* Xidmət ikonu CMS-dən şəkil kimi gələndə (<img>) də dizayndakı <i> ikonu kimi hover-də fırlansın */
.service-item .service-icon img {
  display: block;
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.service-item.style-6 .service-icon img {
  transition: transform 0.5s ease-in-out, filter 0.3s ease-in-out;
}

/* hover-də fon yaşıl olur — yaşıl şəkil itməsin deyə dizayndakı <i> ikonu kimi ağ olur */
.service-item.style-6:hover .service-icon img {
  transform: rotateY(360deg);
  filter: brightness(0) invert(1);
}

/* Partnyor loqoları dizayndakı kimi: 2x ölçüdə yüklənir (retinada kəskin qalsın deyə),
   ekranda yarı enə qədər məhdudlaşdırılır */
.h5-client-item .client-logo img {
  max-width: 160px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Ana səhifə "Niyə biz?" kartı: ikon CMS-dən şəkil kimi gələndə ikon şrifti ölçüsündə */
.choose-box .choose-icon img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  transition: filter 0.4s ease-in-out;
}

/* Hover-də kart yaşıl olur və şrift ikonu ağarır; şəkil ikonu CSS rəngini qəbul etmədiyi üçün
   filtrlə ağ edilir (şəffaf fonlu, tək rəngli PNG/SVG üçün) */
.choose-box:hover .choose-icon img {
  filter: brightness(0) invert(1);
}

/* Statik səhifə blokunun mətni (CMS redaktorundan HTML kimi gəlir) — dizayndakı .desc abzasları kimi */
.page-block-body p {
  margin-bottom: 15px;
}

.page-block-body p:last-child {
  margin-bottom: 0;
}

/* Footer: saytı hazırlayan şirkətin loqosu ("Developed by turn") */
.tj-copyright-area .developed-by {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--tj-color-border-1);
  gap: 8px;
  color: var(--tj-color-text-body-2);
  font-size: 15px;
  line-height: 1;
}

.tj-copyright-area .developed-by a {
  display: inline-flex;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.tj-copyright-area .developed-by a:hover {
  opacity: 1;
}

.tj-copyright-area .developed-by img {
  display: block;
  height: 20px;
  width: auto;
}

@media (max-width: 767px) {
  .tj-copyright-area .developed-by {
    justify-content: center;
  }
}