/**
 * Axtea — HİZMET DETAY sayfaları
 * (cagri-merkezi · yedek-parca · kurulum-egitim · tamir-bakim)
 * main.css'e DOKUNULMUYOR.
 */

/* Liste + 4 detay sayfası: sayfa zemini diğer iç sayfalarla AYNI olsun.
 * (Yalnız `.hizmet-detay` yazılıydı; `hizmetler.php` tema grisinde kalıyordu —
 *  ölçüm: #ecf0f0 iken diğer iç sayfalar #eceefa.) */
body:has(.hizmet-detay),
body:has(.hizmet-liste) {
  background-color: #eceefa;
}

/* --- ⚠️ `--tj-color-theme-dark` DÜZELTMELERİ -------------------------------
 * Tayfun bu değişkeni AÇIK GRİ (#dbdbdf) yaptı. Tema onu "koyu zemin" niyetiyle
 * kullandığı her yerde beyaz metin/ikon görünmez oluyor. Sitenin yerleşik
 * koyusu #17282d (footer + servis bölümü + ürün rozetleri). */

/* Kenar çubuğu destek kutusu: zemin açık gri + metin beyaz = okunmuyordu. */
.widget-feature-item .feature-box {
  background: #17282d;
}

/* Önceki/sonraki ok ikonları: beyaz daire içinde açık gri = neredeyse görünmez. */
.tj-post__navigation .tj-nav-post__nav a span i {
  color: var(--tj-color-heading-primary);
}

/* --- Önceki/sonraki gezinme ----------------------------------------------
 * Temanın 3. öğesi (hizmet listesi düğmesi) kaldırıldı; uçlarda karşı taraf
 * boş `div` ile temsil ediliyor ki `justify-content: space-between` ilk
 * hizmeti sola, son hizmeti sağa yaslamayı sürdürsün. */
.hizmet-nav-bos {
  flex: 0 0 auto;
}

/* Hizmet adları buton metni olduğu için uzun; taşmasın diye sınırlanıyor. */
.hizmet-nav .tj-nav-post__nav a {
  max-width: 280px;
  text-align: start;
}

.hizmet-nav .tj-nav__post.next .tj-nav-post__nav a {
  text-align: end;
}

/* --- Kenar çubuğu paleti ---------------------------------------------------
 * Tema widget zemini #d8e5e5 (yeşile çalan gri). Sitenin sayfa zemini #eceefa
 * lavanta olduğu için yan yana yeşil kaçıyordu. Ürünler sayfasındaki filtre
 * kutusunun rengi (#cdd1f3) kullanılıyor — aynı işlevde, onaylı ton. */
.tj-sidebar-widget.service-categories {
  background-color: #cdd1f3;
}

/* --- Numaralı kutular -----------------------------------------------------
 * Tema `.details-content-box`a `align-items: center` veriyor; kart metinleri
 * eşit uzunlukta olmadığında kartlar dikeyde kayıp merdiven görünümü yapıyor
 * (ölçüm: üst kenarlar 60/72/84px, yükseklikler 272-320px). Eşit yükseklik. */
.details-content-box {
  align-items: stretch;
}

.service-details-item {
  display: flex;
  flex-direction: column;
}

/* Metin farkı kalırsa boşluk altta toplansın, başlıklar hizada kalsın. */
.service-details-item .desc {
  margin-block-end: auto;
}

/* --- Hizmet listesi kartları (hizmetler.php) ------------------------------
 * Başlıklar 1-2 satır arası değiştiği için kartlar farklı boyda kalıyordu
 * (ölçüm: 483 / 483 / 515 / 515px). Sütun boyunca eşitleniyor. */
.hizmet-liste .service-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hizmet-liste .service-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Özet metni esnesin ki "Detaylı Bilgi" bağlantıları aynı hizada dursun. */
.hizmet-liste .service-content .desc {
  flex: 1 1 auto;
}

/* --- Logo şeridi boşluğu --------------------------------------------------
 * Tema `.client-section-gap-2` → padding:100px 0 + margin:120px 0. Biz Kimiz'de
 * Tayfun margin'leri kapattırıp padding'i bıraktırmıştı; aynı görünüm için
 * hizmetler.php'de de aynısı uygulanıyor.
 * ⚠️ Kural GLOBAL dosyaya KONMADI: `index.php`de de logo şeridi var ve orası
 *    onaylı — bu dosya yalnız hizmet sayfalarında yükleniyor. */
.tj-client-section.client-section-gap-2 {
  margin-top: 0;
  margin-bottom: 0;
}

/* HİZMET İKONLARI (hareketli SVG) artık axtea.css'te — servis menüsü de kullanıyor. */

