/* ============================================================
   AGORA İNŞAAT — hizmetler.css
   Kapsam: /hizmetlerimiz/ vitrin sayfası + 8 kategori sayfası
   (proje-ve-raporlama, insaat, mimarlik, elektrik-enerji,
   mekanik-tesisat, kapi-pencere, mobilya, cam-dograma-sistemleri)
   + bu kategorilerin altındaki TÜM grup/birim ve hizmet detay
   sayfaları (~190 sayfa). Bölüm 5 + Bölüm 14 referans alınmıştır.

   ÖNEMLİ: Bu dosya tek başına en çok sayfayı etkileyen dosyadır.
   Burada yapılan bir değişiklik ~190 sayfanın TAMAMINI etkiler —
   değişiklik yapmadan önce iki kez düşün.
   ============================================================ */

/* ============================================================
   1. HİZMETLERİMİZ VİTRİN SAYFASI (/hizmetlerimiz/)
   8 kategoriye link veren kart grid'i.
   ============================================================ */
.service-hero {
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}

.service-hero .section-heading {
  margin-left: auto;
  margin-right: auto;
}

.service-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1000px) {
  .service-category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   2. KATEGORİ SAYFASI (örn. /insaat/, /mimarlik/…)
   Kısa tanıtım + altındaki grup/birim başlıkları, her biri kendi
   hizmet detay sayfalarına link veren bir liste ile.
   ============================================================ */
.category-intro {
  max-width: var(--content-max-width);
  margin-bottom: var(--space-xl);
}

.category-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg) var(--space-xl);
}

.service-group {
  border-top: 2px solid var(--color-primary);
  padding-top: var(--space-sm);
}

.service-group h2,
.service-group h3 {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.service-group__list li {
  border-bottom: var(--border-width) solid var(--border-color);
}

.service-group__list li:last-child {
  border-bottom: none;
}

.service-group__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 0;
  color: var(--color-text);
}

.service-group__list a:hover {
  color: var(--color-primary);
  padding-left: 6px;
}

.service-group__list .icon {
  width: 16px;
  height: 16px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

/* --- Görsel hizmet kartları (kategori sayfalarındaki alt hizmetler için,
   .service-group__list'in görselli versiyonu) --- */
.service-item-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 1000px) {
  .service-item-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .service-item-grid { grid-template-columns: 1fr; }
}

.service-item-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.service-item-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.service-item-card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.service-item-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}

