/* ===== Services Page Specific Styles ===== */

/* Service Detail */
.service-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.service-detail.reverse { direction: rtl; }
.service-detail.reverse > * { direction: ltr; }

.service-badge {
  display: inline-block; padding: 4px 12px; border-radius: 4px;
  background: var(--primary-light); color: var(--primary);
  font-size: 13px; font-weight: 600; margin-bottom: 12px;
}
.service-detail-content h2 { margin-bottom: 16px; }
.service-detail-content > p { margin-bottom: 24px; font-size: 16px; }
.service-detail-content h3 { font-size: 18px; margin-bottom: 12px; color: var(--text); }

.check-list { margin-bottom: 20px; }
.check-list li {
  position: relative; padding: 6px 0 6px 24px; font-size: 15px; color: var(--text-light);
}
.check-list li::before {
  content: '✓'; position: absolute; left: 0; top: 6px;
  color: var(--primary); font-weight: 700;
}
.service-note {
  padding: 12px 16px; background: var(--primary-light); border-radius: 6px;
  font-size: 14px; color: var(--primary-dark); border-left: 3px solid var(--primary);
}

.service-detail-image .image-placeholder {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg);
  background: var(--bg-alt); border: 2px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); font-size: 15px;
}

@media (max-width: 768px) {
  .service-detail { grid-template-columns: 1fr; gap: 32px; }
  .service-detail.reverse { direction: ltr; }
}