/* ==========================================================================
   Yapılandırılmış hizmet detayı — Inside Media, 2026-10-01
   detay-h.php, içeriğinde tablo bulunan hizmetlerde .hizmet-zengin sınıfını ekler.
   İçerik panelden (CKEditor) sınıfsız düz HTML olarak gelir; tüm biçim buradadır:
     ilk <p>  → giriş     <table> → avantaj kartları     <ol> → süreç bandı
     <ul>     → riskler   <blockquote> → çağrı bandı (Bize Ulaşın)
   ========================================================================== */
.service-details-content.hizmet-zengin {
  --hz-lacivert: var(--header, #011529);
  --hz-kirmizi: var(--theme, #ff0000);
  --hz-metin: var(--text, #49515B);
  --hz-cizgi: #e3e7ef;
}

.service-details-content.hizmet-zengin > p:empty {
  display: none;
}

.service-details-content.hizmet-zengin > p {
  max-width: 980px;
  margin-bottom: 0;
}

/* giriş: şablondaki boş p.mt-3'ün hemen ardından gelen ilk paragraf */
.service-details-content.hizmet-zengin > p.mt-3 + p {
  margin-top: 18px;
  padding: 2px 0 2px 22px;
  border-left: 4px solid var(--hz-kirmizi);
  font-size: 19px;
  line-height: 1.65;
  color: var(--hz-lacivert);
}

/* bölüm başlıkları */
.service-details-content.hizmet-zengin > h3 {
  margin: 64px 0 22px;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--hz-lacivert);
}

.service-details-content.hizmet-zengin > h3::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: var(--hz-kirmizi);
}

/* ---- avantajlar: tablo → kart ızgarası ---- */
.service-details-content.hizmet-zengin > table {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}

.service-details-content.hizmet-zengin > table thead {
  display: none;
}

.service-details-content.hizmet-zengin > table tbody {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.service-details-content.hizmet-zengin > table tr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 26px;
  background: #fff;
  border: 1px solid var(--hz-cizgi);
  border-top: 3px solid var(--hz-kirmizi);
  border-radius: 16px;
  transition: border-color .3s ease, transform .3s ease;
}

.service-details-content.hizmet-zengin > table tr:hover {
  border-color: #ffc2c2;
  border-top-color: var(--hz-kirmizi);
  transform: translateY(-3px);
}

.service-details-content.hizmet-zengin > table td {
  display: block;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hz-metin);
}

.service-details-content.hizmet-zengin > table td:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--hz-lacivert);
}

.service-details-content.hizmet-zengin > table td:first-child::before {
  content: "\f00c";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #ffeded;
  color: var(--hz-kirmizi);
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 16px;
}

/* ---- süreç: ol → koyu bant ---- */
.service-details-content.hizmet-zengin > ol {
  counter-reset: hz-adim;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 34px 26px;
  list-style: none;
  background: var(--hz-lacivert);
  border-radius: 22px;
}

.service-details-content.hizmet-zengin > ol > li {
  counter-increment: hz-adim;
  display: block;
  margin: 0;
  padding: 4px 22px;
  list-style: none;
  border-left: 1px solid rgba(255, 255, 255, .12);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

.service-details-content.hizmet-zengin > ol > li:first-child {
  border-left: 0;
}

.service-details-content.hizmet-zengin > ol > li::before {
  content: counter(hz-adim, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--hz-kirmizi);
}

.service-details-content.hizmet-zengin > ol > li > strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
}

.service-details-content.hizmet-zengin > ol > li > br {
  display: none;
}

/* ---- riskler: ul → uyarı kutuları ---- */
.service-details-content.hizmet-zengin > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-details-content.hizmet-zengin > ul > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px 20px;
  list-style: none;
  background: #fff6f6;
  border: 1px solid #ffdcdc;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--hz-lacivert);
}

.service-details-content.hizmet-zengin > ul > li::before {
  content: "\f071";
  flex: 0 0 auto;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hz-kirmizi);
}

/* ---- çağrı: blockquote → koyu bant + Bize Ulaşın ---- */
.service-details-content.hizmet-zengin > blockquote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 56px 0 0;
  padding: 34px 40px;
  background: var(--hz-lacivert);
  border: 0;
  border-left: 6px solid var(--hz-kirmizi);
  border-radius: 22px;
}

.service-details-content.hizmet-zengin > blockquote p {
  max-width: 780px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.45;
  color: #fff;
}

.service-details-content.hizmet-zengin > blockquote p:last-child {
  flex: 0 0 auto;
}

.service-details-content.hizmet-zengin > blockquote a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 50px;
  background: var(--hz-kirmizi);
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .25s ease;
}

.service-details-content.hizmet-zengin > blockquote a::after {
  content: "\f061";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 14px;
}

.service-details-content.hizmet-zengin > blockquote a:hover {
  background: #d40000;
  color: #fff;
}

/* ---- duyarlı ---- */
@media (max-width: 1199px) {
  .service-details-content.hizmet-zengin > table tbody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-details-content.hizmet-zengin > ol {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 28px;
  }

  .service-details-content.hizmet-zengin > ol > li {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .service-details-content.hizmet-zengin > ol > li:first-child {
    border-top: 0;
  }

  .service-details-content.hizmet-zengin > ol > li::before {
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 30px;
  }

  .service-details-content.hizmet-zengin > ol > li > strong {
    margin-bottom: 4px;
  }
}

@media (max-width: 767px) {
  .service-details-content.hizmet-zengin > table tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .service-details-content.hizmet-zengin > ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-details-content.hizmet-zengin > blockquote {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px;
  }

  .service-details-content.hizmet-zengin > blockquote p {
    font-size: 18px;
  }
}

@media (max-width: 575px) {
  .service-details-content.hizmet-zengin > p.mt-3 + p {
    padding-left: 16px;
    font-size: 17px;
  }

  .service-details-content.hizmet-zengin > h3 {
    margin-top: 46px;
    font-size: 22px;
  }

  .service-details-content.hizmet-zengin > table tbody {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-details-content.hizmet-zengin > table tr {
    padding: 20px 20px 22px;
  }

  .service-details-content.hizmet-zengin > ol {
    padding: 6px 20px;
    border-radius: 18px;
  }

  .service-details-content.hizmet-zengin > ol > li {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .service-details-content.hizmet-zengin > ol > li::before {
    font-size: 26px;
  }
}