.service-item-card__title .icon {
  width: 16px;
  height: 16px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.service-item-card:hover .service-item-card__title {
  color: var(--color-primary);
}

/* ============================================================
   2.5 HİZMET DETAY — İÇERİK BAŞLANGICI
   Artık ayrı bir "hero altı" bölümü yok: kapak görseli ve tanıtım
   paragrafları doğrudan .service-detail__body'nin İLK öğeleri
   (bkz. Bölüm 3 — .service-detail__cover ve p:first-of-type).
   Böylece sol sidebar sayfanın EN ÜSTÜNDEN başlar, görsel ve
   yazı sidebar'ın yanında, içerik sütununun bir parçası olur.
   ============================================================ */
.service-detail__body p.lead-strong {
  color: var(--color-dark);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ============================================================
   3. HİZMET DETAY SAYFASI (örn. /daire-tadilati/, /mimari-tasarim/…)
   Başlık + breadcrumb + görsel + içerik (XML'den gelen content) +
   sol sidebar (aynı gruptaki hizmetler — includes/service-sidebar.php)
   + CTA bandı.

   YENİDEN TASARIM (2026): içerik artık düz bir metin akışı değil,
   köşeleri yuvarlatılmış, gölgeli tek bir "makale kartı" içinde
   sunuluyor. Kapak görseli kartın üst kenarına taşarak (bleed)
   kartla bütünleşiyor, giriş paragrafı vurgulu bir "lead" bloğu
   olarak öne çıkıyor, alt başlıklar sola yaslı + renkli şerit ile
   ayrılıyor ve madde/adım listeleri modern, gölgeli kartlara
   dönüşüyor. Tüm boyutlar main.css'teki ortak değişkenlerle
   (renk/radius/gölge/boşluk) kurulduğu için sitedeki diğer kart
   bileşenleriyle (service-item-card, service-category-card vb.)
   görsel aile birliği korunuyor.
   ============================================================ */
.service-detail__header {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
}

.service-detail__header h1 {
  max-width: var(--content-max-width);
}

/* İçerik iki kolonlu: ana metin + (opsiyonel) yan panel.
   Yan panel yoksa .service-detail__body tek başına tam genişlik kullanır. */
.service-detail__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 900px) {
  .service-detail__layout { grid-template-columns: 1fr; }
}

/* --- Makale kartı: içerik artık sayfanın zemin renginden ayrışan,
   yuvarlak köşeli, hafif gölgeli beyaz bir kart içinde. --- */
.service-detail__body {
  max-width: 1100px;
  margin: 0 auto;
}

/* Bu fazda ürettiğimiz ~173 detay sayfasının hiçbirinde yan panel
   (.service-detail__aside) kullanılmıyor — bu yüzden .service-detail__body
   tek başınayken grid'in iki kolonunu da kaplayıp tam genişlik alsın. */
.service-detail__body:only-child {
  grid-column: 1 / -1;
}

/* Kapak görseli: artık içerik sütununun (sidebar'ın yanındaki) tam
   genişliğini kaplar — sayfa geneli değil, sadece .service-detail__body. */
.service-detail__cover {
  width: 100%;
  max-width: none;
  height: 420px;
  margin: 0 0 var(--space-lg);
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: block;
}

@media (max-width: 900px) {
  .service-detail__cover { height: 280px; }
}

/* ---------------------------------------------------------------
   İÇERİK TİPOGRAFİSİ (XML'den gelen p/h4/ul/ol blokları)
   main.css'teki global reset (margin:0) tüm başlık/paragraf/liste
   boşluklarını sıfırladığı için, bu blok olmadan içerik birbirine
   yapışık görünüyordu. Burada .content/.entry-content ile aynı
   mantık .service-detail__body'ye özel uygulanıyor.

   Not: eski sürümde gövde metni tarayıcı varsayılanı olan 16px'te
   kalıyor ve başlıklarla oranı bozuk görünüyordu — okunabilirlik
   için taban punto 18px'e, satır aralığı 1.85'e çıkarıldı.
   --------------------------------------------------------------- */
.service-detail__body > * + * {
  margin-top: var(--space-md);
}

.service-detail__body p {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* Giriş paragrafı: sayfanın "lead"i — hafif daha büyük punto + sol şeritli
   vurgu bloğu ile ziyaretçinin gözünü ilk cümleye çeker. */
.service-detail__body > p:first-of-type {
  max-width: none;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-dark);
  background-color: var(--color-light-green);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
  margin-top: var(--space-lg) !important;
}

.service-detail__body > h2,
.service-detail__body > h3,
.service-detail__body > h4 {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 4px solid var(--color-primary);
  font-size: 1.3rem;
  line-height: 1.3;
  text-align: left;
  color: var(--color-dark);
}

.service-detail__body ul,
.service-detail__body ol {
  padding-left: var(--space-md);
}

.service-detail__body ul { list-style: disc; }
.service-detail__body ol { list-style: decimal; }

.service-detail__body li {
  margin-bottom: var(--space-xs);
  font-size: 0.98rem;
  line-height: 1.6;
}

.service-detail__body a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(76, 101, 49, 0.35);
  transition: text-decoration-color 0.2s ease;
}

.service-detail__body a:hover {
  text-decoration-color: var(--color-primary);
}

/* ---------------------------------------------------------------
   "4'LÜ KUTU" GRID'İ — sayfa içeriğindeki en üst seviye <ul>/<ol>
   listeleri (madde/adım listeleri) artık düz metin değil, ikonlu
   kart grid'i olarak gösteriliyor. İç içe listeler (bir maddenin
   açıklaması) normal metin olarak kalır, kutulanmaz.
   --------------------------------------------------------------- */
.service-detail__body > ul:not(.checklist),
.service-detail__body > ol {
  list-style: none;
  padding-left: 0;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  counter-reset: agora-adim;
}

@media (max-width: 560px) {
  .service-detail__body > ul:not(.checklist),
  .service-detail__body > ol { grid-template-columns: 1fr; }
}

.service-detail__body > ul:not(.checklist) > li,
.service-detail__body > ol > li {
  position: relative;
  counter-increment: agora-adim;
  margin-bottom: 0;
  background-color: var(--color-background);
  border: 1px solid rgba(23, 24, 23, 0.06);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 76px var(--space-sm) var(--space-sm);
  font-size: 0.88rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.service-detail__body > ul:not(.checklist) > li:hover,
.service-detail__body > ol > li:hover {
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.service-detail__body > ul:not(.checklist) > li::before,
.service-detail__body > ol > li::before {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Sıralı listelerde (adım adım süreçler) rakam rozeti */
.service-detail__body > ol > li::before {
  content: counter(agora-adim);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

/* Sırasız listelerde (avantaj/özellik maddeleri) rozet dairesi.
   content boş bırakılırsa ::before hiç üretilmez, bu yüzden burada
   ayrıca belirtiliyor. */
.service-detail__body > ul:not(.checklist) > li::before {
  content: "";
}

/* Sırasız listelerde (avantaj/özellik maddeleri) onay ikonu.
   NOT: ikon artık ayrı bir ::after katmanında — mask'i doğrudan ::before'a
   uygulamak, üstündeki gradyanı/gölgeyi/yuvarlak köşeyi de maskeleyip
   yok ediyor ve geriye sadece küçücük, arka planı olmayan bir tik
   kalıyordu (bildirilen "tik ikonları çok küçük/kötü" sorununun kaynağı
   buydu). ::after ile rozet dairesi sağlam kalıyor, tik onun üzerine
   ayrı ve büyük şekilde biniyor. */
.service-detail__body > ul:not(.checklist) > li::after {
  content: "";
  position: absolute;
  top: calc(var(--space-sm) + 12px);
  left: calc(var(--space-sm) + 12px);
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 17.62 4.4 12.47l1.41-1.41 3.74 3.73 8.64-8.63 1.41 1.41z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 17.62 4.4 12.47l1.41-1.41 3.74 3.73 8.64-8.63 1.41 1.41z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.service-detail__body > ul:not(.checklist) > li > p,
.service-detail__body > ol > li > p {
  margin: 0 0 6px;
  max-width: none;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-dark);
}

.service-detail__body > ul:not(.checklist) > li > ul,
.service-detail__body > ol > li > ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

.service-detail__body > ul:not(.checklist) > li > ul > li,
.service-detail__body > ol > li > ul > li {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-secondary);
  font-weight: 400;
}

.service-detail__body > ul:not(.checklist) > li > ul > li::before,
.service-detail__body > ol > li > ul > li::before {
  content: none;
}

/* ============================================================
   3.5 HİZMET DETAY — SOL SÜTUN (includes/service-sidebar.php)
   Üç kart: 1) ilgili hizmet grubu menüsü (aktif sayfa vurgulu),
   2) iletişim kutusu, 3) teklif/çağrı kutusu. Masaüstünde sticky,
   mobilde içerik akışının üstüne (grid-order ile) alınır.
   ============================================================ */
.service-detail__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 100px;
}

@media (max-width: 900px) {
  .service-detail__aside {
    position: static;
    order: 1;
    margin-top: var(--space-lg);
  }
}

.aside-card {
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}

.aside-card h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
}

/* --- 1) Hizmet grubu menüsü --- */
.aside-nav__eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.aside-nav h3 {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-light-green);
}

.aside-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aside-nav__list li {
  border-bottom: var(--border-width) solid var(--border-color);
}

.aside-nav__list li:last-child { border-bottom: none; }

.aside-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 12px 4px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.aside-nav__list a .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-secondary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.aside-nav__list li:not(.is-active) a:hover {
  color: var(--color-primary);
  padding-left: 10px;
}

.aside-nav__list li:not(.is-active) a:hover .icon {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-primary);
}