/* --- "Learn More" düğmeleri (30 Eyl 2026) ---------------------------------
 * Tema ok dairesine --tj-color-theme-dark (artık açık gri) + beyaz ok veriyor
 * → düğme görünmüyordu. Normalde mor daire + beyaz ok; kart mora dönünce
 * beyaz daire + mor ok; düğmenin kendisine gelince koyu daire. */
.hizmet-liste .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
  transition: background-color 0.3s ease;
}
.hizmet-liste .text-btn .btn-text {
  font-weight: var(--tj-fw-sbold);
}
.hizmet-liste .text-btn:hover .btn-icon,
.hizmet-liste .text-btn:focus-visible .btn-icon {
  background-color: #17282d;
}
.hizmet-liste .service-item:hover .text-btn .btn-icon {
  background-color: #ffffff;
}
.hizmet-liste .service-item:hover .text-btn .btn-icon i {
  color: var(--tj-color-theme-primary);
}
.hizmet-liste .service-item:hover .text-btn:hover .btn-icon,
.hizmet-liste .service-item:hover .text-btn:focus-visible .btn-icon {
  background-color: #17282d;
}
.hizmet-liste .service-item:hover .text-btn:hover .btn-icon i,
.hizmet-liste .service-item:hover .text-btn:focus-visible .btn-icon i {
  color: #ffffff;
}

/* --- ACİL DESTEK HATTI (30 Eyl 2026) — php/acil-destek.php ----------------
 * Genel CTA bandının yerinde, aynı mor bant + footer bindirmesi. İletişim
 * bölümünden ayrı dursun diye üstte boşluk (eskiden 0px yapışıktı). */
.axtea-acil-destek {
  margin-top: clamp(60px, 8vw, 110px);
}
.axtea-acil-destek .cta-area {
  display: block;
  padding: clamp(28px, 4vw, 46px) clamp(22px, 4vw, 55px) clamp(30px, 4vw, 50px);
}
.acil-destek-ust {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 30px;
  margin-bottom: clamp(20px, 2.5vw, 30px);
}
.acil-destek-baslik {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.acil-destek-ust p {
  max-width: 380px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
}
.acil-destek-kutular {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.acil-destek-kutu {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.acil-destek-kutu:hover,
.acil-destek-kutu:focus-visible {
  background: #ffffff;
  color: #17282d;
  transform: translateY(-2px);
}
.acil-destek-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #17282d;
  color: #ffffff;
  font-size: 20px;
}
.acil-destek-kutu:hover .acil-destek-ikon,
.acil-destek-kutu:focus-visible .acil-destek-ikon {
  background: var(--tj-color-theme-primary);
}
.acil-destek-metin {
  min-width: 0;
}
.acil-destek-metin small {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  opacity: 0.85;
}
.acil-destek-metin b {
  display: block;
  font-size: 19px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* Tablet: başlık/metin alt alta, kutular 2 + e-posta tam genişlik */
@media only screen and (max-width: 1199px) {
  .acil-destek-ust {
    flex-direction: column;
    align-items: flex-start;
  }
  .acil-destek-kutular {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .acil-destek-kutu:last-child {
    grid-column: 1 / -1;
  }
}
/* Telefon: tek sütun, dokunmaya uygun büyük kutular */
@media only screen and (max-width: 575px) {
  .acil-destek-kutular {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .acil-destek-kutu {
    padding: 14px 16px;
  }
  .acil-destek-ikon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .acil-destek-metin b {
    font-size: 17px;
  }
}

/* --- "Support" kutusu tipografisi (30 Eyl 2026, patron: "başlık ve yazılar
 * dengesiz") --- Başlık 74px / alt satır 20px idi (≈3,7 kat). Başlık kutu
 * genişliğine uygun 40px'e indi, alt satır soluk küçük etikete dönüştü,
 * telefon hapı onların ritmine oturdu. Dış çerçeve tema yeşili (#d8e5e5)
 * yerine yan sütundaki "Other Services" kutusuyla aynı lavanta. */
.tj-sidebar-widget.widget-feature-item {
  background-color: #cdd1f3;
}
.widget-feature-item .feature-box .feature-content .title {
  font-size: clamp(32px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.widget-feature-item .feature-box .feature-content > span {
  display: block;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.widget-feature-item .feature-box .feature-contact span {
  font-size: 16px;
}

/* "Learn More" kartta ortalıydı; ikon, başlık ve metin sola yaslı → aynı hizaya
 * (30 Eyl 2026 mobil/tablet denetimi; masaüstünde de aynı tutarsızlık vardı). */
.hizmet-liste .text-btn {
  justify-content: flex-start;
}

/* Önceki/sonraki hizmet kutusu son paragrafa yapışıktı (30 Eyl mobil denetim) */
.hizmet-nav.tj-post__navigation,
.hizmet-nav {
  margin-top: clamp(28px, 4vw, 44px);
}