.aside-nav__list li.is-active {
  margin: 10px 0;
}

.aside-nav__list li.is-active a {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.aside-nav__list li.is-active a .icon {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-white);
}

.aside-nav__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 2px solid var(--color-light-green);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
}

.aside-nav__all .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.aside-nav__all:hover .icon { transform: translateX(3px); }

/* --- 2) Yardım / iletişim kutusu --- */
.aside-help {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.aside-help h3 { color: var(--color-white); }

.aside-help p {
  margin-top: 6px;
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
}

.aside-help__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.aside-help__list li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.aside-help__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

.aside-help__icon .icon { width: 18px; height: 18px; }

.aside-help__list small {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

.aside-help__list a {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-white);
}

.aside-help__list a:hover { color: var(--color-light-green); }

.aside-help__cta {
  width: 100%;
  text-align: center;
  background-color: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-white);
}

.aside-help__cta:hover {
  background-color: var(--color-light-green);
  border-color: var(--color-light-green);
  color: var(--color-dark);
}

/* --- Yardım kutusundaki "Bize Ulaşın" düğmesi tam genişlik --- */
.btn--block {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Görsel galeri (sayfa içindeki birden fazla proje/uygulama fotoğrafı) --- */
.service-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

@media (max-width: 700px) {
  .service-gallery { grid-template-columns: repeat(2, 1fr); }
}

.service-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* --- İçerik içi check-listeler (XML'deki onay/uyarı emoji madde işaretlerinin
   yerini alan, SVG ikonlu madde listesi — Bölüm 12.4, emoji yasak) --- */
.service-detail__body .checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
}

.service-detail__body .checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  margin-bottom: 0;
}

.service-detail__body .checklist .icon-check {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-light-green);
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.service-detail__body .steps {
  padding-left: 1.2em;
  margin: var(--space-md) 0 var(--space-lg);
}

.service-detail__body .steps li {
  margin-bottom: var(--space-sm);
  font-size: 0.98rem;
}